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/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='outline' color='ut-blue' icon={ReviewsIcon}>
+            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarDots} />
+            <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' },