fix: isDark fixes (#878)

icssc · Feb 5, 2024 · 178ee08 · 178ee08
1 parent 2454ddf
commit 178ee08
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 19 deletions.
diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
@@ -18,14 +18,13 @@ const darkSelectedStyle: CSSProperties = {
     color: '#99CCF3',
 };
 
-function getSelectedStyle(buttonValue: string, themeSetting: string, appTheme: string, isDark: boolean) {
+function getSelectedStyle(buttonValue: string, themeSetting: string, isDark: boolean) {
     return themeSetting === buttonValue ? (isDark ? darkSelectedStyle : lightSelectedStyle) : {};
 }
 
 function ThemeMenu() {
-    const [themeSetting, appTheme, isDark, setTheme] = useThemeStore((store) => [
+    const [themeSetting, isDark, setTheme] = useThemeStore((store) => [
         store.themeSetting,
-        store.appTheme,
         store.isDark,
         store.setAppTheme,
     ]);
@@ -47,7 +46,7 @@ function ThemeMenu() {
                         padding: '1rem 2rem',
                         borderRadius: '12px 0px 0px 12px',
                         width: '100%',
-                        ...getSelectedStyle('light', themeSetting, appTheme, isDark),
+                        ...getSelectedStyle('light', themeSetting, isDark),
                     }}
                     value="light"
                     onClick={handleThemeChange}
@@ -59,7 +58,7 @@ function ThemeMenu() {
                     style={{
                         padding: '1rem 2rem',
                         width: '100%',
-                        ...getSelectedStyle('system', themeSetting, appTheme, isDark),
+                        ...getSelectedStyle('system', themeSetting, isDark),
                     }}
                     value="system"
                     onClick={handleThemeChange}
@@ -72,7 +71,7 @@ function ThemeMenu() {
                         padding: '1rem 2rem',
                         borderRadius: '0px 12px 12px 0px',
                         width: '100%',
-                        ...getSelectedStyle('dark', themeSetting, appTheme, isDark),
+                        ...getSelectedStyle('dark', themeSetting, isDark),
                     }}
                     value="dark"
                     onClick={handleThemeChange}
@@ -87,7 +86,6 @@ function ThemeMenu() {
 function TimeMenu() {
     const [isMilitaryTime, setTimeFormat] = useTimeFormatStore((store) => [store.isMilitaryTime, store.setTimeFormat]);
     const isDark = useThemeStore((store) => store.isDark);
-    const theme = useThemeStore((store) => store.appTheme);
 
     const handleTimeFormatChange = (event: React.MouseEvent<HTMLButtonElement>) => {
         setTimeFormat(event.currentTarget.value == 'true');
@@ -112,7 +110,7 @@ function TimeMenu() {
                         borderRadius: '12px 0px 0px 12px',
                         width: '100%',
                         fontSize: '12px',
-                        ...getSelectedStyle('false', isMilitaryTime.toString(), theme, isDark),
+                        ...getSelectedStyle('false', isMilitaryTime.toString(), isDark),
                     }}
                     value="false"
                     onClick={handleTimeFormatChange}
@@ -126,7 +124,7 @@ function TimeMenu() {
                         borderRadius: '0px 12px 12px 0px',
                         width: '100%',
                         fontSize: '12px',
-                        ...getSelectedStyle('true', isMilitaryTime.toString(), theme, isDark),
+                        ...getSelectedStyle('true', isMilitaryTime.toString(), isDark),
                     }}
                     value="true"
                     onClick={handleTimeFormatChange}

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentHistoryPopup.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentHistoryPopup.tsx
@@ -28,9 +28,9 @@ export function EnrollmentHistoryPopup({ department, courseNumber }: EnrollmentH
             enrollmentHistory.quarter
         } | ${enrollmentHistory.instructors.join(', ')}`;
     }, [courseNumber, department, enrollmentHistory]);
-    const isDarkMode = useThemeStore((state) => state.isDark);
+    const isDark = useThemeStore((state) => state.isDark);
     const encodedDept = useMemo(() => encodeURIComponent(department), [department]);
-    const axisColor = isDarkMode ? '#fff' : '#111';
+    const axisColor = isDark ? '#fff' : '#111';
     const tooltipDateColor = '#111';
 
     useEffect(() => {

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
@@ -51,7 +51,7 @@ export interface GradesPopupProps {
 }
 
 function GradesPopup(props: GradesPopupProps) {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => [store.isDark]);
 
     const { deptCode, courseNumber, instructor = '', isMobileScreen } = props;
 
@@ -69,12 +69,12 @@ function GradesPopup(props: GradesPopupProps) {
                   instructor ? ` — ${instructor}` : ''
               } | Average GPA: ${gradeData.courseGrades.averageGPA.toFixed(2)}`
             : 'Grades are not available for this class.';
-    }, [deptCode, instructor, gradeData]);
+    }, [gradeData, deptCode, courseNumber, instructor]);
 
-    const gpaString = useMemo(
-        () => (gradeData ? `Average GPA: ${gradeData.courseGrades.averageGPA.toFixed(2)}` : ''),
-        [gradeData]
-    );
+    // const gpaString = useMemo(
+    //     () => (gradeData ? `Average GPA: ${gradeData.courseGrades.averageGPA.toFixed(2)}` : ''),
+    //     [gradeData]
+    // );
 
     useEffect(() => {
         if (loading === false) {

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable prefer-const */
 import { Prerequisite, PrerequisiteTree } from 'peterportal-api-next-types';
 import { FC, useState } from 'react';
-import { Button, Modal, Popover } from '@material-ui/core';
+import { Button, Popover } from '@material-ui/core';
 
 import { CourseInfo } from './CourseInfoBar';
 import { useThemeStore } from '$stores/SettingsStore';
@@ -23,7 +23,7 @@ interface NodeProps {
 }
 
 const Node: FC<NodeProps> = (props) => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <div style={{ padding: '1px 0' }} className={`${props.node}`} key={props.index}>
             <div