style: minor ui fixes (#865)

* style: faculty tag hover style fix * style: decreased light/dark mode button padding * style: decreased light/dark mode button padding
devsoc-unsw · Jul 19, 2024 · 9b7354d · 9b7354d
1 parent 8ba33dd
commit 9b7354d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/client/src/components/controls/CourseSelect.tsx b/client/src/components/controls/CourseSelect.tsx
@@ -148,7 +148,7 @@ const FacultyButtonsContainer = styled('div')`
 `;
 
 const FacultyTags = styled(Button, {
-  shouldForwardProp: (prop) => prop !== 'selectedFaculty' && prop !== 'faculty'
+  shouldForwardProp: (prop) => prop !== 'selectedFaculty' && prop !== 'faculty',
 })<{
   selectedFaculty: string;
   faculty: string;
@@ -158,31 +158,40 @@ const FacultyTags = styled(Button, {
   margin-right: 0px;
   padding: 5px 12px;
   cursor: pointer;
-  background-color: ${({ theme, selectedFaculty, faculty }) => 
-    selectedFaculty === faculty ? theme.palette.primary.main : theme.palette.secondary.light
-  };
+  background-color: ${({ theme, selectedFaculty, faculty }) =>
+    selectedFaculty === faculty ? theme.palette.primary.main : theme.palette.secondary.light};
   color: ${({ theme, selectedFaculty, faculty }) =>
-    selectedFaculty === faculty ? '#FFFFFF' : theme.palette.secondary.dark
-  };
+    selectedFaculty === faculty ? '#FFFFFF' : theme.palette.secondary.dark};
   text-transform: none;
   font-size: 13px;
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+    color: #ffffff;
+  }
 `;
 
 const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelect, handleRemove }) => {
   const [options, setOptionsState] = useState<CoursesList>([]);
   const [inputValue, setInputValue] = useState<string>('');
   const [selectedValue, setSelectedValue] = useState<CoursesList>([]);
   const [selectedFaculty, setSelectedFaculty] = useState<string>('');
-  const faculties = ['Art, Design & Architecture', 'Law & Justice', 'Medicine & Health', 'Engineering', 'Business School', 'Science'];
-
+  const faculties = [
+    'Art, Design & Architecture',
+    'Law & Justice',
+    'Medicine & Health',
+    'Engineering',
+    'Business School',
+    'Science',
+  ];
+
   const facultyNameMap: FacultyMap = {
     'Art, Design & Architecture': 'Faculty of Arts, Design & Arch',
     'Law & Justice': 'Faculty of Law and Justice',
-    'Engineering': 'Faculty of Engineering',
+    Engineering: 'Faculty of Engineering',
     'Medicine & Health': 'Faculty of Medicine and Health',
     'Business School': 'UNSW Business School',
-    'Science': 'Faculty of Science'
-  }
+    Science: 'Faculty of Science',
+  };
 
   const searchTimer = useRef<number | undefined>();
   const listRef = useRef<VariableSizeList | null>(null);
@@ -283,14 +292,14 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
     let searchOptionsList = coursesList;
 
     if (selectedFaculty) {
-      searchOptionsList = searchOptionsList.filter(course => course.faculty === facultyNameMap[selectedFaculty]);
+      searchOptionsList = searchOptionsList.filter((course) => course.faculty === facultyNameMap[selectedFaculty]);
     }
 
     // create a new fuse instance with the searchOptionsList after filtering by faculty
     // so that it allows for searching within the faculty's options
     let fuzzy = new Fuse<CourseOverview>(searchOptionsList, searchOptions);
 
-    const fuzzyResults = fuzzy.search(query).map(result => result.item);
+    const fuzzyResults = fuzzy.search(query).map((result) => result.item);
 
     setOptions(fuzzyResults);
   };
@@ -350,14 +359,14 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
             }}
           >
             {faculties.map((faculty, index) => (
-              <FacultyTags 
+              <FacultyTags
                 key={index}
-                selectedFaculty={selectedFaculty} 
+                selectedFaculty={selectedFaculty}
                 faculty={faculty}
                 onClick={() => handleFacultyClick(faculty)}
                 variant="contained"
                 disableElevation
-              >  
+              >
                 {faculty}
               </FacultyTags>
             ))}

diff --git a/client/src/components/sidebar/DarkModeButton.tsx b/client/src/components/sidebar/DarkModeButton.tsx
@@ -12,12 +12,12 @@ import { AppContext } from '../../context/AppContext';
 const ToggleDarkModeButton = styled(IconButton)`
   display: flex;
   border-radius: 8px;
-  justify-content: flex-between;
+  gap: 16px;
+  justify-content: flex-start;
   padding: 12px 12px 12px 12px;
 `;
 
 const IndividualComponentTypography = styled(Typography)<{ collapsed: boolean }>`
-  padding-left: ${(props) => (props.collapsed ? '0px' : '12px')};
   font-size: 16px;
 `;
 
@@ -35,7 +35,7 @@ const DarkModeButton: React.FC<DarkModeButtonProps> = ({
 
   return (
     <>
-      <Tooltip title={collapsed ? (isDarkMode ? "Dark Mode" : "Light Mode") : ''} placement="right">
+      <Tooltip title={collapsed ? (isDarkMode ? "Light Mode" : "Dark Mode") : ''} placement="right">
         <ToggleDarkModeButton color="inherit" onClick={toggleDarkMode}>
           {isDarkMode ? (<LightModeIcon />) : (<DarkModeIcon />)}
           <IndividualComponentTypography collapsed={collapsed}>

diff --git a/client/src/components/sidebar/Sidebar.tsx b/client/src/components/sidebar/Sidebar.tsx
@@ -206,8 +206,8 @@ const Sidebar: React.FC = () => {
         </NavComponentsContainer>
       </SideBarContainer>
       <SidebarFooter>
-        <DarkModeButton collapsed={collapsed} />
         {/* TODO: dummy logic - to be replaced */}
+        <DarkModeButton collapsed={collapsed} />
         <UserAccount collapsed={collapsed} />
         {!collapsed ? (
           <SidebarFooterText>