Merge pull request #52 from hotungkhanh/kan-92/general-fine-tuning

style(enrolment page): reformatted the enrolment page to look like th…
hotungkhanh · Oct 16, 2024 · 29bcd85 · 29bcd85
2 parents 4c6bf3f + 5c653c8
commit 29bcd85
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 44 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,8 @@
 {
   "conventionalCommits.scopes": [
     "database",
-    "display ganttchart"
+    "display ganttchart",
+    "enrolment page"
   ],
   "java.configuration.updateBuildConfiguration": "interactive"
 }
diff --git a/frontend/src/assets/frontpage2.jpg b/frontend/src/assets/frontpage2.jpg
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -14,7 +14,7 @@ export default function Footer({ children } : { children?: React.ReactNode }) {
     bottom: 0,
     left: 0,
     width: 100+"%",
-    height: 60+"px",
+    height: "10vh",
     zIndex: 10000,
   };
 

diff --git a/frontend/src/components/GanttChart.tsx b/frontend/src/components/GanttChart.tsx
@@ -264,7 +264,12 @@ export default function GanttChart() {
 
   return (
     <div>
-      <div ref={timelineRef} />
+      <div style={{
+            padding: 10,
+            overflowY: "scroll",
+            height: "60vh"}}>
+        <div ref={timelineRef} />
+      </div>
       <Button
         onClick={downloadCSV}
         variant="outlined"

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -11,14 +11,15 @@ export default function Header() {
         color: "white",
         padding: "20px",
         textAlign: "left",
+        height: "12vh"
     };
     return (
       <Box className="header" sx={headerStyle}>
         <img
           src={VIT_Logo}
           alt="logo.exe"
-          width="150"
-          height="auto"
+          height="90%"
+          width="auto"
         />
       </Box>
     );

diff --git a/frontend/src/components/ModSiderbar.tsx b/frontend/src/components/ModSiderbar.tsx
@@ -2,14 +2,14 @@ import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
 import { Routes, Route, Link } from "react-router-dom";
+import LocationCityIcon from "@mui/icons-material/LocationCity";
 
 import GanttChart from "./GanttChart";
 import { TimetableSolution } from "../scripts/api";
 import { useState } from "react";
+import { ListItemIcon } from "@mui/material";
 
 interface SidebarProps {
   marginTop: number;
@@ -64,9 +64,11 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) {
                     }}
                   >
                     <ListItemIcon>
-                      <InboxIcon />
+                      <LocationCityIcon/>
                     </ListItemIcon>
-                    <ListItemText primary={campusName} />
+                    <ListItemText
+                      primary={campusName}
+                    />
                   </ListItemButton>
                 </ListItem>
               );

diff --git a/frontend/src/components/ProceedButton.tsx b/frontend/src/components/ProceedButton.tsx
@@ -19,6 +19,19 @@ export default function ProceedButton({ fileChosen }: ProceedButtonProps) {
   if (fileChosen === null) {
     return <Button disabled> Proceed </Button>
   } else {
-    return <Button onClick={() => navigate("/seminfo/room")}> Proceed</Button>;
+    return (
+      <Button
+        onClick={() => navigate("/seminfo/room")}
+        sx={{
+          color: "#f05a22",
+          "&:hover": {
+            backgroundColor: "#fef6f4",
+          },
+        }}
+      >
+        {" "}
+        Proceed
+      </Button>
+    );
   }
 }
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -4,8 +4,8 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-// import MailIcon from "@mui/icons-material/Mail";
+import SchoolIcon from "@mui/icons-material/School";
+import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
 
 import { Link } from "react-router-dom";
 
