Merge branch 'feature/NTGL-404-persisting-prev-data' of https://githu…

…b.com/csesoc/notangles into feature/NTGL-404-persisting-prev-data
devsoc-unsw · Oct 26, 2023 · 9daed8f · 9daed8f
2 parents f95c064 + 61566f2
commit 9daed8f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 41 deletions.
diff --git a/client/src/components/navbar/Navbar.tsx b/client/src/components/navbar/Navbar.tsx
@@ -12,7 +12,6 @@ import Privacy from './Privacy';
 import Settings from './Settings';
 import TermSelect from './TermSelect';
 
-
 const LogoImg = styled('img')`
   height: 46px;
   margin-right: 12.5px;
@@ -37,7 +36,6 @@ const NavbarTitle = styled(Typography)`
   z-index: 1201;
 `;
 
-
 const Navbar: React.FC = () => {
   const [currLogo, setCurrLogo] = useState(notanglesLogo);
 
@@ -51,9 +49,7 @@ const Navbar: React.FC = () => {
             onMouseOver={() => setCurrLogo(notanglesLogoGif)}
             onMouseOut={() => setCurrLogo(notanglesLogo)}
           />
-          <NavbarTitle variant="h6">
-            Notangles
-          </NavbarTitle>
+          <NavbarTitle variant="h6">Notangles</NavbarTitle>
           <TermSelect />
           <CustomModal
             title="About"
@@ -71,7 +67,7 @@ const Navbar: React.FC = () => {
           <CustomModal title="Settings" showIcon={<SettingsIcon />} description={'Settings'} content={<Settings />} />
         </Toolbar>
       </StyledNavBar>
-    </NavbarBox >
+    </NavbarBox>
   );
 };
 

diff --git a/client/src/components/navbar/TermSelect.tsx b/client/src/components/navbar/TermSelect.tsx
@@ -4,29 +4,35 @@ import React, { useContext } from 'react';
 import { ThemeType } from '../../constants/theme';
 import { AppContext } from '../../context/AppContext';
 import { CourseContext } from '../../context/CourseContext';
+import { styled } from '@mui/system';
 
+const StyledSelect = styled(Select)(({ theme }) => ({
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'white',
+  },
+  '.MuiSelect-icon': {
+    color: 'white',
+  },
+  '&:focus': {
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'white',
+    },
+  },
+}));
 
 const TermSelect: React.FC = () => {
+  const { term, termName, setTermName, year, setTerm, setYear, setSelectedTimetable, displayTimetables, termsData } =
+    useContext(AppContext);
 
-  const {
-    term,
-    termName,
-    setTermName,
-    year,
-    setTerm,
-    setYear,
-    setSelectedTimetable,
-    displayTimetables,
-    termsData
-  } = useContext(AppContext);
-
-  const { setSelectedCourses, setSelectedClasses, setCreatedEvents } =
-    useContext(CourseContext);
+  const { setSelectedCourses, setSelectedClasses, setCreatedEvents } = useContext(CourseContext);
 
   const theme = useTheme<ThemeType>();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const termData = new Set([termsData.prevTerm.termName.concat(', ', termsData.prevTerm.year), termsData.newTerm.termName.concat(', ', termsData.newTerm.year)]);
+  const termData = new Set([
+    termsData.prevTerm.termName.concat(', ', termsData.prevTerm.year),
+    termsData.newTerm.termName.concat(', ', termsData.newTerm.year),
+  ]);
 
   const selectTerm = (e: any) => {
     const defaultStartTimetable = 0;
@@ -35,9 +41,9 @@ const TermSelect: React.FC = () => {
     let termNum = 'T' + newTermName.split(' ')[1];
     let newYear = e.target.value.split(', ')[1];
 
-    if (e.target.value.includes("Summer")) {
+    if (e.target.value.includes('Summer')) {
       // This is a summer term.
-      termNum = "Summer";
+      termNum = 'Summer';
     }
 
     setTerm(termNum);
@@ -47,29 +53,30 @@ const TermSelect: React.FC = () => {
     setSelectedClasses(displayTimetables[termNum][defaultStartTimetable].selectedClasses);
     setCreatedEvents(displayTimetables[termNum][defaultStartTimetable].createdEvents);
     setSelectedCourses(displayTimetables[termNum][defaultStartTimetable].selectedCourses);
-  }
+  };
 
   return (
-    <FormControl>
-      <InputLabel sx={{ marginTop: 1, color: 'white' }}>Select your term</InputLabel>
-      <Select
-        label="Select your term"
+    <FormControl sx={{ paddingRight: '15px' }}>
+      <InputLabel id="select-term-label" sx={{ color: 'white' }}>
+        Select term
+      </InputLabel>
+      <StyledSelect
+        size="small"
+        labelId="select-term-label"
+        id="select-term"
+        sx={{ color: 'white' }}
+        label="Select term"
         value={isMobile ? term : termName.concat(', ', year)}
-        sx={{
-          marginTop: 1,
-          color: 'white',
-          '.MuiSelect-icon': {
-            color: 'white'
-          },
-        }}
         onChange={selectTerm}
       >
-        {
-          Array.from(termData).map((term, index) => {
-            return <MenuItem key={index} value={term}>{term}</MenuItem>;
-          })
-        }
-      </Select>
+        {Array.from(termData).map((term, index) => {
+          return (
+            <MenuItem key={index} value={term}>
+              {term}
+            </MenuItem>
+          );
+        })}
+      </StyledSelect>
     </FormControl>
   );
 };