feat: fix icons on PopupMain and convert to tailwind (#108)

* feat: fix icons on PopupMain

* fix: use text-white

* fix: move TestColors

* fix: convert to tailwind

* fix: finish moving TestColors out

* chore: add path alias

* chore: lint PR

* feat: create storybook.ts and move tailwindColorways there

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/shared/util/storybook.ts

@@ -0,0 +1,9 @@
+import { theme } from 'unocss/preset-mini';
+
+import { getCourseColors } from './colors';
+
+export const tailwindColorways = Object.keys(theme.colors)
+    // check that the color is a colorway (is an object)
+    .filter(color => typeof theme.colors[color] === 'object')
+    .slice(0, 17)
+    .map(color => getCourseColors(color as keyof typeof theme.colors));

src/stories/components/List.stories.tsx

@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import List from '@views/components/common/List/List';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
-
+import { tailwindColorways } from 'src/shared/util/storybook';
-import { TestColors } from './PopupCourseBlock.stories';
 
 const numberOfCourses = 5;
 
@@ -71,7 +70,7 @@ export const GenerateCourses = count => {
 const exampleCourses = GenerateCourses(numberOfCourses);
 const generateCourseBlocks = (exampleCourses, colors) =>
     exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, TestColors);
+export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, tailwindColorways);
 
 const meta = {
     title: 'Components/Common/List',

src/stories/components/PopupCourseBlock.stories.tsx

@@ -5,7 +5,7 @@ import { getCourseColors } from '@shared/util/colors';
 import type { Meta, StoryObj } from '@storybook/react';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
-import { theme } from 'unocss/preset-mini';
+import { tailwindColorways } from 'src/shared/util/storybook';
 
 /**
  * Represents an example course.
@@ -101,16 +101,10 @@ export const Variants: Story = {
     ),
 };
 
-export const TestColors = Object.keys(theme.colors)
-    // check that the color is a colorway (is an object)
-    .filter(color => typeof theme.colors[color] === 'object')
-    .slice(0, 17)
-    .map(color => getCourseColors(color as keyof typeof theme.colors));
-
 export const AllColors: Story = {
     render: props => (
         <div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
-            {TestColors.map((color, i) => (
+            {tailwindColorways.map((color, i) => (
                 <PopupCourseBlock key={color.primaryColor} course={ExampleCourse} colors={color} />
             ))}
         </div>

src/views/components/PopupMain.tsx

@@ -10,8 +10,11 @@ import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInje
 import useSchedules from '@views/hooks/useSchedules';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React from 'react';
-import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
+import { tailwindColorways } from 'src/shared/util/storybook';
-import { TestColors } from 'src/stories/components/PopupCourseBlock.stories';
+
+import CalendarIcon from '~icons/material-symbols/calendar-month';
+import RefreshIcon from '~icons/material-symbols/refresh';
+import SettingsIcon from '~icons/material-symbols/settings';
 
 /**
  * Renders the main popup component.
@@ -21,7 +24,7 @@ export default function PopupMain() {
     const [activeSchedule] = useSchedules();
 
     const draggableElements = activeSchedule?.courses.map((course, i) => (
-        <PopupCourseBlock key={course.uniqueId} course={course} colors={TestColors[i]} />
+        <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
     ));
 
     const handleOpenOptions = async () => {
@@ -32,59 +35,36 @@ export default function PopupMain() {
 
     return (
         <ExtensionRoot>
-            <div className='mx-auto max-w-sm rounded-lg bg-white p-4 shadow-md'>
+            <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' style={{ width: '40px', height: '40px', marginRight: '8px' }} />
+                        <img src={logoImage} alt='Logo' className='mr-2 h-10 w-10.4' />
                         <div>
-                            <Text as='div' variant='h1-course' style={{ color: '#bf5700', fontSize: '1.3rem' }}>
+                            <Text as='div' variant='h1-course' className='color-ut-burntorange'>
                                 UT Registration
                             </Text>
-                            <Text as='div' variant='h1-course' style={{ color: '#f8971f', fontSize: '1.3rem' }}>
+                            <Text as='div' variant='h1-course' className='color-ut-orange'>
                                 Plus
                             </Text>
                         </div>
                     </div>
                     <div className='flex items-center'>
-                        <button
+                        <button className='rounded-lg bg-ut-burntorange p2' onClick={handleOpenCalendar}>
-                            style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}
+                            <CalendarIcon className='text-white' />
-                            onClick={handleOpenCalendar}
-                        >
-                            <FaCalendarAlt color='white' />
                         </button>
-                        <button
+                        <button className='bg-transparent btn' onClick={handleOpenOptions}>
-                            style={{
+                            <SettingsIcon className='h-5 w-5 color-ut-black' />
-                                backgroundColor: 'white',
-                                marginLeft: '10px',
-                                borderRadius: '8px',
-                                padding: '8px',
-                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-                            }}
-                            onClick={handleOpenOptions}
-                        >
-                            <FaCog color='#C05621' />
                         </button>
                     </div>
                 </div>
-                <Divider color='#E2E8F0' type='solid' style={{ margin: '1rem 0' }} />
+                <Divider orientation='horizontal' className='my-4' size='100%' />
-                <div
+                <div className='mb-4 border border-ut-offwhite rounded p-2 text-left'>
-                    className='mb-4 rounded-lg bg-white p-2 text-left shadow-inner'
+                    <Text as='div' variant='h1-course' className='color-ut-burntorange'>
-                    style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}
-                >
-                    <Text as='div' variant='h2-course' style={{ color: '#DD6B20', fontSize: '1.2rem' }}>
                         MAIN SCHEDULE:
                     </Text>
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
+                    <div className='flex items-center justify-start gap2.5 color-ut-black'>
-                        <Text
+                        <Text variant='h1'>22 HOURS</Text>
-                            as='div'
+                        <Text variant='h2-course'>8 Courses</Text>
-                            variant='h1'
-                            style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}
-                        >
-                            22 HOURS
-                        </Text>
-                        <Text as='div' variant='h2-course' style={{ fontSize: '1.2rem' }}>
-                            8 Courses
-                        </Text>
                     </div>
                 </div>
                 {/* Integrate the List component here */}
@@ -97,49 +77,25 @@ export default function PopupMain() {
                         gap={12} // Spacing between items
                     />
                 ) : null}
-                <div className='mt-4 flex justify-between border-t border-gray-200 p-4 text-xs'>
+                <div className='mt-4 flex gap-2 border-t border-gray-200 p-4 text-xs'>
-                    <div className='flex items-center'>
+                    <div className='flex items-center gap-1'>
-                        <div
+                        <div className='rounded bg-ut-black p-1px'>
-                            style={{
-                                backgroundColor: '#6B7280',
-                                padding: '1px',
-                                borderRadius: '4px',
-                                marginRight: '3px',
-                                marginLeft: '8px',
-                            }}
-                        >
                             <StatusIcon status={Status.WAITLISTED} className='h-5 w-5 text-white' />
                         </div>
                         <Text as='span' variant='mini'>
                             WAITLISTED
                         </Text>
                     </div>
-                    <div className='flex items-center'>
+                    <div className='flex items-center gap-1'>
-                        <div
+                        <div className='rounded bg-ut-black p-1px'>
-                            style={{
-                                backgroundColor: '#6B7280',
-                                padding: '1px',
-                                borderRadius: '4px',
-                                marginRight: '3px',
-                                marginLeft: '8px',
-                            }}
-                        >
                             <StatusIcon status={Status.CLOSED} className='h-5 w-5 text-white' />
                         </div>
                         <Text as='span' variant='mini'>
                             CLOSED
                         </Text>
                     </div>
-                    <div className='flex items-center'>
+                    <div className='flex items-center gap-1'>
-                        <div
+                        <div className='rounded bg-ut-black p-1px'>
-                            style={{
-                                backgroundColor: '#6B7280',
-                                padding: '1px',
-                                borderRadius: '4px',
-                                marginRight: '3px',
-                                marginLeft: '8px',
-                            }}
-                        >
                             <StatusIcon status={Status.CANCELLED} className='h-5 w-5 text-white' />
                         </div>
                         <Text as='span' variant='mini'>
@@ -148,11 +104,9 @@ export default function PopupMain() {
                     </div>
                 </div>
                 <div className='mt-2 text-center text-xs'>
-                    <div className='inline-flex items-center justify-center'>
+                    <div className='inline-flex items-center justify-center text-ut-gray'>
-                        <Text as='div' variant='mini'>
+                        <Text variant='mini'>DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
-                            DATA UPDATED ON: 12:00 AM 02/01/2024
+                        <RefreshIcon className='ml-2 h-4 w-4 color-gray-600' />
-                        </Text>
-                        <FaRedo className='ml-2 h-4 w-4 text-gray-600' />
                     </div>
                 </div>
             </div>