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

@@ -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",

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
 

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<SVGSVGElement> {
     status: StatusType;
 }
@@ -22,11 +19,11 @@ export function StatusIcon(props: StatusIconProps): JSX.Element | null {
 
     switch (status) {
         case Status.WAITLISTED:
-            return <WaitlistIcon {...rest} />;
+            return <ClockUser weight='fill' {...rest} />;
         case Status.CLOSED:
-            return <ClosedIcon {...rest} />;
+            return <LockKey weight='fill' {...rest} />;
         case Status.CANCELLED:
-            return <CancelledIcon {...rest} />;
+            return <Prohibit weight='fill' {...rest} />;
         default:
             return null;
     }

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 => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center' }}>
-            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+            <Button {...props} variant='filled' color='ut-green' icon={Plus}>
                 Add Course
             </Button>
-            <Button {...props} variant='filled' color='theme-red' icon={RemoveIcon}>
+            <Button {...props} variant='filled' color='theme-red' icon={Minus}>
                 Remove Course
             </Button>
         </div>
@@ -129,17 +122,17 @@ export const CourseCatalogActionButtons: Story = {
     },
     render: props => (
         <div style={{ display: 'flex', gap: '15px' }}>
-            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
+            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarDots} />
-            <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
+            <Button {...props} variant='outline' color='ut-blue' icon={ChatText}>
                 RateMyProf
             </Button>
-            <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+            <Button {...props} variant='outline' color='ut-teal' icon={Smiley}>
                 CES
             </Button>
-            <Button {...props} variant='outline' color='ut-orange' icon={DescriptionIcon}>
+            <Button {...props} variant='outline' color='ut-orange' icon={FileText}>
                 Past Syllabi
             </Button>
-            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+            <Button {...props} variant='filled' color='ut-green' icon={Plus}>
                 Add Course
             </Button>
         </div>

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 (
-        <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+        <Button
+            variant='filled'
+            color='ut-burntorange'
+            icon={ArrowsVertical}
+            iconProps={{ className: 'h-4 w-4' }}
+            onClick={myShow}
+        >
             Open Dialog
         </Button>
     );
@@ -86,7 +91,7 @@ const FiveDialogsInnerComponent = () => {
     };
 
     return (
-        <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+        <Button variant='filled' color='ut-burntorange' icon={ArrowsVertical} onClick={myShow}>
             Open Dialogs
         </Button>
     );
@@ -121,7 +126,7 @@ const NestedDialogsInnerComponent = () => {
     };
 
     return (
-        <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+        <Button variant='filled' color='ut-burntorange' icon={ArrowsVertical} onClick={myShow}>
             Open Next Dialog
         </Button>
     );
@@ -161,7 +166,7 @@ const DialogWithOnCloseInnerComponent = () => {
             <h1>
                 You closed the button below {timesClosed} {timesClosed === 1 ? 'time' : 'times'}
             </h1>
-            <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+            <Button variant='filled' color='ut-burntorange' icon={ArrowsVertical} onClick={myShow}>
                 Open Dialog
             </Button>
         </>

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 => (
         <div className='flex items-center gap-3.75'>
-            <Button variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
+            <Button variant='filled' color='ut-burntorange' icon={CalendarDots} />
             <Divider {...props} />
-            <Button variant='outline' color='ut-blue' icon={ReviewsIcon}>
+            <Button variant='outline' color='ut-blue' icon={ChatText}>
                 RateMyProf
             </Button>
-            <Button variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+            <Button variant='outline' color='ut-teal' icon={Smiley}>
                 CES
             </Button>
-            <Button variant='outline' color='ut-orange' icon={DescriptionIcon}>
+            <Button variant='outline' color='ut-orange' icon={FileText}>
                 Past Syllabi
             </Button>
-            <Button variant='filled' color='ut-green' icon={AddIcon}>
+            <Button variant='filled' color='ut-green' icon={Plus}>
                 Add Course
             </Button>
         </div>

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' },

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 {
                     <SmallLogo />
                     <div className='flex items-center gap-2.5'>
                         <button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
-                            <CalendarIcon className='size-6 text-white' />
+                            <CalendarDots className='size-6 text-white' />
                         </button>
                         <button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
-                            <SettingsIcon className='size-6 color-ut-black' />
+                            <GearSix className='size-6 color-ut-black' />
                         </button>
                         <button className='bg-transparent px-2 py-1.25 btn' onClick={openReportWindow}>
                             <Feedback className='size-6 color-ut-black' />
@@ -138,7 +136,7 @@ export default function PopupMain(): JSX.Element {
                             className='h-fit p-0 btn'
                             onClick={handleAddSchedule}
                         >
-                            <AddSchedule className='h-6 w-6' />
+                            <Plus className='h-6 w-6' />
                         </Button>
                     </div>
                 </ScheduleDropdown>

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
             </div>
             <div className='flex items-center screenshot:hidden'>
                 {displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
-                <Button variant='single' color='ut-black' icon={CalendarMonthIcon} onClick={saveAsCal}>
+                <Button variant='single' color='ut-black' icon={CalendarDots} onClick={saveAsCal}>
                     Save as .CAL
                 </Button>
                 <Divider orientation='vertical' size='1rem' className='mx-1.25' />
                 <Button
                     variant='single'
                     color='ut-black'
-                    icon={ImageIcon}
+                    icon={ImageSquare}
                     onClick={() => requestAnimationFrame(() => saveCalAsPng())}
                 >
                     Save as .PNG

src/views/components/calendar/CalendarCourseCell.tsx

@@ -1,3 +1,4 @@
+import { ClockUser, LockKey, Prohibit } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
@@ -7,10 +8,6 @@ import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
-import ClosedIcon from '~icons/material-symbols/lock';
-import WaitlistIcon from '~icons/material-symbols/timelapse';
-import CancelledIcon from '~icons/material-symbols/warning';
-
 /**
  * Props for the CalendarCourseCell component.
  */
@@ -59,11 +56,11 @@ export default function CalendarCourseCell({
     let rightIcon: React.ReactNode | null = null;
     if (enableCourseStatusChips) {
         if (status === Status.WAITLISTED) {
-            rightIcon = <WaitlistIcon className='h-5 w-5' />;
+            rightIcon = <ClockUser weight='fill' className='h-5 w-5' />;
         } else if (status === Status.CLOSED) {
-            rightIcon = <ClosedIcon className='h-5 w-5' />;
+            rightIcon = <LockKey weight='fill' className='h-5 w-5' />;
         } else if (status === Status.CANCELLED) {
-            rightIcon = <CancelledIcon className='h-5 w-5' />;
+            rightIcon = <Prohibit weight='fill' className='h-5 w-5' />;
         }
     }
 

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

@@ -1,8 +1,7 @@
+import { Check } from '@phosphor-icons/react';
 import { getThemeColorHexByName } from '@shared/util/themeColors';
 import React from 'react';
 
-import CheckIcon from '~icons/material-symbols/check';
-
 /**
  * Props for the ColorPatch component
  */
@@ -30,7 +29,7 @@ export default function ColorPatch({ color, isSelected, handleSetSelectedColor }
             style={{ backgroundColor: color }}
             onClick={handleClick}
         >
-            {isSelected && <CheckIcon className='h-5 w-5 color-white' />}
+            {isSelected && <Check className='h-5 w-5 color-white' />}
         </button>
     );
 }

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'
             >
-                <TagIcon className='h-4 w-4 text-color-white' />
+                <Hash className='h-4 w-4 text-color-white' />
             </div>
             <div className='h-5.5 w-[53px] flex flex-1 items-center justify-center border-b border-r border-t rounded-br rounded-tr p-1.25'>
                 <input

src/views/components/calendar/CalendarHeader.tsx

@@ -1,3 +1,4 @@
+import { GearSix, Sidebar } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { Button } from '@views/components/common/Button';
 import CourseStatus from '@views/components/common/CourseStatus';
@@ -8,10 +9,6 @@ import useSchedules from '@views/hooks/useSchedules';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React, { useEffect, useState } from 'react';
 
-import MenuIcon from '~icons/material-symbols/menu';
-// import RefreshIcon from '~icons/material-symbols/refresh';
-import SettingsIcon from '~icons/material-symbols/settings';
-
 /**
  * Opens the options page in a new tab.
  * @returns A promise that resolves when the options page is opened.
@@ -61,7 +58,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
         <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
             <Button
                 variant='single'
-                icon={MenuIcon}
+                icon={Sidebar}
                 color='ut-gray'
                 onClick={onSidebarToggle}
                 className='screenshot:hidden'
@@ -86,7 +83,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
 
                 {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                 <Button variant='single' icon={RedoIcon} color='ut-black' /> */}
-                <Button variant='single' icon={SettingsIcon} color='theme-black' onClick={handleOpenOptions} />
+                <Button variant='single' icon={GearSix} color='theme-black' onClick={handleOpenOptions} />
             </div>
         </div>
     );

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
                 </Text>
                 <Button variant='single' color='theme-black' className='h-fit p-0 btn' onClick={handleAddSchedule}>
-                    <AddSchedule className='h-6 w-6' />
+                    <Plus className='h-6 w-6' />
                 </Button>
             </div>
             <div className='flex flex-col space-y-2.5'>

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'
                 >
                     <Text variant='p'>{link.text}</Text>
-                    <OutwardArrowIcon className='h-3 w-3' />
+                    <ArrowUpRight className='h-4 w-4' />
                 </a>
             ))}
         </article>

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)}
                 >
                     <Text variant='p'>{link.text}</Text>
