From 37bd7e79d9202d55c7d0f566518526b0aed53c68 Mon Sep 17 00:00:00 2001 From: Preston Cook Date: Tue, 31 Dec 2024 13:36:08 -0600 Subject: [PATCH] feat(ui): change icons to phosphor-icons #467 (#469) * change icons to phosphor-icons * feat(ui): change icons to phosphor-icons * feat(ui): change icons to phosphor-icons * feat(ui): correct icon sizes, weights, and colors * feat(ui): change arrow-up-right sizes to 16px --- package.json | 1 + pnpm-lock.yaml | 15 +++++++++++ src/shared/util/icons.tsx | 11 +++----- src/stories/components/Button.stories.tsx | 25 +++++++------------ .../components/DialogProvider.stories.tsx | 17 ++++++++----- src/stories/components/Divider.stories.tsx | 17 +++++-------- src/stories/components/FileUpload.stories.tsx | 5 ++-- src/views/components/PopupMain.tsx | 10 +++----- .../components/calendar/CalendarBottomBar.tsx | 8 +++--- .../calendar/CalendarCourseCell.tsx | 11 +++----- .../ColorPatch.tsx | 5 ++-- .../HexColorEditor.tsx | 5 ++-- .../components/calendar/CalendarHeader.tsx | 9 +++---- .../components/calendar/CalendarSchedules.tsx | 5 ++-- .../components/calendar/ImportantLinks.tsx | 5 ++-- src/views/components/calendar/TeamLinks.tsx | 5 ++-- src/views/components/common/Button.tsx | 9 ++++--- src/views/components/common/FileUpload.tsx | 9 ++++--- .../components/common/PopupCourseBlock.tsx | 5 ++-- .../components/common/ScheduleDropdown.tsx | 6 ++--- .../components/common/ScheduleListItem.tsx | 24 ++++++++---------- .../HeadingAndActions.tsx | 23 ++++++----------- .../components/injected/TableRow/TableRow.tsx | 5 ++-- src/views/components/settings/Settings.tsx | 13 +++------- src/views/hooks/useChangelog.tsx | 5 ++-- 25 files changed, 112 insertions(+), 141 deletions(-) diff --git a/package.json b/package.json index 0a618004..67e9f768 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@headlessui/react": "^2.2.0", "@hello-pangea/dnd": "^17.0.0", "@octokit/rest": "^21.0.2", + "@phosphor-icons/react": "^2.1.7", "@sentry/react": "^8.38.0", "@unocss/vite": "^0.63.6", "@vitejs/plugin-react": "^4.3.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 026013f1..d0a8cc9c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -28,6 +28,9 @@ importers: '@octokit/rest': specifier: ^21.0.2 version: 21.0.2 + '@phosphor-icons/react': + specifier: ^2.1.7 + version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@sentry/react': specifier: ^8.38.0 version: 8.38.0(react@18.3.1) @@ -1315,6 +1318,13 @@ packages: resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==} engines: {node: '>= 10.0.0'} + '@phosphor-icons/react@2.1.7': + resolution: {integrity: sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==} + engines: {node: '>=10'} + peerDependencies: + react: '>= 16.8' + react-dom: '>= 16.8' + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -7816,6 +7826,11 @@ snapshots: '@parcel/watcher-win32-x64': 2.5.0 optional: true + '@phosphor-icons/react@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@pkgjs/parseargs@0.11.0': optional: true diff --git a/src/shared/util/icons.tsx b/src/shared/util/icons.tsx index e67163ab..c25b6785 100644 --- a/src/shared/util/icons.tsx +++ b/src/shared/util/icons.tsx @@ -1,12 +1,9 @@ +import { ClockUser, LockKey, Prohibit } from '@phosphor-icons/react'; import type { StatusType } from '@shared/types/Course'; import { Status } from '@shared/types/Course'; import type { SVGProps } from 'react'; import React from 'react'; -import ClosedIcon from '~icons/material-symbols/lock'; -import WaitlistIcon from '~icons/material-symbols/timelapse'; -import CancelledIcon from '~icons/material-symbols/warning'; - interface StatusIconProps extends SVGProps { status: StatusType; } @@ -22,11 +19,11 @@ export function StatusIcon(props: StatusIconProps): JSX.Element | null { switch (status) { case Status.WAITLISTED: - return ; + return ; case Status.CLOSED: - return ; + return ; case Status.CANCELLED: - return ; + return ; default: return null; } diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx index 83f79362..e61683af 100644 --- a/src/stories/components/Button.stories.tsx +++ b/src/stories/components/Button.stories.tsx @@ -1,16 +1,9 @@ +import { CalendarDots, ChatText, FileText, ImageSquare, Minus, Plus, Smiley } from '@phosphor-icons/react'; import { colorsFlattened } from '@shared/util/themeColors'; import type { Meta, StoryObj } from '@storybook/react'; import { Button } from '@views/components/common/Button'; import React from 'react'; -import AddIcon from '~icons/material-symbols/add'; -import CalendarMonthIcon from '~icons/material-symbols/calendar-month'; -import DescriptionIcon from '~icons/material-symbols/description'; -import ImagePlaceholderIcon from '~icons/material-symbols/image'; -import HappyFaceIcon from '~icons/material-symbols/mood'; -import RemoveIcon from '~icons/material-symbols/remove'; -import ReviewsIcon from '~icons/material-symbols/reviews'; - // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { title: 'Components/Common/Button', @@ -24,7 +17,7 @@ const meta = { // More on argTypes: https://storybook.js.org/docs/api/argtypes args: { children: 'Button', - icon: ImagePlaceholderIcon, + icon: ImageSquare, }, argTypes: { children: { control: 'text' }, @@ -106,10 +99,10 @@ export const PrettyColors: Story = { export const CourseButtons: Story = { render: props => (
- -
@@ -129,17 +122,17 @@ export const CourseCatalogActionButtons: Story = { }, render: props => (
- - - -
diff --git a/src/stories/components/DialogProvider.stories.tsx b/src/stories/components/DialogProvider.stories.tsx index b4018544..9213a84e 100644 --- a/src/stories/components/DialogProvider.stories.tsx +++ b/src/stories/components/DialogProvider.stories.tsx @@ -1,11 +1,10 @@ +import { ArrowsVertical } from '@phosphor-icons/react'; import type { Meta, StoryObj } from '@storybook/react'; import { Button } from '@views/components/common/Button'; import DialogProvider, { usePrompt } from '@views/components/common/DialogProvider/DialogProvider'; import Text from '@views/components/common/Text/Text'; import React, { useState } from 'react'; -import MaterialSymbolsExpandAllRoundedIcon from '~icons/material-symbols/expand-all-rounded'; - const meta = { title: 'Components/Common/DialogProvider', component: DialogProvider, @@ -46,7 +45,13 @@ const InnerComponent = () => { }; return ( - ); @@ -86,7 +91,7 @@ const FiveDialogsInnerComponent = () => { }; return ( - ); @@ -121,7 +126,7 @@ const NestedDialogsInnerComponent = () => { }; return ( - ); @@ -161,7 +166,7 @@ const DialogWithOnCloseInnerComponent = () => {

You closed the button below {timesClosed} {timesClosed === 1 ? 'time' : 'times'}

- diff --git a/src/stories/components/Divider.stories.tsx b/src/stories/components/Divider.stories.tsx index c3592e96..39c661d6 100644 --- a/src/stories/components/Divider.stories.tsx +++ b/src/stories/components/Divider.stories.tsx @@ -1,14 +1,9 @@ +import { CalendarDots, ChatText, FileText, Plus, Smiley } from '@phosphor-icons/react'; import type { Meta, StoryObj } from '@storybook/react'; import { Button } from '@views/components/common/Button'; import Divider from '@views/components/common/Divider'; import React from 'react'; -import AddIcon from '~icons/material-symbols/add'; -import CalendarMonthIcon from '~icons/material-symbols/calendar-month'; -import DescriptionIcon from '~icons/material-symbols/description'; -import HappyFaceIcon from '~icons/material-symbols/mood'; -import ReviewsIcon from '~icons/material-symbols/reviews'; - const meta = { title: 'Components/Common/Divider', component: Divider, @@ -59,18 +54,18 @@ export const CourseCatalogActionButtons: Story = { }, render: props => (
- - - -
diff --git a/src/stories/components/FileUpload.stories.tsx b/src/stories/components/FileUpload.stories.tsx index c07d5c1c..c20635f7 100644 --- a/src/stories/components/FileUpload.stories.tsx +++ b/src/stories/components/FileUpload.stories.tsx @@ -1,10 +1,9 @@ +import { ImageSquare } from '@phosphor-icons/react'; import { colorsFlattened } from '@shared/util/themeColors'; import type { Meta, StoryObj } from '@storybook/react'; import FileUpload from '@views/components/common/FileUpload'; import React from 'react'; -import ImagePlaceholderIcon from '~icons/material-symbols/image'; - /** * Stole this straight from Button.stories.tsx to test the input */ @@ -17,7 +16,7 @@ const meta = { tags: ['autodocs'], args: { children: 'Upload File', - icon: ImagePlaceholderIcon, + icon: ImageSquare, }, argTypes: { children: { control: 'text' }, diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx index 999999a8..35a54cf0 100644 --- a/src/views/components/PopupMain.tsx +++ b/src/views/components/PopupMain.tsx @@ -1,5 +1,6 @@ import splashText from '@assets/insideJokes'; import createSchedule from '@pages/background/lib/createSchedule'; +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'; @@ -13,10 +14,7 @@ import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeStrin import useKC_DABR_WASM from 'kc-dabr-wasm'; import React, { useEffect, useState } from 'react'; -import AddSchedule from '~icons/material-symbols/add'; -import CalendarIcon from '~icons/material-symbols/calendar-month'; import Feedback from '~icons/material-symbols/flag'; -import SettingsIcon from '~icons/material-symbols/settings'; import { Button } from './common/Button'; import CourseStatus from './common/CourseStatus'; @@ -94,10 +92,10 @@ export default function PopupMain(): JSX.Element {
diff --git a/src/views/components/calendar/CalendarBottomBar.tsx b/src/views/components/calendar/CalendarBottomBar.tsx index f19a4362..4b650ec9 100644 --- a/src/views/components/calendar/CalendarBottomBar.tsx +++ b/src/views/components/calendar/CalendarBottomBar.tsx @@ -1,3 +1,4 @@ +import { CalendarDots, ImageSquare } from '@phosphor-icons/react'; import type { Course } from '@shared/types/Course'; import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils'; import { Button } from '@views/components/common/Button'; @@ -7,9 +8,6 @@ import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule import clsx from 'clsx'; import React from 'react'; -import CalendarMonthIcon from '~icons/material-symbols/calendar-month'; -import ImageIcon from '~icons/material-symbols/image'; - import CalendarCourseBlock from './CalendarCourseCell'; type CalendarBottomBarProps = { @@ -62,14 +60,14 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
{displayCourses && } - ); } diff --git a/src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx b/src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx index a5fe054c..7673392f 100644 --- a/src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx +++ b/src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx @@ -1,8 +1,7 @@ +import { Hash } from '@phosphor-icons/react'; import { getThemeColorHexByName } from '@shared/util/themeColors'; import React from 'react'; -import TagIcon from '~icons/material-symbols/tag'; - /** * Props for the HexColorEditor component */ @@ -29,7 +28,7 @@ export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorPr style={{ backgroundColor: previewColor }} className='h-5.5 w-5.25 flex items-center justify-center rounded-l-1' > - +
); diff --git a/src/views/components/calendar/CalendarSchedules.tsx b/src/views/components/calendar/CalendarSchedules.tsx index 690b30be..767a6d30 100644 --- a/src/views/components/calendar/CalendarSchedules.tsx +++ b/src/views/components/calendar/CalendarSchedules.tsx @@ -1,4 +1,5 @@ import createSchedule from '@pages/background/lib/createSchedule'; +import { Plus } from '@phosphor-icons/react'; import { UserScheduleStore } from '@shared/storage/UserScheduleStore'; import { Button } from '@views/components/common/Button'; import List from '@views/components/common/List'; @@ -8,8 +9,6 @@ import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit'; import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules'; import React from 'react'; -import AddSchedule from '~icons/material-symbols/add'; - /** * Renders a component that displays a list of schedules. * @@ -33,7 +32,7 @@ export function CalendarSchedules() { MY SCHEDULES
diff --git a/src/views/components/calendar/ImportantLinks.tsx b/src/views/components/calendar/ImportantLinks.tsx index 9a3980c2..38b02b46 100644 --- a/src/views/components/calendar/ImportantLinks.tsx +++ b/src/views/components/calendar/ImportantLinks.tsx @@ -1,9 +1,8 @@ +import { ArrowUpRight } from '@phosphor-icons/react'; import Text from '@views/components/common/Text/Text'; import clsx from 'clsx'; import React from 'react'; -import OutwardArrowIcon from '~icons/material-symbols/arrow-outward'; - type Props = { className?: string; }; @@ -61,7 +60,7 @@ export default function ImportantLinks({ className }: Props): JSX.Element { rel='noreferrer' > {link.text} - + ))} diff --git a/src/views/components/calendar/TeamLinks.tsx b/src/views/components/calendar/TeamLinks.tsx index 8edcbd40..7449ab4f 100644 --- a/src/views/components/calendar/TeamLinks.tsx +++ b/src/views/components/calendar/TeamLinks.tsx @@ -1,11 +1,10 @@ +import { ArrowUpRight } from '@phosphor-icons/react'; import { CRX_PAGES } from '@shared/types/CRXPages'; import { openReportWindow } from '@shared/util/openReportWindow'; import Text from '@views/components/common/Text/Text'; import clsx from 'clsx'; import React from 'react'; -import OutwardArrowIcon from '~icons/material-symbols/arrow-outward'; - type Props = { className?: string; }; @@ -63,7 +62,7 @@ export default function TeamLinks({ className }: Props): JSX.Element { onClick={event => handleClick(link, event)} > {link.text} - + ))} diff --git a/src/views/components/common/Button.tsx b/src/views/components/common/Button.tsx index bb6dba4e..afa3474b 100644 --- a/src/views/components/common/Button.tsx +++ b/src/views/components/common/Button.tsx @@ -1,17 +1,17 @@ +import type { Icon, IconProps } from '@phosphor-icons/react'; import type { ThemeColor } from '@shared/types/ThemeColors'; import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors'; import Text from '@views/components/common/Text/Text'; import clsx from 'clsx'; import React from 'react'; -import type IconComponent from '~icons/material-symbols'; - interface Props { className?: string; style?: React.CSSProperties; variant: 'filled' | 'outline' | 'single'; onClick?: () => void; - icon?: typeof IconComponent; + icon?: Icon; + iconProps?: IconProps; disabled?: boolean; title?: string; color: ThemeColor; @@ -27,6 +27,7 @@ export function Button({ variant, onClick, icon, + iconProps, disabled, title, color, @@ -63,7 +64,7 @@ export function Button({ disabled={disabled} onClick={disabled ? undefined : onClick} > - {Icon && } + {Icon && } {!isIconOnly && ( {children} diff --git a/src/views/components/common/FileUpload.tsx b/src/views/components/common/FileUpload.tsx index 2499714d..4fb057dc 100644 --- a/src/views/components/common/FileUpload.tsx +++ b/src/views/components/common/FileUpload.tsx @@ -1,17 +1,17 @@ +import type { Icon, IconProps } from '@phosphor-icons/react'; import type { ThemeColor } from '@shared/types/ThemeColors'; import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors'; import Text from '@views/components/common/Text/Text'; import clsx from 'clsx'; import React from 'react'; -import type IconComponent from '~icons/material-symbols'; - interface Props { className?: string; style?: React.CSSProperties; variant: 'filled' | 'outline' | 'single'; onChange?: (event: React.ChangeEvent) => void; - icon?: typeof IconComponent; + icon?: Icon; + iconProps?: IconProps; disabled?: boolean; title?: string; color: ThemeColor; @@ -28,6 +28,7 @@ export default function FileUpload({ variant, onChange, icon, + iconProps, disabled, title, color, @@ -62,7 +63,7 @@ export default function FileUpload({ )} title={title} > - {Icon && } + {Icon && } {!isIconOnly && ( {children} diff --git a/src/views/components/common/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock.tsx index 852682be..1edfbd0a 100644 --- a/src/views/components/common/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock.tsx @@ -1,4 +1,5 @@ import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; +import { DotsSixVertical } from '@phosphor-icons/react'; import { background } from '@shared/messages'; import { initSettings, OptionsStore } from '@shared/storage/OptionsStore'; import type { Course } from '@shared/types/Course'; @@ -10,8 +11,6 @@ import Text from '@views/components/common/Text/Text'; import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; -import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; - /** * Props for PopupCourseBlock */ @@ -79,7 +78,7 @@ export default function PopupCourseBlock({ className='flex items-center self-stretch rounded rounded-r-0 cursor-move!' {...dragHandleProps} > - +
{formattedUniqueId} {course.department} {course.number} diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx index 4f1c298a..da8703fa 100644 --- a/src/views/components/common/ScheduleDropdown.tsx +++ b/src/views/components/common/ScheduleDropdown.tsx @@ -1,11 +1,9 @@ import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react'; +import { CaretDown, CaretUp } from '@phosphor-icons/react'; import Text from '@views/components/common/Text/Text'; import useSchedules from '@views/hooks/useSchedules'; import React from 'react'; -import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down'; -import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up'; - /** * Props for the Dropdown component. */ @@ -46,7 +44,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) { - {open ? : } + {open ? : } diff --git a/src/views/components/common/ScheduleListItem.tsx b/src/views/components/common/ScheduleListItem.tsx index 24f07e4b..82adcd9f 100644 --- a/src/views/components/common/ScheduleListItem.tsx +++ b/src/views/components/common/ScheduleListItem.tsx @@ -2,6 +2,7 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'; import deleteSchedule from '@pages/background/lib/deleteSchedule'; import duplicateSchedule from '@pages/background/lib/duplicateSchedule'; import renameSchedule from '@pages/background/lib/renameSchedule'; +import { Circle, DotsSixVertical, DotsThree, RadioButton } from '@phosphor-icons/react'; import type { UserSchedule } from '@shared/types/UserSchedule'; import Text from '@views/components/common/Text/Text'; import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit'; @@ -9,9 +10,6 @@ import useSchedules from '@views/hooks/useSchedules'; import clsx from 'clsx'; import React, { useEffect, useMemo, useState } from 'react'; -import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; -import MoreActionsIcon from '~icons/material-symbols/more-vert'; - import { Button } from './Button'; import DialogProvider, { usePrompt } from './DialogProvider/DialogProvider'; import { ExtensionRootWrapper, styleResetClass } from './ExtensionRoot/ExtensionRoot'; @@ -117,21 +115,21 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
  • - +
    !isEditing && onClick?.(...e)} > -
    + {isActive ? ( + + ) : ( + + )} {isEditing && ( - +
    @@ -168,7 +159,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H - {conflicts.length > 0 && ( - I Understand + I Understand hello ), }); @@ -440,12 +440,7 @@ export default function Settings(): JSX.Element { Erases all schedules and courses you have.

    -
    diff --git a/src/views/hooks/useChangelog.tsx b/src/views/hooks/useChangelog.tsx index 47e6ff94..1f6b8ac2 100644 --- a/src/views/hooks/useChangelog.tsx +++ b/src/views/hooks/useChangelog.tsx @@ -1,10 +1,9 @@ +import { X } from '@phosphor-icons/react'; import ChangelogPopup from '@views/components/common/ChangelogPopup'; import Text from '@views/components/common/Text/Text'; import { useDialog } from '@views/contexts/DialogContext'; import React from 'react'; -import MaterialSymbolsClose from '~icons/material-symbols/close'; - import { Button } from '../components/common/Button'; /** @@ -23,7 +22,7 @@ export default function useChangelog(): () => void { Changelog
    ),