DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Dhruv
2024-02-26 16:19:21 -06:00
committed by GitHub
parent 8a62d5861c
commit 9ccc43ca27
4 changed files with 43 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/shared/util/storybook.ts Normal file
View File

@@ -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));

5
src/stories/components/List.stories.tsx
View File

@@ -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 { TestColors } from './PopupCourseBlock.stories';
import { tailwindColorways } from 'src/shared/util/storybook';
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',

10
src/stories/components/PopupCourseBlock.stories.tsx
View File

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

106
src/views/components/PopupMain.tsx
View File

@@ -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 { TestColors } from 'src/stories/components/PopupCourseBlock.stories';
import { tailwindColorways } from 'src/shared/util/storybook';
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
style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}
onClick={handleOpenCalendar}
>
<FaCalendarAlt color='white' />
<button className='rounded-lg bg-ut-burntorange p2' onClick={handleOpenCalendar}>
<CalendarIcon className='text-white' />
</button>
<button
style={{
backgroundColor: 'white',
marginLeft: '10px',
borderRadius: '8px',
padding: '8px',
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
}}
onClick={handleOpenOptions}
>
<FaCog color='#C05621' />
<button className='bg-transparent btn' onClick={handleOpenOptions}>
<SettingsIcon className='h-5 w-5 color-ut-black' />
</button>
</div>
</div>
<Divider color='#E2E8F0' type='solid' style={{ margin: '1rem 0' }} />
<div
className='mb-4 rounded-lg bg-white p-2 text-left shadow-inner'
style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}
>
<Text as='div' variant='h2-course' style={{ color: '#DD6B20', fontSize: '1.2rem' }}>
<Divider orientation='horizontal' className='my-4' size='100%' />
<div className='mb-4 border border-ut-offwhite rounded p-2 text-left'>
<Text as='div' variant='h1-course' className='color-ut-burntorange'>
MAIN SCHEDULE:
</Text>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
<Text
as='div'
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 className='flex items-center justify-start gap2.5 color-ut-black'>
<Text variant='h1'>22 HOURS</Text>
<Text variant='h2-course'>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='flex items-center'>
<div
style={{
backgroundColor: '#6B7280',
padding: '1px',
borderRadius: '4px',
marginRight: '3px',
marginLeft: '8px',
}}
>
<div className='mt-4 flex gap-2 border-t border-gray-200 p-4 text-xs'>
<div className='flex items-center gap-1'>
<div className='rounded bg-ut-black p-1px'>
<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
style={{
backgroundColor: '#6B7280',
padding: '1px',
borderRadius: '4px',
marginRight: '3px',
marginLeft: '8px',
}}
>
<div className='flex items-center gap-1'>
<div className='rounded bg-ut-black p-1px'>
<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
style={{
backgroundColor: '#6B7280',
padding: '1px',
borderRadius: '4px',
marginRight: '3px',
marginLeft: '8px',
}}
>
<div className='flex items-center gap-1'>
<div className='rounded bg-ut-black p-1px'>
<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'>
<Text as='div' variant='mini'>
DATA UPDATED ON: 12:00 AM 02/01/2024
</Text>
<FaRedo className='ml-2 h-4 w-4 text-gray-600' />
<div className='inline-flex items-center justify-center text-ut-gray'>
<Text variant='mini'>DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
<RefreshIcon className='ml-2 h-4 w-4 color-gray-600' />
</div>
</div>
</div>