From 7dd93690d6dbd206cb50442f42ec85d6bbfc1da8 Mon Sep 17 00:00:00 2001 From: Warith Rahman <64328893+warithr621@users.noreply.github.com> Date: Thu, 21 Nov 2024 20:56:56 -0600 Subject: [PATCH] fix: place hours and courses under schedule name (#388) * fix(header): bottom-aligned the schedule name + hours/courses in calendar * feat: updated font style in header and dropdown * fix: new hour/course styling per discussion i love having 80 different ideas, hopefully after this there's like maybe a tiny commit left to do before this is done.. * feat(header): added icons to cal header WORK IN PROGRESS * style: updated layout of header and main popup * fix: updated font and spacing for header and popup * fix: updated cal + popup style details - schedule title is now in normal casing w/ colon removed - last updated on is now entirely deleted from everywhere - hour and course numbers now h3 in calendar ONLY * refactor: changed size for calendar header * refactor: changed ut-black to theme-black * refactor: remove hiding on small window sizes * refactor: reduced spacing in popup * refactor: updated unocss for small-caps configuration * style: changed variant + className order * fix: readded update time text * style: auto formatter, unused imports, capitalization --------- Co-authored-by: Razboy20 Co-authored-by: Samuel Gunter Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> --- package.json | 2 + pnpm-lock.yaml | 21 +++++++++- .../calendar/CalendarHeader.stories.tsx | 2 +- src/views/components/calendar/Calendar.tsx | 2 +- ...{CalenderHeader.tsx => CalendarHeader.tsx} | 16 +------- .../components/common/ScheduleDropdown.tsx | 26 ++++++++----- .../common/ScheduleTotalHoursAndCourses.tsx | 38 ++++++++++++++----- src/views/components/settings/Settings.tsx | 7 ---- unocss.config.ts | 6 ++- 9 files changed, 76 insertions(+), 44 deletions(-) rename src/views/components/calendar/{CalenderHeader.tsx => CalendarHeader.tsx} (81%) diff --git a/package.json b/package.json index e2383c06..0a618004 100644 --- a/package.json +++ b/package.json @@ -59,9 +59,11 @@ "@commitlint/types": "^19.5.0", "@crxjs/vite-plugin": "2.0.0-beta.21", "@iconify-json/bi": "^1.2.1", + "@iconify-json/ic": "^1.2.1", "@iconify-json/iconoir": "^1.2.4", "@iconify-json/material-symbols": "^1.2.6", "@iconify-json/ri": "^1.2.3", + "@iconify-json/streamline": "^1.2.1", "@semantic-release/exec": "^6.0.3", "@sentry/types": "^8.38.0", "@storybook/addon-designs": "^8.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 235b5383..026013f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -110,6 +110,9 @@ importers: '@iconify-json/bi': specifier: ^1.2.1 version: 1.2.1 + '@iconify-json/ic': + specifier: ^1.2.1 + version: 1.2.1 '@iconify-json/iconoir': specifier: ^1.2.4 version: 1.2.4 @@ -119,6 +122,9 @@ importers: '@iconify-json/ri': specifier: ^1.2.3 version: 1.2.3 + '@iconify-json/streamline': + specifier: ^1.2.1 + version: 1.2.1 '@semantic-release/exec': specifier: ^6.0.3 version: 6.0.3(semantic-release@24.2.0(typescript@5.6.3)) @@ -1053,6 +1059,9 @@ packages: '@iconify-json/bi@1.2.1': resolution: {integrity: sha512-wsIWb6bcnBkfN8/2puIIE2ul6NYVjclbE/nI7JZsPnfzBamd3NuRFstXQH9Ckkbrw9eiBTNKwHbH90w3UE5QIg==} + '@iconify-json/ic@1.2.1': + resolution: {integrity: sha512-UjL/bjJP/T5EV881+hTzcfTKVo0KEUjhnMiJcLtPzNgPtU2KZZmRx8BSKKR61H4CN/5FTEbyawGyG0aEt3SwGQ==} + '@iconify-json/iconoir@1.2.4': resolution: {integrity: sha512-PILwyd8to0DFnMdT0s1RogIT+PRbh0THfvFxi94zobIRpsx/It/slFJHH6bslzXZLPRMSBebNwjqwQt5FvWlSQ==} @@ -1062,6 +1071,9 @@ packages: '@iconify-json/ri@1.2.3': resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==} + '@iconify-json/streamline@1.2.1': + resolution: {integrity: sha512-hqNodkjyIHBymkFY3zMip0F/D5yw4qXgwMJCaTF3zlbpQMgNJhY3D2ikTFTDVcTHfCSd6EX6enKXj4Rvu+5hnw==} + '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} @@ -5725,7 +5737,6 @@ packages: engines: {node: '>=0.6.0', teleport: '>=0.2.0'} deprecated: |- You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other. - (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) queue-microtask@1.2.3: @@ -7535,6 +7546,10 @@ snapshots: dependencies: '@iconify/types': 2.0.0 + '@iconify-json/ic@1.2.1': + dependencies: + '@iconify/types': 2.0.0 + '@iconify-json/iconoir@1.2.4': dependencies: '@iconify/types': 2.0.0 @@ -7547,6 +7562,10 @@ snapshots: dependencies: '@iconify/types': 2.0.0 + '@iconify-json/streamline@1.2.1': + dependencies: + '@iconify/types': 2.0.0 + '@iconify/types@2.0.0': {} '@iconify/utils@2.1.33': diff --git a/src/stories/components/calendar/CalendarHeader.stories.tsx b/src/stories/components/calendar/CalendarHeader.stories.tsx index b9738f22..b2d2cf26 100644 --- a/src/stories/components/calendar/CalendarHeader.stories.tsx +++ b/src/stories/components/calendar/CalendarHeader.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import CalendarHeader from '@views/components/calendar/CalenderHeader'; +import CalendarHeader from '@views/components/calendar/CalendarHeader'; const meta = { title: 'Components/Calendar/CalendarHeader', diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx index c1ad86dd..65252788 100644 --- a/src/views/components/calendar/Calendar.tsx +++ b/src/views/components/calendar/Calendar.tsx @@ -2,8 +2,8 @@ import type { CalendarTabMessages } from '@shared/messages/CalendarMessages'; import type { Course } from '@shared/types/Course'; import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar'; import CalendarGrid from '@views/components/calendar/CalendarGrid'; +import CalendarHeader from '@views/components/calendar/CalendarHeader'; import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules'; -import CalendarHeader from '@views/components/calendar/CalenderHeader'; import ImportantLinks from '@views/components/calendar/ImportantLinks'; import Divider from '@views/components/common/Divider'; import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup'; diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalendarHeader.tsx similarity index 81% rename from src/views/components/calendar/CalenderHeader.tsx rename to src/views/components/calendar/CalendarHeader.tsx index c16f71f2..fbd07a51 100644 --- a/src/views/components/calendar/CalenderHeader.tsx +++ b/src/views/components/calendar/CalendarHeader.tsx @@ -4,9 +4,7 @@ import CourseStatus from '@views/components/common/CourseStatus'; import Divider from '@views/components/common/Divider'; import { LargeLogo } from '@views/components/common/LogoIcon'; import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses'; -import Text from '@views/components/common/Text/Text'; import useSchedules from '@views/hooks/useSchedules'; -import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString'; import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript'; import React, { useEffect, useState } from 'react'; @@ -33,7 +31,7 @@ interface CalendarHeaderProps { */ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps): JSX.Element { const [enableCourseStatusChips, setEnableCourseStatusChips] = useState(false); - const [enableDataRefreshing, setEnableDataRefreshing] = useState(false); + const [_enableDataRefreshing, setEnableDataRefreshing] = useState(false); const [activeSchedule] = useSchedules(); @@ -76,16 +74,6 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps) totalHours={activeSchedule.hours} totalCourses={activeSchedule.courses.length} /> - {enableDataRefreshing && ( -
- - LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)} - - {/* */} -
- )}
{enableCourseStatusChips && ( @@ -98,7 +86,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps) {/*
); diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx index c806478c..4f1c298a 100644 --- a/src/views/components/common/ScheduleDropdown.tsx +++ b/src/views/components/common/ScheduleDropdown.tsx @@ -27,17 +27,23 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) { <>
- - {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}: + + {activeSchedule ? activeSchedule.name : 'Schedule'} -

- - {activeSchedule ? activeSchedule.hours : 0} HOURS - - - {activeSchedule ? activeSchedule.courses.length : 0} Courses - -

+
+
+ {activeSchedule ? activeSchedule.hours : 0} + + {activeSchedule.hours === 1 ? 'HOUR' : 'HOURS'} + +
+
+ {activeSchedule ? activeSchedule.courses.length : 0} + + {activeSchedule.courses.length === 1 ? 'COURSE' : 'COURSES'} + +
+
{open ? : } diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx index ab57fbff..80ea7e30 100644 --- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx +++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx @@ -24,16 +24,36 @@ export default function ScheduleTotalHoursAndCourses({ totalCourses, }: ScheduleTotalHoursAndCoursesProps): JSX.Element { return ( -
- - {`${scheduleName}: `} - - - {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'} - - {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'} - +
+ + {scheduleName} +
+
+ + {totalHours} + + + {totalHours === 1 ? 'HOUR' : 'HOURS'} + +
+
+ + {totalCourses} + + + {totalCourses === 1 ? 'COURSE' : 'COURSES'} + +
+
); } diff --git a/src/views/components/settings/Settings.tsx b/src/views/components/settings/Settings.tsx index c92a3d08..fb5229d4 100644 --- a/src/views/components/settings/Settings.tsx +++ b/src/views/components/settings/Settings.tsx @@ -3,7 +3,6 @@ import { addCourseByURL } from '@pages/background/lib/addCourseByURL'; import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule'; import exportSchedule from '@pages/background/lib/exportSchedule'; import importSchedule from '@pages/background/lib/importSchedule'; -import { background } from '@shared/messages'; import { initSettings, OptionsStore } from '@shared/storage/OptionsStore'; import { UserScheduleStore } from '@shared/storage/UserScheduleStore'; import { downloadBlob } from '@shared/util/downloadBlob'; @@ -23,7 +22,6 @@ import useSchedules from '@views/hooks/useSchedules'; // import getCourseTableRows from '@views/lib/getCourseTableRows'; import { GitHubStatsService, LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_SWE } from '@views/lib/getGitHubStats'; // import { SiteSupport } from '@views/lib/getSiteSupport'; -import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString'; import clsx from 'clsx'; import React, { useCallback, useEffect, useState } from 'react'; @@ -454,11 +452,6 @@ export default function Settings(): JSX.Element {
{DISPLAY_PREVIEWS && ( -
- - LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)} - -