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

fix: styling of sidebar + header + footer
hotungkhanh · Oct 17, 2024 · 2ee423d · 2ee423d
2 parents bd40bd8 + 646f83c
commit 2ee423d
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 29 deletions.
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,26 +1,36 @@
-import { Box } from "@mui/material";
+import { AppBar, Box, CssBaseline } from "@mui/material";
 import VIT_Logo from '../assets/logo.png';
 
 /**
  * React component for rendering the header section.
  * @returns JSX element representing the header with a logo.
  */
 export default function Header() {
-    const headerStyle = {
-        backgroundColor: "#F5F5f5",
-        color: "white",
-        padding: "20px",
-        textAlign: "left",
-        height: "12vh"
-    };
     return (
-      <Box className="header" sx={headerStyle}>
-        <img
-          src={VIT_Logo}
-          alt="logo.exe"
-          height="90%"
-          width="auto"
-        />
+      <Box sx={{ height: "130px", margin: "0" }}>
+        <CssBaseline />
+        <AppBar
+          position="fixed"
+          sx={{
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+            height: "130px",
+            padding: "20px",
+            backgroundColor: "#F5F5f5",
+            boxShadow: "none"
+          }}
+        >
+          <img
+            src={VIT_Logo}
+            alt="logo.exe"
+            style={{width: "230px",
+                  height: "auto",
+    // objectFit: "contain",
+    // maxHeight: "100%",
+    // maxWidth: "100%",
+    // alignSelf: "flex-start", // Aligns left in a flex container
+    }}
+          />
+        </AppBar>
       </Box>
     );
 }
diff --git a/frontend/src/components/ModSiderbar.tsx b/frontend/src/components/ModSiderbar.tsx
@@ -9,7 +9,7 @@ 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";
+import { Box, ListItemIcon } from "@mui/material";
 
 interface SidebarProps {
   marginTop: number;
@@ -40,12 +40,12 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) {
           "& .MuiDrawer-paper": {
             width: drawerWidth,
             boxSizing: "border-box",
-            marginTop: marginTop,
           },
         }}
         variant="permanent"
         anchor="left"
       >
+        <Box sx={{ height: marginTop + "px"}} />
         <List>
           {campusSolutions && campusSolutions.length > 0 ? (
             campusSolutions.map((solution) => {
@@ -64,11 +64,9 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) {
                     }}
                   >
                     <ListItemIcon>
-                      <LocationCityIcon/>
+                      <LocationCityIcon />
                     </ListItemIcon>
-                    <ListItemText
-                      primary={campusName}
-                    />
+                    <ListItemText primary={campusName} />
                   </ListItemButton>
                 </ListItem>
               );
@@ -89,7 +87,7 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) {
                 <Route
                   key={campusName}
                   path={`timetablemod/${campusName.toLowerCase()}`}
-                  element={<GanttChart/>}
+                  element={<GanttChart />}
                 />
               );
             })}

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -8,6 +8,7 @@ import SchoolIcon from "@mui/icons-material/School";
 import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
 
 import { Link } from "react-router-dom";
+import { Box } from "@mui/material";
 
 
 interface SidebarProps {
@@ -34,12 +35,12 @@ export default function Sidebar({ marginTop, width }: SidebarProps) {
         "& .MuiDrawer-paper": {
           width: drawerWidth,
           boxSizing: "border-box",
-          marginTop: marginTop,
         },
       }}
       variant="permanent"
       anchor="left"
     >
+      <Box sx={{height: marginTop + "px"}} />
       <List>
         <ListItem key="Room" disablePadding>
           <ListItemButton component={Link} to="room">

diff --git a/frontend/src/components/UploadPopUp.tsx b/frontend/src/components/UploadPopUp.tsx
@@ -49,7 +49,7 @@ export default function UploadPopUp() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <ModalContent sx={{ width: 500, height: 120 }}>
+        <ModalContent sx={{ width: 500, height: 180 }}>
           <DisplayFile fileChosen={fileChosen}/>
           <UploadButton setFileChosen={setFileChosen}></UploadButton>
           <ProceedButton fileChosen={fileChosen}></ProceedButton>

diff --git a/frontend/src/pages/SemesterInfo.tsx b/frontend/src/pages/SemesterInfo.tsx
@@ -15,8 +15,8 @@ import BackButton from "../components/BackButton.tsx";
 export default function SemesterInfo() {
   return (
     <div>
-      <Header />      
-      <Sidebar width={240} marginTop={16}/>
+      <Header />
+      <Sidebar width={240} marginTop={130}/>
 
       {/* Spreadsheet */}
       <div style={{ marginLeft: 300 + "px", overflow: "hidden" }}>
@@ -31,5 +31,5 @@ export default function SemesterInfo() {
       </Footer>
 
     </div>
-  )
+  );
 }
diff --git a/frontend/src/pages/TimetableMod.tsx b/frontend/src/pages/TimetableMod.tsx
@@ -41,7 +41,7 @@ export default function TimetableMod() {
   return (
     <div>
         <Header />
-        <ModSidebar width={240} marginTop={16} />
+        <ModSidebar width={240} marginTop={130} />
 
         <div
           style={{

diff --git a/frontend/src/styles/enrolment.css b/frontend/src/styles/enrolment.css
@@ -12,7 +12,7 @@
 }
 
 .description {
-  margin: 13%;
+  margin: 5% 10% 10% 10%;
 }
 
 .description span {