feat(ui): update popup and course blocks

src/pages/popup/index.html

@@ -9,7 +9,7 @@
             body {
                 margin: 0;
                 padding: 0;
-                width: 400px;
+                width: 430px;
                 height: 540px;
             }
         </style>

src/shared/storage/OptionsStore.ts

@@ -7,9 +7,6 @@ export interface IOptionsStore {
     /** whether we should enable course status chips (indicator for waitlisted, cancelled, and closed courses) */
     enableCourseStatusChips: boolean;
 
-    /** whether we should enable course's time and location in the extension's popup */
-    enableTimeAndLocationInPopup: boolean;
-
     /** whether we should automatically highlight conflicts on the course schedule page (adds a red strikethrough to courses that have conflicting times) */
     enableHighlightConflicts: boolean;
 
@@ -25,10 +22,9 @@ export interface IOptionsStore {
 
 export const OptionsStore = createSyncStore<IOptionsStore>({
     enableCourseStatusChips: false,
-    enableTimeAndLocationInPopup: false,
     enableHighlightConflicts: true,
     enableScrollToLoad: true,
-    enableDataRefreshing: true,
+    enableDataRefreshing: false,
     alwaysOpenCalendarInNewTab: false,
 });
 
@@ -40,7 +36,6 @@ export const OptionsStore = createSyncStore<IOptionsStore>({
 export const initSettings = async () =>
     ({
         enableCourseStatusChips: await OptionsStore.get('enableCourseStatusChips'),
-        enableTimeAndLocationInPopup: await OptionsStore.get('enableTimeAndLocationInPopup'),
         enableHighlightConflicts: await OptionsStore.get('enableHighlightConflicts'),
         enableScrollToLoad: await OptionsStore.get('enableScrollToLoad'),
         enableDataRefreshing: await OptionsStore.get('enableDataRefreshing'),

src/shared/types/CourseMeeting.ts

@@ -53,9 +53,8 @@ export class CourseMeeting {
      * @param meeting - The meeting to check for conflicts with
      * @returns True if the given meeting conflicts with this meeting, false otherwise
      */
-    isConflicting(meeting: CourseMeeting): boolean {
+    isConflicting({ days: otherDays, startTime: otherStartTime, endTime: otherEndTime }: CourseMeeting): boolean {
         const { days, startTime, endTime } = this;
-        const { days: otherDays, startTime: otherStartTime, endTime: otherEndTime } = meeting;
 
         const hasDayConflict = days.some(day => otherDays.includes(day));
         const hasTimeConflict = startTime < otherEndTime && endTime > otherStartTime;
@@ -69,14 +68,13 @@ export class CourseMeeting {
      * @param options - Options for the string representation
      * @returns String representation of the days of the week that this meeting is taught
      */
-    getDaysString(options: DaysStringOptions): string {
-        let { format, separator } = options;
+    getDaysString({ format, separator }: DaysStringOptions): string {
         let { days } = this;
 
         if (format === 'short') {
             days = Object.keys(DAY_MAP).filter(day => days.includes(DAY_MAP[day as keyof typeof DAY_MAP])) as Day[];
         }
-        if (separator === 'none') {
+        if (!separator) {
             return days.join('');
         }
         const listFormat = new Intl.ListFormat('en-US', {
@@ -92,7 +90,7 @@ export class CourseMeeting {
      * @param options - Options for the string representation
      * @returns String representation of the time range for the course
      */
-    getTimeString(options: TimeStringOptions): string {
+    getTimeString({ separator = '-' }: TimeStringOptions): string {
         const { startTime, endTime } = this;
         const startHour = Math.floor(startTime / 60);
         const startMinute = startTime % 60;
@@ -124,7 +122,7 @@ export class CourseMeeting {
         endTimeString += endMinute === 0 ? ':00' : `:${endMinute}`;
         endTimeString += endHour >= 12 ? 'pm' : 'am';
 
-        return `${startTimeString} ${options.separator} ${endTimeString}`;
+        return `${startTimeString} ${separator} ${endTimeString}`;
     }
 }
 
@@ -153,5 +151,5 @@ type DaysStringOptions = {
      *
      * 'narrow' = `Monday Wednesday Friday`
      */
-    separator: Intl.ListFormatStyle | 'none';
+    separator?: Intl.ListFormatStyle;
 };

src/stories/components/List.stories.tsx → src/stories/components/SortableList.stories.tsx

@@ -76,7 +76,7 @@ const exampleCourses = generateCourses(numberOfCourses);
 type CourseWithId = Course & BaseItem;
 
 const meta = {
-    title: 'Components/Common/List',
+    title: 'Components/Common/SortableList',
     component: SortableList,
     parameters: {
         layout: 'centered',

src/views/components/PopupMain.tsx

@@ -1,15 +1,13 @@
 import splashText from '@assets/insideJokes';
 import createSchedule from '@pages/background/lib/createSchedule';
-import { CalendarDots, Flag, GearSix, Plus } from '@phosphor-icons/react';
+import { CalendarDots, GearSix, Plus } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-import { openReportWindow } from '@shared/util/openReportWindow';
 import Divider from '@views/components/common/Divider';
 import Text from '@views/components/common/Text/Text';
 import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
 import useSchedules, { getActiveSchedule, replaceSchedule, switchSchedule } from '@views/hooks/useSchedules';
-import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
 import useKC_DABR_WASM from 'kc-dabr-wasm';
 import React, { useEffect, useState } from 'react';
 
@@ -27,14 +25,14 @@ import { SortableList } from './common/SortableList';
  */
 export default function PopupMain(): JSX.Element {
     const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
-    const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
+    // const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
     useKC_DABR_WASM();
 
     useEffect(() => {
         const initAllSettings = async () => {
-            const { enableCourseStatusChips, enableDataRefreshing } = await initSettings();
+            const { enableCourseStatusChips } = await initSettings();
             setEnableCourseStatusChips(enableCourseStatusChips);
-            setEnableDataRefreshing(enableDataRefreshing);
+            // setEnableDataRefreshing(enableDataRefreshing);
         };
 
         initAllSettings();
@@ -44,14 +42,14 @@ export default function PopupMain(): JSX.Element {
             // console.log('enableCourseStatusChips', newValue);
         });
 
-        const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
-            setEnableDataRefreshing(newValue);
-            // console.log('enableDataRefreshing', newValue);
-        });
+        // const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
+        //     setEnableDataRefreshing(newValue);
+        //     // console.log('enableDataRefreshing', newValue);
+        // });
 
         return () => {
             OptionsStore.removeListener(l1);
-            OptionsStore.removeListener(l2);
+            // OptionsStore.removeListener(l2);
         };
     }, []);
 
@@ -86,7 +84,7 @@ export default function PopupMain(): JSX.Element {
 
     return (
         <div className='h-screen max-h-full flex flex-col bg-white'>
-            <div className='p-5 py-3.5'>
+            <div className='px-spacing-6 py-spacing-5'>
                 <div className='flex items-center justify-between bg-white'>
                     <SmallLogo />
                     <div className='flex items-center gap-2.5'>
@@ -95,13 +93,15 @@ export default function PopupMain(): JSX.Element {
                             color='ut-burntorange'
                             onClick={handleCalendarOpenOnClick}
                             icon={CalendarDots}
-                        />
+                            iconProps={{ weight: 'fill' }}
+                        >
+                            Calendar
+                        </Button>
                         <Button variant='minimal' color='ut-black' onClick={handleOpenOptions} icon={GearSix} />
-                        <Button variant='minimal' color='ut-black' onClick={openReportWindow} icon={Flag} />
                     </div>
                 </div>
             </div>
-            <Divider orientation='horizontal' size='100%' />
+            <Divider className='bg-ut-offwhite/50' orientation='horizontal' size='100%' />
             <div className='px-5 pb-2.5 pt-3.75'>
                 <ScheduleDropdown>
                     <SortableList
@@ -139,7 +139,10 @@ export default function PopupMain(): JSX.Element {
                     </Text>
                 </div>
             )}
-            <div className='flex-1 self-stretch overflow-y-auto px-5'>
+            <div
+                style={{ scrollbarGutter: 'stable' }}
+                className='flex-1 self-stretch overflow-y-scroll pl-spacing-6 pr-[6px]'
+            >
                 {activeSchedule?.courses?.length > 0 && (
                     <SortableList
                         draggables={activeSchedule.courses.map(course => ({
@@ -157,35 +160,35 @@ export default function PopupMain(): JSX.Element {
                     />
                 )}
             </div>
-            <div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
-                <div className='flex gap-2.5'>
+            <div className='w-full flex flex-col items-center gap-1.25 px-spacing-6 py-spacing-5'>
+                <div className='flex gap-spacing-6'>
                     {enableCourseStatusChips && (
                         <>
-                            <CourseStatus status='WAITLISTED' size='mini' />
-                            <CourseStatus status='CLOSED' size='mini' />
-                            <CourseStatus status='CANCELLED' size='mini' />
+                            <CourseStatus status='WAITLISTED' size='small' />
+                            <CourseStatus status='CLOSED' size='small' />
+                            <CourseStatus status='CANCELLED' size='small' />
                         </>
                     )}
                 </div>
-                {enableDataRefreshing && (
-                    <div className='inline-flex items-center self-center gap-1'>
-                        <Text variant='mini' className='text-ut-gray !font-normal'>
+                {/* {enableDataRefreshing && (
+                    <div className='inline-flex items-center self-center gap-1'> */}
+                {/* <Text variant='mini' className='text-ut-gray !font-normal'>
                             LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
-                        </Text>
-                        {/* <button
-                            className='h-4 w-4 bg-transparent p-0 btn'
-                            onClick={() => {
-                                setIsRefreshing(true);
-                            }}
-                        >
-                            <RefreshIcon
-                                className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
-                                    'animate-spin': isRefreshing,
-                                })}
-                            />
-                        </button> */}
-                    </div>
-                )}
+                        </Text> */}
+                {/* <button
+                        className='h-4 w-4 bg-transparent p-0 btn'
+                        onClick={() => {
+                            setIsRefreshing(true);
+                        }}
+                    >
+                        <RefreshIcon
+                            className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
+                                'animate-spin': isRefreshing,
+                            })}
+                        />
+                    </button> */}
+                {/* </div>
+                )} */}
             </div>
         </div>
     );

src/views/components/calendar/Calendar.tsx

@@ -65,7 +65,7 @@ export default function Calendar(): JSX.Element {
                 <div className='h-screen flex overflow-auto'>
                     <div
                         className={clsx(
-                            'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite1 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
+                            'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-ut-offwhite/50 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
                             {
                                 'max-w-[20.3125rem] ': showSidebar,
                                 'max-w-0 pointer-events-none': !showSidebar,

src/views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker.tsx

@@ -105,7 +105,7 @@ export default function CourseCellColorPicker({ defaultColor }: CourseCellColorP
     };
 
     return (
-        <div className='inline-flex flex-col border border-1 border-ut-offwhite rounded-1 bg-white p-1.25'>
+        <div className='inline-flex flex-col border border-ut-offwhite rounded-1 bg-white p-1.25'>
             <div className='grid grid-cols-6 gap-1'>
                 {Array.from(colorPatchColors.keys()).map(baseColor => (
                     <ColorPatch

src/views/components/calendar/CalendarHeader/CalendarHeader.tsx

@@ -62,7 +62,7 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                                 className={clsx([
                                     styleResetClass,
                                     'mt-spacing-3',
-                                    'min-w-max cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite1 focus:outline-none',
+                                    'min-w-max cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite/50 focus:outline-none',
                                     'data-[closed]:(opacity-0 scale-95)',
                                     'data-[enter]:(ease-out-expo duration-150)',
                                     'data-[leave]:(ease-out duration-50)',

src/views/components/common/Divider.tsx

@@ -41,7 +41,7 @@ export default function Divider({ className, testId, size, orientation }: Divide
         <div
             style={style}
             data-testid={testId}
-            className={clsx('border-solid border-theme-offwhite1 w-0 h-0', className)}
+            className={clsx('border-solid border-ut-offwhite/50 w-0 h-0', className)}
         />
     );
 }