From b4ce4481c939fbe10c53691b984872062dc3cd6e Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Thu, 30 Nov 2023 03:35:16 -0800 Subject: [PATCH 1/9] Commit bad hover code --- .../SectionTable/SectionTableBody.tsx | 28 +++++++++++-------- apps/antalmanac/src/stores/HoveredStore.ts | 19 +++++++++++++ 2 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 apps/antalmanac/src/stores/HoveredStore.ts diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index c2f23e89b..ac982dc05 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -34,6 +34,7 @@ import locationIds from '$lib/location_ids'; import { normalizeTime, parseDaysString, formatTimes } from '$stores/calendarizeHelpers'; import useColumnStore, { type SectionTableColumn } from '$stores/ColumnStore'; import { useTimeFormatStore } from '$stores/SettingsStore'; +import { useHoveredStore } from '$stores/HoveredStore'; const styles: Styles = (theme) => ({ sectionCode: { @@ -148,12 +149,12 @@ type SectionType = 'Act' | 'Col' | 'Dis' | 'Fld' | 'Lab' | 'Lec' | 'Qiz' | 'Res' interface SectionDetailCellProps { classes: ClassNameMap; sectionType: SectionType; - sectionNum: string; + sectionNumber: string; units: number; } const SectionDetailsCell = withStyles(styles)((props: SectionDetailCellProps) => { - const { classes, sectionType, sectionNum, units } = props; + const { classes, sectionType, sectionNumber, units } = props; const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); return ( @@ -161,7 +162,7 @@ const SectionDetailsCell = withStyles(styles)((props: SectionDetailCellProps) => {sectionType} {!isMobileScreen && <>Sec: } - {sectionNum} + {sectionNumber} {!isMobileScreen && <>Units: } @@ -482,9 +483,6 @@ const tableBodyCells: Record> = { status: StatusCell, }; -/** - * TODO: SectionNum name parity -> SectionNumber - */ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { const { classes, section, courseDetails, term, allowHighlight, scheduleNames } = props; @@ -505,20 +503,27 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { daysOccurring: parseDaysString(section.meetings[0].days), ...normalizeTime(section.meetings[0]), }; - }, [section.meetings[0]]); + }, [section.meetings]); // Stable references to event listeners will synchronize React state with the store. const updateHighlight = useCallback(() => { setAddedCourse(AppStore.getAddedSectionCodes().has(`${section.sectionCode} ${term}`)); - }, []); + }, [section.sectionCode, term]); const updateCalendarEvents = useCallback(() => { setCalendarEvents(AppStore.getCourseEventsInCalendar()); }, [setCalendarEvents]); - // Attach event listeners to the store. + // const [hovered, setHovered] = useState>(); + const [hoveredCourse, setHoveredCourse] = useHoveredStore((store) => [store.hoveredCourse, store.setHoveredCourse]); + + const handleHover = useCallback((sectionCode?: string) => { + setHoveredCourse(sectionCode); + }, []); + + // Attach event listeners to the store. useEffect(() => { AppStore.on('addedCoursesChange', updateHighlight); AppStore.on('currentScheduleIndexChange', updateHighlight); @@ -592,6 +597,9 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { // allowHighlight is ALWAYS false when in Added Course Pane and ALWAYS true when in CourseRenderPane addedCourse ? { addedCourse: addedCourse && allowHighlight } : { scheduleConflict: scheduleConflict } )} + onMouseEnter={handleHover} + onMouseLeave={() => handleHover(undefined)} + style={{ backgroundColor: hoveredCourse == section.sectionCode ? 'red' : 'blue' }} > {!addedCourse ? ( { ) : ( )} - {Object.entries(tableBodyCells) .filter(([column]) => activeColumns.includes(column as SectionTableColumn)) .map(([column, Component]) => { return ( - // All of this is a little bulky, so if the props can be added specifically to activeTableBodyColumns, LMK! void; +} + +export const useHoveredStore = create((set) => { + const hoveredSectionCode = undefined; + + return { + hoveredCourse: hoveredSectionCode, + setHoveredCourse: (hoveredCourse) => { + set({ hoveredCourse }); + }, + }; +}); From 1211107a1dd5751c43f6a68151fcc7e321f37dda Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 6 Dec 2023 17:36:09 -0800 Subject: [PATCH 2/9] feat: create base hovering functionality --- .../src/components/Calendar/CalendarRoot.tsx | 12 ++++++-- .../SectionTable/SectionTableBody.tsx | 14 ++++----- apps/antalmanac/src/stores/HoveredStore.ts | 30 ++++++++++++++----- 3 files changed, 38 insertions(+), 18 deletions(-) diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx index 47ce75da7..a4b590ea9 100644 --- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx +++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx @@ -11,6 +11,7 @@ import CourseCalendarEvent, { CalendarEvent } from './CourseCalendarEvent'; import AppStore from '$stores/AppStore'; import locationIds from '$lib/location_ids'; import { useTimeFormatStore } from '$stores/SettingsStore'; +import { useHoveredStore } from '$stores/HoveredStore'; const localizer = momentLocalizer(moment); @@ -52,8 +53,8 @@ const AntAlmanacEvent = ({ event }: { event: CalendarEvent }) => { {event.showLocationInfo ? event.locations.map((location) => `${location.building} ${location.room}`).join(', ') : event.locations.length > 1 - ? `${event.locations.length} Locations` - : `${event.locations[0].building} ${event.locations[0].room}`} + ? `${event.locations.length} Locations` + : `${event.locations[0].building} ${event.locations[0].room}`} {event.sectionCode} @@ -78,9 +79,14 @@ export default function ScheduleCalendar(props: ScheduleCalendarProps) { const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames()); const { isMilitaryTime } = useTimeFormatStore(); + const { hoveredCourse } = useHoveredStore(); const getEventsForCalendar = () => { - return showFinalsSchedule ? finalsEventsInCalendar : eventsInCalendar; + return showFinalsSchedule + ? finalsEventsInCalendar + : hoveredCourse + ? [...eventsInCalendar, hoveredCourse] + : eventsInCalendar; }; const handleClosePopover = () => { diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index ac982dc05..a299b7875 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -515,13 +515,13 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { setCalendarEvents(AppStore.getCourseEventsInCalendar()); }, [setCalendarEvents]); - // const [hovered, setHovered] = useState>(); - const [hoveredCourse, setHoveredCourse] = useHoveredStore((store) => [store.hoveredCourse, store.setHoveredCourse]); - const handleHover = useCallback((sectionCode?: string) => { - setHoveredCourse(sectionCode); - }, []); + const handleHover = useCallback(() => { + hoveredCourse?.sectionCode == section.sectionCode + ? setHoveredCourse(undefined) + : setHoveredCourse(section, courseDetails, term); + }, [courseDetails, hoveredCourse, section, setHoveredCourse, term]); // Attach event listeners to the store. useEffect(() => { @@ -598,8 +598,8 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { addedCourse ? { addedCourse: addedCourse && allowHighlight } : { scheduleConflict: scheduleConflict } )} onMouseEnter={handleHover} - onMouseLeave={() => handleHover(undefined)} - style={{ backgroundColor: hoveredCourse == section.sectionCode ? 'red' : 'blue' }} + onMouseLeave={handleHover} + style={{ backgroundColor: hoveredCourse?.sectionCode == section.sectionCode ? 'red' : 'blue' }} > {!addedCourse ? ( void; + hoveredCourse: CourseEvent | undefined; + setHoveredCourse: (section?: AASection, courseDetails?: CourseDetails, term?: string) => void; } export const useHoveredStore = create((set) => { - const hoveredSectionCode = undefined; - return { - hoveredCourse: hoveredSectionCode, - setHoveredCourse: (hoveredCourse) => { - set({ hoveredCourse }); + hoveredCourse: undefined, + setHoveredCourse: (section, courseDetails, term) => { + set({ + hoveredCourse: + section && courseDetails && term + ? calendarizeCourseEvents([ + { + ...courseDetails, + section: { + ...section, + color: '#0000FF', + }, + term, + }, + ])[0] + : undefined, + }); }, }; }); From 95b6b96ce35e22cb444d61a864b6abbede35cbc6 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 6 Dec 2023 18:10:32 -0800 Subject: [PATCH 3/9] feat: handle added sections, disable in added pane, restyle --- .../src/components/Calendar/CalendarRoot.tsx | 6 +++--- .../RightPane/SectionTable/SectionTableBody.tsx | 15 +++++++++------ apps/antalmanac/src/stores/HoveredStore.ts | 14 +++++++------- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx index a4b590ea9..7eb2527a1 100644 --- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx +++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx @@ -79,13 +79,13 @@ export default function ScheduleCalendar(props: ScheduleCalendarProps) { const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames()); const { isMilitaryTime } = useTimeFormatStore(); - const { hoveredCourse } = useHoveredStore(); + const { hoveredCourseEvents } = useHoveredStore(); const getEventsForCalendar = () => { return showFinalsSchedule ? finalsEventsInCalendar - : hoveredCourse - ? [...eventsInCalendar, hoveredCourse] + : hoveredCourseEvents + ? [...eventsInCalendar, ...hoveredCourseEvents] : eventsInCalendar; }; diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index a299b7875..b7e2b7cbd 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -515,13 +515,17 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { setCalendarEvents(AppStore.getCourseEventsInCalendar()); }, [setCalendarEvents]); - const [hoveredCourse, setHoveredCourse] = useHoveredStore((store) => [store.hoveredCourse, store.setHoveredCourse]); + const [hoveredCourseEvents, setHoveredCourseEvents] = useHoveredStore((store) => [ + store.hoveredCourseEvents, + store.setHoveredCourseEvents, + ]); const handleHover = useCallback(() => { - hoveredCourse?.sectionCode == section.sectionCode - ? setHoveredCourse(undefined) - : setHoveredCourse(section, courseDetails, term); - }, [courseDetails, hoveredCourse, section, setHoveredCourse, term]); + const alreadyHovered = hoveredCourseEvents && hoveredCourseEvents[0].sectionCode == section.sectionCode; + alreadyHovered || addedCourse + ? setHoveredCourseEvents(undefined) + : setHoveredCourseEvents(section, courseDetails, term); + }, [addedCourse, courseDetails, hoveredCourseEvents, section, setHoveredCourseEvents, term]); // Attach event listeners to the store. useEffect(() => { @@ -599,7 +603,6 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { )} onMouseEnter={handleHover} onMouseLeave={handleHover} - style={{ backgroundColor: hoveredCourse?.sectionCode == section.sectionCode ? 'red' : 'blue' }} > {!addedCourse ? ( void; + hoveredCourseEvents: CourseEvent[] | undefined; + setHoveredCourseEvents: (section?: AASection, courseDetails?: CourseDetails, term?: string) => void; } export const useHoveredStore = create((set) => { return { - hoveredCourse: undefined, - setHoveredCourse: (section, courseDetails, term) => { + hoveredCourseEvents: undefined, + setHoveredCourseEvents: (section, courseDetails, term) => { set({ - hoveredCourse: + hoveredCourseEvents: section && courseDetails && term ? calendarizeCourseEvents([ { ...courseDetails, section: { ...section, - color: '#0000FF', + color: '#808080', }, term, }, - ])[0] + ]) : undefined, }); }, From c9eff713c60b07d1cb01dcd1d2139439a6d5816e Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 6 Dec 2023 18:12:44 -0800 Subject: [PATCH 4/9] fix: refactor function --- .../components/RightPane/SectionTable/SectionTableBody.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index b7e2b7cbd..077ae8ace 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -521,7 +521,10 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { ]); const handleHover = useCallback(() => { - const alreadyHovered = hoveredCourseEvents && hoveredCourseEvents[0].sectionCode == section.sectionCode; + const alreadyHovered = + hoveredCourseEvents && + hoveredCourseEvents.some((courseEvent) => courseEvent.sectionCode == section.sectionCode); + alreadyHovered || addedCourse ? setHoveredCourseEvents(undefined) : setHoveredCourseEvents(section, courseDetails, term); From 865ee4c7fba08a4caf4b1dc019add1762978eddf Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 8 Dec 2023 00:12:49 -0800 Subject: [PATCH 5/9] style: make hover event slightly transparent --- apps/antalmanac/src/components/Calendar/CalendarRoot.tsx | 4 +++- apps/antalmanac/src/stores/HoveredStore.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx index 7eb2527a1..2818238c7 100644 --- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx +++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx @@ -135,7 +135,9 @@ export default function ScheduleCalendar(props: ScheduleCalendarProps) { // This equation is taken from w3c, does not use the colour difference part const minBrightnessDiff = 125; - const backgroundRegexResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(bg) as RegExpExecArray; // returns {hex, r, g, b} + const backgroundRegexResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( + bg.slice(0, 7) + ) as RegExpExecArray; // returns {hex, r, g, b} const backgroundRGB = { r: parseInt(backgroundRegexResult[1], 16), g: parseInt(backgroundRegexResult[2], 16), diff --git a/apps/antalmanac/src/stores/HoveredStore.ts b/apps/antalmanac/src/stores/HoveredStore.ts index 6bd4e40e6..5245399ef 100644 --- a/apps/antalmanac/src/stores/HoveredStore.ts +++ b/apps/antalmanac/src/stores/HoveredStore.ts @@ -21,7 +21,7 @@ export const useHoveredStore = create((set) => { ...courseDetails, section: { ...section, - color: '#808080', + color: '#80808080', }, term, }, From 5a595d8e1b0cf8adb35906068e80897d7cd2311a Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 8 Dec 2023 00:27:15 -0800 Subject: [PATCH 6/9] feat: create experimental section, toggle preview --- .../src/components/Header/SettingsMenu.tsx | 32 +++++++++++++++++-- .../SectionTable/SectionTableBody.tsx | 9 ++++-- apps/antalmanac/src/stores/SettingsStore.ts | 27 +++++++++++++--- 3 files changed, 58 insertions(+), 10 deletions(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index f4b72b6f9..df41431eb 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -1,9 +1,10 @@ import { useCallback, useState } from 'react'; -import { Box, Button, ButtonGroup, Divider, Drawer, IconButton, Typography, useMediaQuery } from '@material-ui/core'; +import { Box, Button, ButtonGroup, Drawer, IconButton, Switch, Typography, useMediaQuery } from '@material-ui/core'; +import { Divider, Stack } from '@mui/material'; import { CSSProperties } from '@material-ui/core/styles/withStyles'; import { Close, DarkMode, LightMode, Settings, SettingsBrightness } from '@mui/icons-material'; -import { useThemeStore, useTimeFormatStore } from '$stores/SettingsStore'; +import { usePreviewStore, useThemeStore, useTimeFormatStore } from '$stores/SettingsStore'; const lightSelectedStyle: CSSProperties = { backgroundColor: '#F0F7FF', @@ -135,6 +136,25 @@ function TimeMenu() { ); } +function ExperimentalMenu() { + const [previewMode, setPreviewMode] = usePreviewStore((store) => [store.previewMode, store.setPreviewMode]); + + const handlePreviewChange = (event: React.ChangeEvent) => { + setPreviewMode(event.target.checked); + }; + + return ( + + + + Preview Mode + + + + + ); +} + function SettingsMenu() { const [drawerOpen, setDrawerOpen] = useState(false); const isMobileScreen = useMediaQuery('(max-width:750px)'); @@ -174,10 +194,16 @@ function SettingsMenu() { - + + + + Experimental Features + + + diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index 077ae8ace..79cc5f140 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -33,7 +33,7 @@ import { useTabStore } from '$stores/TabStore'; import locationIds from '$lib/location_ids'; import { normalizeTime, parseDaysString, formatTimes } from '$stores/calendarizeHelpers'; import useColumnStore, { type SectionTableColumn } from '$stores/ColumnStore'; -import { useTimeFormatStore } from '$stores/SettingsStore'; +import { usePreviewStore, useTimeFormatStore } from '$stores/SettingsStore'; import { useHoveredStore } from '$stores/HoveredStore'; const styles: Styles = (theme) => ({ @@ -471,6 +471,7 @@ interface SectionTableBodyProps { scheduleNames: string[]; } +// eslint-disable-next-line @typescript-eslint/no-explicit-any const tableBodyCells: Record> = { sectionCode: CourseCodeCell, sectionDetails: SectionDetailsCell, @@ -520,15 +521,17 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { store.setHoveredCourseEvents, ]); + const { previewMode } = usePreviewStore(); + const handleHover = useCallback(() => { const alreadyHovered = hoveredCourseEvents && hoveredCourseEvents.some((courseEvent) => courseEvent.sectionCode == section.sectionCode); - alreadyHovered || addedCourse + !previewMode || alreadyHovered || addedCourse ? setHoveredCourseEvents(undefined) : setHoveredCourseEvents(section, courseDetails, term); - }, [addedCourse, courseDetails, hoveredCourseEvents, section, setHoveredCourseEvents, term]); + }, [addedCourse, courseDetails, hoveredCourseEvents, previewMode, section, setHoveredCourseEvents, term]); // Attach event listeners to the store. useEffect(() => { diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts index 5ca0d6dd4..eab601688 100644 --- a/apps/antalmanac/src/stores/SettingsStore.ts +++ b/apps/antalmanac/src/stores/SettingsStore.ts @@ -20,8 +20,8 @@ export const useThemeStore = create((set) => { themeSetting !== 'system' ? themeSetting : window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; + ? 'dark' + : 'light'; return { themeSetting: themeSetting as 'light' | 'dark' | 'system', @@ -35,8 +35,8 @@ export const useThemeStore = create((set) => { themeSetting !== 'system' ? themeSetting : window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; + ? 'dark' + : 'light'; set({ appTheme: appTheme, themeSetting: themeSetting }); @@ -67,3 +67,22 @@ export const useTimeFormatStore = create((set) => { }, }; }); +export interface PreviewStore { + previewMode: boolean; + setPreviewMode: (previewMode: boolean) => void; +} + +export const usePreviewStore = create((set) => { + const previewMode = typeof Storage !== 'undefined' && window.localStorage.getItem('previewMode') == 'true'; + + return { + previewMode: previewMode, + setPreviewMode: (previewMode) => { + if (typeof Storage !== 'undefined') { + window.localStorage.setItem('previewMode', previewMode.toString()); + } + + set({ previewMode: previewMode }); + }, + }; +}); From dd3fc6d237104d69aaa09d204c9306eb74378333 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 8 Dec 2023 00:48:07 -0800 Subject: [PATCH 7/9] style: add experimental header, misc. styling --- apps/antalmanac/src/components/Header/SettingsMenu.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index df41431eb..9ce5d725e 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -34,7 +34,7 @@ function ThemeMenu() { }; return ( - + Theme @@ -92,7 +92,7 @@ function TimeMenu() { }; return ( - + Time @@ -186,7 +186,7 @@ function SettingsMenu() { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - padding: '16px', + padding: '12px', }} > Settings @@ -196,11 +196,12 @@ function SettingsMenu() { + - Experimental Features + Experimental Features From 964a73cc4f32ac955989ab6096cf45200ac76e6c Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Mon, 11 Dec 2023 08:41:06 -0800 Subject: [PATCH 8/9] feat: add tooltip explaining preview mode --- .../src/components/Header/SettingsMenu.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index 9ce5d725e..c8a66bcdf 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -1,8 +1,8 @@ import { useCallback, useState } from 'react'; import { Box, Button, ButtonGroup, Drawer, IconButton, Switch, Typography, useMediaQuery } from '@material-ui/core'; -import { Divider, Stack } from '@mui/material'; +import { Divider, Stack, Tooltip } from '@mui/material'; import { CSSProperties } from '@material-ui/core/styles/withStyles'; -import { Close, DarkMode, LightMode, Settings, SettingsBrightness } from '@mui/icons-material'; +import { Close, DarkMode, Help, LightMode, Settings, SettingsBrightness } from '@mui/icons-material'; import { usePreviewStore, useThemeStore, useTimeFormatStore } from '$stores/SettingsStore'; @@ -146,9 +146,14 @@ function ExperimentalMenu() { return ( - - Preview Mode - + + + Preview Mode + + Hover over courses to preview them in your calendar!}> + + + From bc4d56e002b919bdfe0505935ce17a188d495b61 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 24 Jan 2024 13:12:45 -0800 Subject: [PATCH 9/9] style: change setting name --- apps/antalmanac/src/components/Header/SettingsMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index c8a66bcdf..d35dfae06 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx @@ -148,7 +148,7 @@ function ExperimentalMenu() { - Preview Mode + Hover to Preview Hover over courses to preview them in your calendar!}>