-                    <OutwardArrowIcon className='h-3 w-3' />
+                    <ArrowUpRight className='h-4 w-4' />
                 </a>
             ))}
         </article>

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 className='h-6 w-6' />}
+            {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
                 <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
                     {children}

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<HTMLInputElement>) => 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 className='h-6 w-6' />}
+            {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
                 <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
                     {children}

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}
             >
-                <DragIndicatorIcon className='h-6 w-6 text-white' />
+                <DotsSixVertical weight='bold' className='h-6 w-6 text-white' />
             </div>
             <Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
                 <span className='px-0.5 font-450'>{formattedUniqueId}</span> {course.department} {course.number}

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) {
                                 </div>
                             </div>
                             <Text className='text-ut-burntorange text-2xl! font-normal!'>
-                                {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
+                                {open ? <CaretDown weight='fill' /> : <CaretUp weight='fill' />}
                             </Text>
                         </DisclosureButton>
 

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 }:
         <div className='rounded bg-white'>
             <li className='w-full flex cursor-pointer items-center text-ut-burntorange'>
                 <div className='h-full cursor-move focusable' {...dragHandleProps}>
-                    <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
+                    <DotsSixVertical
+                        weight='bold'
+                        className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400'
+                    />
                 </div>
                 <div className='group relative flex flex-1 items-center overflow-x-hidden'>
                     <div
                         className='group/circle flex flex-grow items-center gap-1.5 overflow-x-hidden'
                         onClick={(...e) => !isEditing && onClick?.(...e)}
                     >
-                        <div
+                        {isActive ? (
-                            className={clsx(
+                            <RadioButton className='h-7.5 w-7.5 btn-transition active:scale-95' weight='fill' />
-                                'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active/circle:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
+                        ) : (
-                                {
+                            <Circle className='h-7.5 w-7.5 btn-transition active:scale-95' />
-                                    'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive,
-                                }
                         )}
-                        />
                         {isEditing && (
                             <Text
                                 variant='p'
@@ -158,7 +156,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                     <DialogProvider>
                         <Menu>
                             <MenuButton className='invisible h-fit bg-transparent p-0 text-ut-gray btn-transition data-[open]:visible group-hover:visible'>
-                                <MoreActionsIcon className='h-6 w-6' />
+                                <DotsThree weight='bold' className='h-6 w-6' />
                             </MenuButton>
 
                             <MenuItems

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -1,3 +1,4 @@
+import { ArrowUpRight, CalendarDots, ChatText, Copy, FileText, Minus, Plus, Smiley, X } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import type { Course } from '@shared/types/Course';
 import type Instructor from '@shared/types/Instructor';
@@ -10,16 +11,6 @@ import Text from '@views/components/common/Text/Text';
 import { useCalendar } from '@views/contexts/CalendarContext';
 import React from 'react';
 
-import Add from '~icons/material-symbols/add';
-import CalendarMonth from '~icons/material-symbols/calendar-month';
-import CloseIcon from '~icons/material-symbols/close';
-import Copy from '~icons/material-symbols/content-copy';
-import Description from '~icons/material-symbols/description';
-import Mood from '~icons/material-symbols/mood';
-import OpenNewIcon from '~icons/material-symbols/open-in-new';
-import Remove from '~icons/material-symbols/remove';
-import Reviews from '~icons/material-symbols/reviews';
-
 import DisplayMeetingInfo from './DisplayMeetingInfo';
 
 const { openNewTab, addCourse, removeCourse, openCESPage } = background;
@@ -120,7 +111,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                         {formattedUniqueId}
                     </Button>
                     <button className='bg-transparent p-0 text-ut-black btn' onClick={onClose}>
-                        <CloseIcon className='h-7 w-7' />
+                        <X className='h-6 w-6' />
                     </button>
                 </div>
                 <div className='flex items-center gap-2'>
@@ -168,7 +159,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                 <Button
                     variant='filled'
                     color='ut-burntorange'
-                    icon={isInCalendar ? OpenNewIcon : CalendarMonth}
+                    icon={isInCalendar ? ArrowUpRight : CalendarDots}
                     onClick={() => {
                         if (isInCalendar) {
                             openNewTab({
@@ -183,7 +174,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                 <Button
                     variant='outline'
                     color='ut-blue'
-                    icon={Reviews}
+                    icon={ChatText}
                     onClick={handleOpenRateMyProf}
                     disabled={instructors.length === 0}
                 >
@@ -192,19 +183,19 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                 <Button
                     variant='outline'
                     color='ut-teal'
-                    icon={Mood}
+                    icon={Smiley}
                     onClick={handleOpenCES}
                     disabled={instructors.length === 0}
                 >
                     CES
                 </Button>
-                <Button variant='outline' color='ut-orange' icon={Description} onClick={handleOpenPastSyllabi}>
+                <Button variant='outline' color='ut-orange' icon={FileText} onClick={handleOpenPastSyllabi}>
                     Past Syllabi
                 </Button>
                 <Button
                     variant='filled'
                     color={!courseAdded ? 'ut-green' : 'theme-red'}
-                    icon={!courseAdded ? Add : Remove}
+                    icon={!courseAdded ? Plus : Minus}
                     onClick={handleAddOrRemoveCourse}
                 >
                     {!courseAdded ? 'Add Course' : 'Remove Course'}

src/views/components/injected/TableRow/TableRow.tsx

@@ -1,3 +1,4 @@
+import { ChartBar } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
@@ -6,8 +7,6 @@ import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot'
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import RowIcon from '~icons/material-symbols/bar-chart-rounded';
-
 import styles from './TableRow.module.scss';
 
 interface Props {
@@ -119,7 +118,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
                     className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
                     onClick={onClick}
                 >
-                    <RowIcon color='ut-white' />
+                    <ChartBar className='text-ut-white h-4 w-4' weight='fill' />
                 </button>
                 {conflicts.length > 0 && (
                     <ConflictsWithWarning

src/views/components/settings/Settings.tsx

@@ -3,6 +3,7 @@ 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 { Trash } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { downloadBlob } from '@shared/util/downloadBlob';
@@ -26,9 +27,8 @@ import clsx from 'clsx';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import IconoirGitFork from '~icons/iconoir/git-fork';
-// import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';
-import DeleteForeverIcon from '~icons/material-symbols/delete-forever';
 
+// import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';;
 import FileUpload from '../common/FileUpload';
 import { useMigrationDialog } from '../common/MigrationDialog';
 // import RefreshIcon from '~icons/material-symbols/refresh';
@@ -202,7 +202,7 @@ export default function Settings(): JSX.Element {
                         accept();
                     }}
                 >
-                    I Understand
+                    I Understand hello
                 </Button>
             ),
         });
@@ -440,12 +440,7 @@ export default function Settings(): JSX.Element {
                                             Erases all schedules and courses you have.
                                         </p>
                                     </div>
-                                    <Button
+                                    <Button variant='outline' color='theme-red' icon={Trash} onClick={handleEraseAll}>
-                                        variant='outline'
-                                        color='theme-red'
-                                        icon={DeleteForeverIcon}
-                                        onClick={handleEraseAll}
-                                    >
                                         Erase All
                                     </Button>
                                 </div>

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
                     </Text>
                     <Button variant='single' onClick={close} color='theme-black' className='p-1 text-gray-700'>
-                        <MaterialSymbolsClose className='h-7 w-7' />
+                        <X className='h-6 w-6' />
                     </Button>
                 </div>
             ),