Merge branch 'staging' of github.com:devsoc-unsw/notangles into staging

client/src/components/sidebar/DarkModeButton.tsx

@@ -0,0 +1,50 @@
+import { 
+  NightsStay as DarkModeIcon,
+  LightMode as LightModeIcon,
+} from '@mui/icons-material';
+import { IconButton, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import React, { useContext } from 'react';
+
+import { DarkModeButtonProps } from '../../interfaces/PropTypes';
+import { AppContext } from '../../context/AppContext';
+
+const ToggleDarkModeButton = styled(IconButton)`
+  display: flex;
+  border-radius: 8px;
+  justify-content: flex-between;
+  padding: 12px 12px 12px 12px;
+`;
+
+const IndividualComponentTypography = styled(Typography)<{ collapsed: boolean }>`
+  padding-left: ${(props) => (props.collapsed ? '0px' : '12px')};
+  font-size: 16px;
+`;
+
+const DarkModeButton: React.FC<DarkModeButtonProps> = ({
+  collapsed,
+}) => {
+  const {
+    isDarkMode,
+    setIsDarkMode,
+  } = useContext(AppContext);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  return (
+    <>
+      <Tooltip title={collapsed ? (isDarkMode ? "Dark Mode" : "Light Mode") : ''} placement="right">
+        <ToggleDarkModeButton color="inherit" onClick={toggleDarkMode}>
+          {isDarkMode ? (<LightModeIcon />) : (<DarkModeIcon />)}
+          <IndividualComponentTypography collapsed={collapsed}>
+            {collapsed ? '' : (isDarkMode ? "Change to Light Mode" : "Change to Dark Mode")}
+          </IndividualComponentTypography>
+        </ToggleDarkModeButton>
+      </Tooltip>
+    </>
+  );
+};
+
+export default DarkModeButton;

client/src/components/sidebar/Settings.tsx

@@ -16,8 +16,6 @@ const SettingText = styled('div')`
 
 const Settings: React.FC = () => {
   const {
-    isDarkMode,
-    setIsDarkMode,
     isSquareEdges,
     setIsSquareEdges,
     is12HourMode,
@@ -35,7 +33,6 @@ const Settings: React.FC = () => {
   } = useContext(AppContext);
 
   const settingsToggles: { state: boolean; setter: (mode: boolean) => void; desc: string }[] = [
-    { state: isDarkMode, setter: setIsDarkMode, desc: 'Dark mode' },
     { state: isSquareEdges, setter: setIsSquareEdges, desc: 'Square corners on classes' },
     { state: is12HourMode, setter: setIs12HourMode, desc: '12-hour time' },
     { state: isShowOnlyOpenClasses, setter: setisShowOnlyOpenClasses, desc: 'Show only open classes' },

client/src/components/sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ import {
   Group,
   CalendarMonth,
 } from '@mui/icons-material';
-import { AppBar, Typography, AppBarProps, Divider, Button } from '@mui/material';
+import { AppBar, Typography, AppBarProps, Divider } from '@mui/material';
 import { styled } from '@mui/system';
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -21,6 +21,7 @@ import Settings from './Settings';
 import TermSelect from './TermSelect';
 import UserAccount from './UserAccount';
 import { uniqueId } from 'lodash-es';
+import DarkModeButton from './DarkModeButton';
 
 const LogoImg = styled('img')`
   height: 46px;
@@ -84,6 +85,7 @@ const SidebarFooter = styled('div')`
   display: flex;
   flex-direction: column;
   padding: 10px 16px 20px 16px;
+  gap: 8px;
 `;
 const SidebarFooterText = styled('div')`
   display: flex;
@@ -211,6 +213,9 @@ const Sidebar: React.FC = () => {
         </NavComponentsContainer>
       </SideBarContainer>
       <SidebarFooter>
+        <DarkModeButton
+          collapsed={collapsed}
+        />
         {/* TODO: dummy logic - to be replaced */}
         <UserAccount collapsed={collapsed} />
         {!collapsed ? (

client/src/interfaces/PropTypes.ts

@@ -12,6 +12,10 @@ export interface CourseContextProviderProps {
   children: ReactNode;
 }
 
+export interface DarkModeButtonProps {
+  collapsed: boolean;
+}
+
 export interface CustomModalProps {
   title: string;
   toolTipTitle: string;

client/team.json

@@ -7,6 +7,7 @@
     "Jordan Benjamin",
     "Nikki Qin",
     "Lucy Chhuo",
-    "Sohum Shah"
+    "Sohum Shah",
+    "Dylan Zhang"
   ]
 }