@@ -41,11 +41,10 @@ export default function Sidebar({ marginTop, width }: SidebarProps) {
       anchor="left"
     >
       <List>
-
         <ListItem key="Room" disablePadding>
           <ListItemButton component={Link} to="room">
             <ListItemIcon>
-              <InboxIcon />
+              <MeetingRoomIcon />
             </ListItemIcon>
             <ListItemText primary="Room" />
           </ListItemButton>
@@ -54,12 +53,11 @@ export default function Sidebar({ marginTop, width }: SidebarProps) {
         <ListItem key="Unit" disablePadding>
           <ListItemButton component={Link} to="unit">
             <ListItemIcon>
-              <InboxIcon />
+              <SchoolIcon />
             </ListItemIcon>
             <ListItemText primary="Unit" />
           </ListItemButton>
         </ListItem>
-
       </List>
     </Drawer>
   );

diff --git a/frontend/src/components/SkipButton.tsx b/frontend/src/components/SkipButton.tsx
@@ -1,5 +1,6 @@
 import Button from "@mui/material/Button";
 import { useNavigate } from "react-router-dom";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 export default function SkipButton() {
   const navigate = useNavigate();
@@ -19,13 +20,15 @@ export default function SkipButton() {
     return (
       <Button
         onClick={() => navigate("/timetablemod")}
-        variant="contained"
+        variant="outlined"
+        endIcon={<ArrowForwardIcon />}
         sx={{
-          backgroundColor: "#f05a22",
+          color: "white",
+          borderColor: "white",
           "&:hover": {
-            backgroundColor: "#f05a22", 
+            borderColor: "white",
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
           },
-          marginTop: "20px"
         }}
       >
         Modify Timetable

diff --git a/frontend/src/components/UploadPopUp.tsx b/frontend/src/components/UploadPopUp.tsx
@@ -7,6 +7,7 @@ import { Button } from "@mui/material";
 import ProceedButton from "./ProceedButton.tsx";
 import DisplayFile from "./DisplayFile.tsx";
 
+
 /**
  * UploadPopUp component for displaying a modal with file upload functionality.
  * Manages the state of the modal being open or closed and the file chosen
@@ -33,9 +34,13 @@ export default function UploadPopUp() {
           "&:hover": {
             backgroundColor: "#f05a22", // Custom hover color
           },
+          padding: "3% 5% 3% 5%",
+          borderRadius: "999px",
+          fontSize: "medium",
+          marginTop: "2%"
         }}
       >
-        Get Started
+        Generate Timetable
       </Button>
       <Modal
         aria-labelledby="unstyled-modal-title"

diff --git a/frontend/src/pages/Enrolment.tsx b/frontend/src/pages/Enrolment.tsx
@@ -3,7 +3,7 @@ import "../styles/enrolment.css";
 import UploadPopUp from "../components/UploadPopUp.tsx";
 import Header from "../components/Header.tsx";
 import Footer from "../components/Footer.tsx";
-import Photo from "../assets/frontpage.jpg";
+import Photo from "../assets/frontpage2.jpg";
 import { useEffect } from "react";
 import { REMOTE_API_URL, TimetableSolution } from "../scripts/api.ts";
 import { useAuthContext } from "../security/AuthContext.tsx";
@@ -48,32 +48,49 @@ export default function StarterPage() {
     <Box className="app-container">
       <Header />
       <Box className="content">
-        <Box className="description" sx={{ minWidth: 550 + "px" }}>
+        <Box
+          className="description"
+          sx={{ minWidth: 550 + "px", textAlign: "center" }}
+        >
           <span style={timeStyle}>Time</span>
           <span style={tablerStyle}>tabler</span>
-          <span
-            style={{ margin: -3, fontSize: 15, marginLeft: 5, opacity: 0.4 }}
-          >
-            The smartest Timetabler ever
-          </span>
-          <p style={{ color: "#f05a22", fontSize: 20 }}>
-            A timetabling website for the Victorian Institute of Technology
+          <p>
+            The VIT Timetabling Portal is a platform for VIT Support Service
+            Team staff to manage unit and class schedules across all campuses.
+            Designed for ease of use, the portal allows staff to view and adjust
+            schedules, assign classrooms, all in one centralized system. It
+            automatically generates timetables, handling large datasets of up to
+            ten thousand students. The drag-and-drop feature allows easy manual
+            adjustments, updating both location and time simultaneously with a
+            Gantt Chart.
           </p>
-          <p> -Team JetEdge</p>
+          <p>A Product by JetEdge</p>
           <UploadPopUp></UploadPopUp>
-          <SkipButton />
         </Box>
         <Box className="imageBox">
           <img
             src={Photo}
-            alt="logo.exe"
-            width="auto"
-            height="100%"
-            object-fit = "cover"
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block",
+            }}
           />
         </Box>
       </Box>
-      <Footer />
+      <Footer>
+        <div style={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+          gap: '50%',
+          marginRight: "5%",
+        }}>
+          <SkipButton/>
+        </div>
+      </Footer>
     </Box>
   );
 }
diff --git a/frontend/src/pages/SemesterInfo.tsx b/frontend/src/pages/SemesterInfo.tsx
@@ -16,7 +16,7 @@ export default function SemesterInfo() {
   return (
     <div>
       <Header />      
-      <Sidebar width={240} marginTop={12.5}/>
+      <Sidebar width={240} marginTop={16}/>
 
       {/* Spreadsheet */}
       <div style={{ marginLeft: 300 + "px", overflow: "hidden" }}>

diff --git a/frontend/src/pages/TimetableMod.tsx b/frontend/src/pages/TimetableMod.tsx
@@ -41,14 +41,11 @@ export default function TimetableMod() {
   return (
     <div>
         <Header />
-        <ModSidebar width={240} marginTop={12.5} />
+        <ModSidebar width={240} marginTop={16} />
 
         <div
           style={{
             marginLeft: 250 + "px",
-            padding: 10,
-            overflowY: "scroll",
-            height: 550 + "px",
           }}
         >
           <Outlet />

diff --git a/frontend/src/styles/enrolment.css b/frontend/src/styles/enrolment.css
@@ -12,7 +12,7 @@
 }
 
 .description {
-  margin: 20%;
+  margin: 13%;
 }
 
 .description span {
@@ -22,11 +22,16 @@
 
 .description p {
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size:larger;
+  opacity: 0.7;
+  text-align: center;
 }
 
 .imageBox {
+  flex: 1;
+  max-height: 80vh;
   overflow: hidden;
-  position: relative;
+  /* position: relative; */
 }
 body {
     margin: 0;