Merge pull request #129 from acm-ucr/sean/dashboardfix

ui adjustments for admin dashboard
acm-ucr · Jan 2, 2025 · e74857d · e74857d
2 parents a89b70d + 2e2e213
commit e74857d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };