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'>
+                    <div className='flex items-center gap-2'>
-                        <img src={logoImage} alt='Logo' className='mr-2 h-10 w-10.4' />
+                        <LogoIcon />
                         <div>
                             <Text as='div' variant='h1-course' className='color-ut-burntorange'>
                                 UT Registration

src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

@@ -1,8 +1,8 @@
-import calIcon from '@assets/logo.png';
 import { Status } from '@shared/types/Course';
 import { Button } from '@views/components/common/Button/Button';
 import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
 import Divider from '@views/components/common/Divider/Divider';
+import { LogoIcon } from '@views/components/common/LogoIcon';
 import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
 import Text from '@views/components/common/Text/Text';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
@@ -34,7 +34,7 @@ export default function CalendarHeader(): JSX.Element {
                     <div className='flex gap-1'>
                         <Button className='self-center' variant='single' icon={MenuIcon} color='ut-gray' />
                         <div className='flex items-center gap-2'>
-                            <img src={calIcon} className='max-w-[48px] min-w-[48px]' alt='UT Registration Plus Logo' />
+                            <LogoIcon />
                             <div className='flex flex-col whitespace-nowrap'>
                                 <Text className='text-lg text-ut-burntorange font-medium'>UT Registration</Text>
                                 <Text className='text-lg text-ut-orange font-medium'>Plus</Text>

src/views/components/common/LogoIcon.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+
+export function LogoIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <circle cx='20' cy='20' r='20' fill='#BF5700' />
+            <circle cx='20' cy='20' r='15.5' stroke='white' strokeWidth='3' />
+            <rect x='18' y='10' width='4' height='19.5489' fill='white' />
+            <rect x='10' y='22' width='4' height='19.5489' transform='rotate(-90 10 22)' fill='white' />
+        </svg>
+    );
+}