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

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>