refactor: replace logo image imports with LogoIcon component (#134)

src/views/components/PopupMain.tsx

@@ -1,4 +1,3 @@
-import logoImage from '@assets/logo.png';
 import { Status } from '@shared/types/Course';
 import { StatusIcon } from '@shared/util/icons';
 import { tailwindColorways } from '@shared/util/storybook';
@@ -17,6 +16,8 @@ import CalendarIcon from '~icons/material-symbols/calendar-month';
 import RefreshIcon from '~icons/material-symbols/refresh';
 import SettingsIcon from '~icons/material-symbols/settings';
 
+import { LogoIcon } from './common/LogoIcon';
+
 /**
  * Renders the main popup component.
  * This component displays the main schedule, courses, and options buttons.
@@ -65,8 +66,8 @@ export default function PopupMain(): JSX.Element {
         <ExtensionRoot>
             <div className='mx-auto max-w-sm rounded bg-white p-4 shadow-md'>
                 <div className='mb-2 flex items-center justify-between bg-white'>
-                    <div className='flex items-center'>
-                        <img src={logoImage} alt='Logo' className='mr-2 h-10 w-10.4' />
+                    <div className='flex items-center gap-2'>
+                        <LogoIcon />
                         <div>
                             <Text as='div' variant='h1-course' className='color-ut-burntorange'>
                                 UT Registration