Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Feb 26, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dee20c6
feat: fix icons on PopupMain
DhruvArora-03 Feb 25, 2024
c9af9fb
fix: use text-white
DhruvArora-03 Feb 25, 2024
d2c87b8
fix: move TestColors
DhruvArora-03 Feb 25, 2024
580a8c7
fix: convert to tailwind
DhruvArora-03 Feb 25, 2024
24920c3
fix: finish moving TestColors out
DhruvArora-03 Feb 25, 2024
02fe3b5
chore: add path alias
doprz Feb 25, 2024
c9a7c01
chore: lint PR
doprz Feb 25, 2024
582fe20
feat: create storybook.ts and move tailwindColorways there
DhruvArora-03 Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/shared/util/storybook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 3 deletions src/stories/components/List.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
DhruvArora-03 marked this conversation as resolved.
Show resolved Hide resolved

const numberOfCourses = 5;

Expand Down Expand Up @@ -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',
Expand Down
10 changes: 2 additions & 8 deletions src/stories/components/PopupCourseBlock.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
DhruvArora-03 marked this conversation as resolved.
Show resolved Hide resolved

/**
* Represents an example course.
Expand Down Expand Up @@ -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) => (
DhruvArora-03 marked this conversation as resolved.
Show resolved Hide resolved
<PopupCourseBlock key={color.primaryColor} course={ExampleCourse} colors={color} />
))}
</div>
Expand Down
106 changes: 30 additions & 76 deletions src/views/components/PopupMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
DhruvArora-03 marked this conversation as resolved.
Show resolved Hide resolved

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.
Expand All @@ -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]} />
DhruvArora-03 marked this conversation as resolved.
Show resolved Hide resolved
));

const handleOpenOptions = async () => {
Expand All @@ -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 */}
Expand All @@ -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'>
Expand All @@ -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>
Expand Down
Loading