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/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