From 178ee0879bca2fefc0016207e84906f453a9966e Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sun, 4 Feb 2024 22:46:04 -0800 Subject: [PATCH] fix: isDark fixes (#878) --- .../src/components/Header/SettingsMenu.tsx | 16 +++++++--------- .../SectionTable/EnrollmentHistoryPopup.tsx | 4 ++-- .../RightPane/SectionTable/GradesPopup.tsx | 12 ++++++------ .../RightPane/SectionTable/PrereqTree.tsx | 4 ++-- 4 files changed, 17 insertions(+), 19 deletions(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index 2090bbac9..193a224af 100644 --- 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) => { 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 index 3394532ad..deab64e6c 100644 --- 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 index e2467e015..f7e071ffd 100644 --- 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 index 90e3ee0d4..05b892708 100644 --- 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 = (props) => { - const appTheme = useThemeStore((store) => store.appTheme); + const isDark = useThemeStore((store) => store.isDark); return (