From 4f0ae434110d65ba5b4e835a28bcd8290ca831e6 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Tue, 21 May 2024 23:07:41 -0500 Subject: [PATCH 1/5] refactor: Update spinner design (#223) --- ...Spinner.stories.ts => Spinner.stories.tsx} | 6 +++-- src/views/components/common/Spinner.tsx | 21 +++++++++++++++++ .../common/Spinner/Spinner.module.scss | 23 ------------------- .../components/common/Spinner/Spinner.tsx | 17 -------------- .../Description.tsx | 2 +- .../GradeDistribution.tsx | 2 +- 6 files changed, 27 insertions(+), 44 deletions(-) rename src/stories/components/{Spinner.stories.ts => Spinner.stories.tsx} (72%) create mode 100644 src/views/components/common/Spinner.tsx delete mode 100644 src/views/components/common/Spinner/Spinner.module.scss delete mode 100644 src/views/components/common/Spinner/Spinner.tsx diff --git a/src/stories/components/Spinner.stories.ts b/src/stories/components/Spinner.stories.tsx similarity index 72% rename from src/stories/components/Spinner.stories.ts rename to src/stories/components/Spinner.stories.tsx index 2ce320ec..56bb050a 100644 --- a/src/stories/components/Spinner.stories.ts +++ b/src/stories/components/Spinner.stories.tsx @@ -1,11 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react'; -import Spinner from '@views/components/common/Spinner/Spinner'; +import Spinner from '@views/components/common/Spinner'; const meta = { title: 'Components/Common/Spinner', component: Spinner, tags: ['autodocs'], - argTypes: {}, + parameters: { + layout: 'centered', + }, } satisfies Meta; export default meta; diff --git a/src/views/components/common/Spinner.tsx b/src/views/components/common/Spinner.tsx new file mode 100644 index 00000000..6a4b8caa --- /dev/null +++ b/src/views/components/common/Spinner.tsx @@ -0,0 +1,21 @@ +import type { SVGProps } from 'react'; +import React from 'react'; + +/** + * A simple spinner component that can be used to indicate loading. + */ +export default function Spinner({ className, ...rest }: SVGProps): JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/views/components/common/Spinner/Spinner.module.scss b/src/views/components/common/Spinner/Spinner.module.scss deleted file mode 100644 index ca7e8711..00000000 --- a/src/views/components/common/Spinner/Spinner.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'src/views/styles/colors.module.scss'; - -$spinner-border-width: 10px; - -.spinner { - border: 1px solid colors.$charcoal; - border-width: $spinner-border-width; - border-top: $spinner-border-width solid colors.$tangerine; - margin: 0 auto 15px auto; - border-radius: 50%; - width: 60px; - height: 60px; - animation: spin 1s linear infinite; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/views/components/common/Spinner/Spinner.tsx b/src/views/components/common/Spinner/Spinner.tsx deleted file mode 100644 index 9421bfd8..00000000 --- a/src/views/components/common/Spinner/Spinner.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import clsx from 'clsx'; -import React from 'react'; - -import styles from './Spinner.module.scss'; - -type Props = { - testId?: string; - className?: string; - style?: React.CSSProperties; -}; - -/** - * A simple spinner component that can be used to indicate loading. - */ -export default function Spinner({ className, testId, style }: Props): JSX.Element { - return
; -} diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx index f00688af..a385230d 100644 --- a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx +++ b/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx @@ -1,5 +1,5 @@ import type { Course } from '@shared/types/Course'; -import Spinner from '@views/components/common/Spinner/Spinner'; +import Spinner from '@views/components/common/Spinner'; import Text from '@views/components/common/Text/Text'; import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper'; import { SiteSupport } from '@views/lib/getSiteSupport'; diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx index bc18d600..b1cb8d4b 100644 --- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx +++ b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx @@ -1,7 +1,7 @@ import type { Course } from '@shared/types/Course'; import type { Distribution, LetterGrade } from '@shared/types/Distribution'; import { extendedColors } from '@shared/types/ThemeColors'; -import Spinner from '@views/components/common/Spinner/Spinner'; +import Spinner from '@views/components/common/Spinner'; import Text from '@views/components/common/Text/Text'; import { NoDataError, From 40ef92b230a985f1099d413105704436f1b5cc8b Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Tue, 21 May 2024 23:08:04 -0500 Subject: [PATCH 2/5] style: add slight shadow on hover to calendar course cells (#217) --- src/views/components/calendar/CalendarCourseCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/calendar/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell.tsx index c4bee432..7011f21a 100644 --- a/src/views/components/calendar/CalendarCourseCell.tsx +++ b/src/views/components/calendar/CalendarCourseCell.tsx @@ -57,7 +57,7 @@ export default function CalendarCourseCell({ return (
Date: Thu, 23 May 2024 15:08:54 -0500 Subject: [PATCH 3/5] feat: rerouted directory to syllabus when click on professor name (#211) * feat: testing names * feat: rerouted instructor on click from directory to syllabus * feat: removed number requirement * fix: removed department --- .../injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx index 00f6f6f4..95db60bf 100644 --- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx +++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx @@ -132,7 +132,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H {getInstructorFullName(instructor)} From bc354f3798a02e6ebc3c66a8b5eee553c25a19d4 Mon Sep 17 00:00:00 2001 From: Derek Chen Date: Mon, 27 May 2024 09:32:31 -0500 Subject: [PATCH 4/5] feat: additional changes to #201 (#224) * fix: calendar weight change * feat: small color change * feat: stories for logo * feat: align the logo * feat: stupid imports * fix: eslint styling * Update CalenderHeader.tsx * Update colors.module.scss * chore: remove argTypes * chore: remove argTypes * chore: remove argTypes * fix: lock * chore: styled up logo stories --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> --- src/stories/components/LogoIcon.stories.tsx | 18 ++++++++++++++++++ .../components/calendar/CalenderHeader.tsx | 2 +- src/views/components/common/LogoIcon.tsx | 4 ++-- 3 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 src/stories/components/LogoIcon.stories.tsx diff --git a/src/stories/components/LogoIcon.stories.tsx b/src/stories/components/LogoIcon.stories.tsx new file mode 100644 index 00000000..4eafe95f --- /dev/null +++ b/src/stories/components/LogoIcon.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { LargeLogo, SmallLogo } from '@views/components/common/LogoIcon'; +import React from 'react'; + +const meta = { + title: 'Components/Common/Logo', + component: SmallLogo, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Small: Story = {}; + +export const Large: Story = { + render: args => , +}; diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalenderHeader.tsx index 7b91aa51..c159cdc7 100644 --- a/src/views/components/calendar/CalenderHeader.tsx +++ b/src/views/components/calendar/CalenderHeader.tsx @@ -51,7 +51,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps) totalCourses={activeSchedule.courses.length} />
- + DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}