Merge pull request tryyang2001#98 from vivienherq/ui-patching-general

Patch frontend UI for general pages and components
vivienherq · Apr 14, 2024 · 87327f3 · 87327f3
2 parents 873d287 + 9fb64fc
commit 87327f3
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 58 deletions.
diff --git a/frontend/src/app/assignments/[id]/page.tsx b/frontend/src/app/assignments/[id]/page.tsx
@@ -139,7 +139,7 @@ export default function Page({ params }: Props) {
 
             {/* Button for submission */}
             {userRole === "student" && (
-              <div className="ml-auto mr-4 my-2">
+              <div className="ml-auto my-2">
                 <Button className="px-6" color="primary" onPress={onOpen}>
                   Submit
                 </Button>

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -19,13 +19,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="bg-white">
-      <body className={inter.className + " min-h-screen"}>
+      <body className={inter.className + " min-h-dvh"}>
         <Providers>
           <div className="flex flex-row justify-start">
             <div>
               <SideBar />
             </div>
-            <div className="h-dvh bg-white flex-1 text-black overflow-auto">
+            <div className="h-dvh bg-white flex-1 text-black overflow-auto p-12">
               {children}
             </div>
           </div>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,25 +1,10 @@
 "use client";
 
-import { Button } from "@nextui-org/react";
-
 export default function Home() {
   return (
     // feel free to edit/remove this code
     <div className="flex flex-col items-center justify-center">
-      <h1 className="text-3xl font-medium mt-4">
-        Frontend Management System{" "}
-        <span className="text-lime-500 font-semibold">Homepage</span>
-      </h1>
-      <p>This is a proof that NextUI is working :)</p>
-      <Button
-        color="primary"
-        onClick={(_e) => {
-          alert("Button clicked");
-        }}
-        className="my-4"
-      >
-        Click Me
-      </Button>
+      <h1 className="text-3xl font-medium mt-4">Frontend Management System</h1>
     </div>
   );
 }
diff --git a/frontend/src/components/assignment/AssignmentList.tsx b/frontend/src/components/assignment/AssignmentList.tsx
@@ -35,7 +35,7 @@ function AssignmentList({ assignments, userRole }: Props) {
 
   return (
     <div>
-      <b>Assignments</b>
+      <h1 className="text-2xl font-bold">Assignments</h1>
       <Spacer y={4} />
       <div className="gap-2 grid grid-cols-1 sm:grid-cols-1">
         {assignments.length === 0 && <div>There is no assignment due</div>}

diff --git a/frontend/src/components/assignment/AssignmentPage.tsx b/frontend/src/components/assignment/AssignmentPage.tsx
@@ -16,7 +16,7 @@ function AssignmentPage({ assignment, showNumberOfQuestions = true }: Props) {
     <div>
       <h1 className="text-3xl font-semibold ">{assignment.title}</h1>
 
-      <div className="flex flex-col ml-4 my-4 gap-2">
+      <div className="flex flex-col my-4 gap-2">
         <p className="text-lg font-semibold">
           Due on:{" "}
           <span className="italic font-medium">

diff --git a/frontend/src/components/assignment/AssignmentQuestion.tsx b/frontend/src/components/assignment/AssignmentQuestion.tsx
@@ -8,7 +8,7 @@ interface Props {
 export default function AssignmentQuestion({ question }: Props) {
   return (
     <div className="flex px-0 py-4 mb-6">
-      <div className="w-full px-5">
+      <div className="w-full">
         {/* Question title */}
         <div className="flex space-x-4">
           <div className="flex-1 mr-2 text-xl font-semibold">

diff --git a/frontend/src/components/common/SideBar.tsx b/frontend/src/components/common/SideBar.tsx
@@ -19,13 +19,13 @@ interface MenuItem {
 const menuItems: MenuItem[] = [
   {
     id: 1,
-    label: "Dashboard",
+    label: "Assignments",
     icon: <Icons.Dashboard className="text-2xl" />,
     link: "/dashboard",
   },
   {
     id: 2,
-    label: "Create New Assignment",
+    label: "Create Assignment",
     icon: <Icons.CreateNewInstance className="text-2xl" />,
     link: "/assignments/create",
   },
@@ -107,10 +107,10 @@ export default function SideBar() {
       onMouseEnter={onMouseOver}
       onMouseLeave={onMouseOver}
     >
-      <div className="flex flex-col relative">
-        <div className="flex items-center pl-1 gap-4">
+      <div className="flex flex-col relative h-full">
+        <div className="flex h-full pl-1 gap-4">
           {isCollapsed ? (
-            <div className="block">
+            <div className="flex flex-col h-full">
               <div className="mb-4">
                 <Button
                   isIconOnly
@@ -129,22 +129,33 @@ export default function SideBar() {
                 />
               </UserDropdown>
 
-              <Spacer y={60} />
+              <div className="flex-1 flex flex-col justify-center items-center">
+                <Spacer y={1.5} />
+                {menuItems.map((item: MenuItem) => {
+                  if (
+                    item.id === 2 &&
+                    (user?.role ?? "student") === "student"
+                  ) {
+                    return <div key={item.id}></div>;
+                  }
+
+                  return (
+                    <Button
+                      isIconOnly
+                      key={item.id}
+                      className="flex text-black text-left items-center h-10"
+                      onPress={() => handleNavigate(item.link)}
+                    >
+                      {item.icon}
+                    </Button>
+                  );
+                })}
+              </div>
 
-              {menuItems.map((item: MenuItem) => (
-                <Button
-                  isIconOnly
-                  key={item.id}
-                  // onClick={handleToggleCollapse}
-                  className="text-black"
-                  onPress={() => handleNavigate(item.link)}
-                >
-                  {item.icon}
-                </Button>
-              ))}
+              <Spacer y={20} />
             </div>
           ) : (
-            <div className="flex flex-col w-full items-start">
+            <div className="flex flex-col h-full w-full items-start">
               <div className="mb-4">
                 <Button
                   isIconOnly
@@ -167,24 +178,29 @@ export default function SideBar() {
                 />
               </UserDropdown>
 
-              <Spacer y={60} />
-              {menuItems.map((item: MenuItem) => {
-                if (item.id === 2 && (user?.role ?? "student") === "student") {
-                  return <></>;
-                }
-
-                return (
-                  <Button
-                    key={item.id}
-                    className="flex text-black text-left items-center justify-start p-2"
-                    fullWidth={true}
-                    startContent={item.icon}
-                    onPress={() => handleNavigate(item.link)}
-                  >
-                    {item.label}
-                  </Button>
-                );
-              })}
+              <div className="flex-1 flex flex-col justify-center items-center">
+                {menuItems.map((item: MenuItem) => {
+                  if (
+                    item.id === 2 &&
+                    (user?.role ?? "student") === "student"
+                  ) {
+                    return <div key={item.id}></div>;
+                  }
+
+                  return (
+                    <Button
+                      key={item.id}
+                      className="flex text-black text-left justify-start h-10 pl-2"
+                      fullWidth={true}
+                      startContent={item.icon}
+                      onPress={() => handleNavigate(item.link)}
+                    >
+                      {item.label}
+                    </Button>
+                  );
+                })}
+              </div>
+              <Spacer y={20} />
             </div>
           )}
         </div>