From 2e2e2130514f95649c8b2a201d264b6638f42b84 Mon Sep 17 00:00:00 2001
From: Sean Quiambao <91030482+toastmeal@users.noreply.github.com>
Date: Thu, 2 Jan 2025 01:03:59 -0800
Subject: [PATCH] ui adjustments for admin dashboard

---
 src/app/admin/[program]/application/page.tsx |  8 +++-
 src/app/admin/[program]/page.tsx             | 44 ++++++++++----------
 src/components/global/table/dashboard.tsx    |  2 +-
 src/components/global/tag.tsx                |  2 +-
 src/components/programs/project.tsx          |  4 +-
 5 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/app/admin/[program]/application/page.tsx b/src/app/admin/[program]/application/page.tsx
index 5b91d87..b8c9f1f 100644
--- a/src/app/admin/[program]/application/page.tsx
+++ b/src/app/admin/[program]/application/page.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { Label } from "@/components/ui/label";
 
 import { statuses } from "@/data/admin/applications";
 
@@ -20,8 +21,8 @@ const Page = ({ params }: props) => {
   const { program } = params;
 
   return (
-    <div className="flex h-screen w-screen flex-col items-center gap-4 py-4">
-      <div className="w-11/12">
+    <div className="flex h-screen w-11/12 flex-col items-center gap-4 py-4">
+      <div className="flex w-11/12 flex-col items-start gap-2">
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
@@ -44,6 +45,9 @@ const Page = ({ params }: props) => {
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>
+        <div>
+          <Label className="text-2xl">Applications</Label>
+        </div>
       </div>
       <Dashboard
         columns={columns}
diff --git a/src/app/admin/[program]/page.tsx b/src/app/admin/[program]/page.tsx
index 62b7001..4255dfe 100644
--- a/src/app/admin/[program]/page.tsx
+++ b/src/app/admin/[program]/page.tsx
@@ -10,6 +10,7 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { AlertDialogTrigger } from "@radix-ui/react-alert-dialog";
 
 const projects: ProjectType[] = [
   {
@@ -29,12 +30,12 @@ const projects: ProjectType[] = [
   },
 ];
 
-const program = "Ignite";
+const program = "IgniteF24";
 
 const Page = () => {
   return (
-    <div className="">
-      <div className="w-1/2">
+    <div className="flex h-screen w-11/12 flex-col items-center gap-4 py-4">
+      <div className="flex w-11/12 flex-col items-start gap-2">
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
@@ -46,26 +47,27 @@ const Page = () => {
                 {program}
               </BreadcrumbLink>
             </BreadcrumbItem>
-            <BreadcrumbSeparator />
           </BreadcrumbList>
         </Breadcrumb>
-      </div>
-      <div className="mx-8 mt-6 flex items-center justify-between">
-        <Label className="text-2xl">Ignite 2024 Projects</Label>
-        <AlertDialog>
-          <Add />
-        </AlertDialog>
-      </div>
-
-      <div className="m-6 grid grid-cols-3 gap-4">
-        {projects.map(({ title, description, tags }, index) => (
-          <Project
-            key={index}
-            title={title}
-            description={description}
-            tags={tags}
-          />
-        ))}
+        <div className="flex w-full flex-row justify-between">
+          <Label className="text-2xl">Ignite 2024 Projects</Label>
+          <AlertDialog>
+            <AlertDialogTrigger className="rounded-md bg-starlight-blue px-6 py-2 text-white">
+              Add Project
+            </AlertDialogTrigger>
+            <Add />
+          </AlertDialog>
+        </div>
+        <div className="mt-2 grid grid-cols-3 gap-4">
+          {projects.map(({ title, description, tags }, index) => (
+            <Project
+              key={index}
+              title={title}
+              description={description}
+              tags={tags}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/global/table/dashboard.tsx b/src/components/global/table/dashboard.tsx
index 135920e..269f810 100644
--- a/src/components/global/table/dashboard.tsx
+++ b/src/components/global/table/dashboard.tsx
@@ -48,7 +48,7 @@ const Dashboard = <TData, TValue>({
   });
 
   return (
-    <div className="flex w-11/12 flex-col gap-3">
+    <div className="flex w-11/12 flex-col gap-2">
       <Filter options={filters} setColumnFilters={setColumnFilters} />
       <Toolbar
         data={data}
diff --git a/src/components/global/tag.tsx b/src/components/global/tag.tsx
index 0e89ada..8634d4b 100644
--- a/src/components/global/tag.tsx
+++ b/src/components/global/tag.tsx
@@ -6,7 +6,7 @@ interface props {
 const Tag = ({ children }: props) => {
   return (
     <div
-      className={`${mappings[children]} rounded-md px-3 py-1 text-center font-semibold text-white`}
+      className={`${mappings[children]} rounded-md px-4 py-2 text-center text-sm text-white`}
     >
       {children}
     </div>
diff --git a/src/components/programs/project.tsx b/src/components/programs/project.tsx
index a43388c..a6ae1e9 100644
--- a/src/components/programs/project.tsx
+++ b/src/components/programs/project.tsx
@@ -9,14 +9,14 @@ interface props {
 
 const Project = ({ title, description, tags }: props) => {
   return (
-    <div className="rounded-xl border border-gray-300 bg-white p-4">
+    <div className="flex flex-col gap-3 rounded-xl border border-gray-300 bg-white p-4">
       <div className="text-2xl font-semibold">{title}</div>
       <div className="flex flex-wrap gap-2">
         {tags.map((text, index) => (
           <Tag key={index}>{text}</Tag>
         ))}
       </div>
-      <div className="">{description}</div>
+      <div>{description}</div>
     </div>
   );
 };