From 234803e313e7f3197ccab191b2689c23a186c771 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 08:31:48 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20re-styling=20project=20?=
 =?UTF-8?q?list=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/OrgSlug.tsx       |  4 +-
 .../frontend/src/pages/org-slug/index.tsx     | 40 +++++++++----------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/pages/OrgSlug.tsx b/packages/frontend/src/pages/OrgSlug.tsx
index b2214e4e..834bb15d 100644
--- a/packages/frontend/src/pages/OrgSlug.tsx
+++ b/packages/frontend/src/pages/OrgSlug.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
-import Sidebar from '../components/Sidebar';
-import { OctokitProvider } from '../context/OctokitContext';
+import { OctokitProvider } from 'context/OctokitContext';
+import { Sidebar } from 'components/shared/Sidebar';
 
 const OrgSlug = () => {
   return (
diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx
index 406c7639..4b150dea 100644
--- a/packages/frontend/src/pages/org-slug/index.tsx
+++ b/packages/frontend/src/pages/org-slug/index.tsx
@@ -3,11 +3,11 @@ import { Link, useParams } from 'react-router-dom';
 import { Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 
-import { Typography, Chip } from '@material-tailwind/react';
-
-import { useGQLClient } from '../../context/GQLClientContext';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { ProjectCard } from 'components/projects/ProjectCard';
+import { Heading } from 'components/shared/Heading';
+import { Badge } from 'components/shared/Badge';
+import { useGQLClient } from 'context/GQLClientContext';
 
 const Projects = () => {
   const client = useGQLClient();
@@ -26,33 +26,31 @@ const Projects = () => {
   }, [orgSlug]);
 
   return (
-    <div>
-      <div className="flex p-5">
+    <section className="px-6 py-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex items-center">
         <div className="grow">
-          <div className="flex gap-2 items-center">
-            <Typography variant="h4" placeholder={''}>
+          <div className="flex gap-4 items-center">
+            <Heading as="h2" className="font-normal text-[24px]">
               Projects
-            </Typography>
-            <Chip
-              className="bg-gray-300 rounded-full static"
-              value={projects.length}
-              size="sm"
-            />
+            </Heading>
+            <Badge className="bg-base-bg-alternate text-elements-mid-em h-7 w-7">
+              {projects.length}
+            </Badge>
           </div>
         </div>
-        <div>
-          <Link to="projects/create">
-            <Button leftIcon={<PlusIcon />}>Create project</Button>
-          </Link>
-        </div>
+        <Link to="projects/create">
+          <Button leftIcon={<PlusIcon />}>Create project</Button>
+        </Link>
       </div>
-      <div className="grid grid-cols-3 gap-5 p-5">
-        {projects.length !== 0 &&
+      {/* List of projects */}
+      <div className="grid grid-cols-3 gap-4">
+        {projects.length > 0 &&
           projects.map((project, key) => {
             return <ProjectCard project={project} key={key} />;
           })}
       </div>
-    </div>
+    </section>
   );
 };