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

chore: cleanup/resolve PR comments

Browse Source
This commit is contained in:
Razboy20
2024-03-06 15:13:11 -06:00
parent 0c44849e15
commit 8f360206fb
36 changed files with 380 additions and 26853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@ import Text from '@views/components/common/Text/Text';
import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions';
import useSchedules, { switchSchedule } from '@views/hooks/useSchedules';
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
import styles from '@views/styles/popupMain.module.scss';
import clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import CalendarIcon from '~icons/material-symbols/calendar-month';
@@ -97,26 +97,31 @@ export default function PopupMain(): JSX.Element {
{`${activeSchedule.name}`}:
</Text>
<div className='flex items-center justify-start gap2.5 color-ut-black'>
<Text variant='h1'>{`${activeSchedule.hours} HOURS`}</Text>
<Text variant='h2-course'>{`${activeSchedule.courses.length} Courses`}</Text>
<Text variant='h1'>{activeSchedule.hours} HOURS</Text>
<Text variant='h2-course'>{activeSchedule.courses.length} Courses</Text>
</div>
</div>
<div className={`${styles.arrow} ${isPopupVisible ? styles.expanded : ''}`} />
<div
className={clsx(
'ml-auto inline-block h-0 w-0 border-l-5 border-r-5 border-t-5 border-transparent border-ut-orange transition-transform duration-300 ease-in-out',
{ 'rotate-180': isPopupVisible }
)}
/>
</div>
{isPopupVisible && (
<div ref={popupRef}>
{nonActiveSchedules.map(schedule => (
<div
key={schedule.name}
className={styles.scheduleItem}
className='my-2 cursor-pointer border border-gray-300 rounded-md border-solid bg-white py-4 shadow-sm hover:bg-gray-100'
onClick={() => selectSchedule(schedule)}
>
<Text as='div' variant='h1-course' className='color-ut-burntorange'>
{schedule.name}:
</Text>
<div className='flex items-center justify-start gap2.5 color-ut-black'>
<Text variant='h1'>{`${schedule.hours} HOURS`}</Text>
<Text variant='h2-course'>{`${schedule.courses.length} Courses`}</Text>
<Text variant='h1'>{schedule.hours} HOURS</Text>
<Text variant='h2-course'>{schedule.courses.length} Courses</Text>
</div>
</div>
))}
@@ -127,8 +132,6 @@ export default function PopupMain(): JSX.Element {
draggableElements={activeSchedule?.courses.map((course, i) => (
<PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
))}
itemHeight={100}
listHeight={500}
listWidth={350}
gap={12}
/>

13
src/views/components/calendar/Calendar/Calendar.tsx
View File

@@ -1,5 +1,5 @@
import type { Course } from '@shared/types/Course';
import { CalendarBottomBar } from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
@@ -9,8 +9,6 @@ import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSched
import React, { useRef } from 'react';
import { ExampleCourse } from 'src/stories/components/PopupCourseBlock.stories';
export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
/**
* A reusable chip component that follows the design system of the extension.
* @returns
@@ -23,9 +21,10 @@ export default function Calendar(): JSX.Element {
return (
<div className='flex flex-col'>
<CalendarHeader
totalHours={activeSchedule.hours}
scheduleName={activeSchedule.name}
totalCourses={activeSchedule?.courses.length}
// TODO: implement props
// totalHours={activeSchedule.hours}
// scheduleName={activeSchedule.name}
// totalCourses={activeSchedule?.courses.length}
/>
<div className='h-screen w-full flex flex-col md:flex-row'>
<div className='min-h-[30%] flex flex-col items-start gap-2.5 p-5 pl-7'>
@@ -43,7 +42,7 @@ export default function Calendar(): JSX.Element {
</div>
</div>
</div>
{/* TODO: Doesn't work when exampleCourse is replaced with an actual course through setCourse.
{/* TODO: Doesn't work when exampleCourse is replaced with an actual course through setCourse.
Check CalendarGrid.tsx and AccountForCourseConflicts for an example */}
{course ? (
<CourseCatalogInjectedPopup

6
src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
View File

@@ -15,10 +15,10 @@ import UndoIcon from '~icons/material-symbols/undo';
/**
* Opens the options page in a new tab.
* @returns {Promise<void>} A promise that resolves when the options page is opened.
* @returns A promise that resolves when the options page is opened.
*/
const handleOpenOptions = async () => {
const url = chrome.runtime.getURL('/src/pages/options/index.html');
const handleOpenOptions = async (): Promise<void> => {
const url = chrome.runtime.getURL('/options.html');
await openTabFromContentScript(url);
};

2
src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
View File

@@ -77,7 +77,7 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
</div>
</div>
<div className='flex flex-col space-y-2.5'>
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
<List gap={10} draggableElements={scheduleComponents} listWidth={240} />
<input
type='text'
placeholder='Enter new schedule'

8
src/views/components/common/Dropdown/Dropdown.tsx
View File

@@ -97,13 +97,7 @@ export default function Dropdown(props: Props) {
afterLeave={toggleSwitch}
>
<Disclosure.Panel>
<List
draggableElements={scheduleComponents}
itemHeight={30}
listHeight={30}
listWidth={240}
gap={10}
/>
<List draggableElements={scheduleComponents} listWidth={240} gap={10} />
</Disclosure.Panel>
</Transition>
</Disclosure>

18
src/views/components/common/Icon/Icon.module.scss
View File

@@ -1,18 +0,0 @@
@use 'src/views/styles/fonts.module.scss';
.icon {
font-family: 'Material Icons Round';
font-weight: fonts.$normal_weight;
font-style: normal;
font-size: fonts.$medium_size;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

48
src/views/components/common/Icon/Icon.tsx
View File

@@ -1,48 +0,0 @@
import type { Color } from '@views/styles/colors.module.scss';
import colors from '@views/styles/colors.module.scss';
import type { Size } from '@views/styles/fonts.module.scss';
import fonts from '@views/styles/fonts.module.scss';
import clsx from 'clsx';
import React from 'react';
import styles from './Icon.module.scss';
import type { MaterialIconCode } from './MaterialIcons';
/**
* Props for the Icon component.
*/
export type Props = {
name: MaterialIconCode;
className?: string;
style?: React.CSSProperties;
color?: Color;
backgroundColor?: Color;
weight?: 'normal' | 'bold';
size?: Size | number;
onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
testId?: string;
};
/**
* This is a reusable Icon component that uses the Material Icons Round font internally
* You can find the list of icons here: https://fonts.google.com/icons?selected=Material+Icons+Round
*/
export default function Icon(props: Props): JSX.Element {
const style = props.style || {};
style.color ??= colors?.[props.color ?? 'charcoal'];
style.backgroundColor ??= props.backgroundColor ? colors?.[props.backgroundColor] : undefined;
style.fontSize ??= fonts?.[`${props.size}_size`];
style.fontWeight ??= fonts?.[`${props.weight ?? 'normal'}_weight`];
return (
<span
data-testid={props.testId}
style={style}
className={clsx(styles.icon, props.className)}
onClick={props.onClick}
>
{props.name}
</span>
);
}

2200
src/views/components/common/Icon/MaterialIcons.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

26
src/views/components/common/InfoCard/InfoCard.tsx
View File

@@ -12,30 +12,12 @@ interface Props {
*/
export default function InfoCard({ titleText, bodyText }: React.PropsWithChildren<Props>): JSX.Element {
return (
<div
className='w-50 flex flex-col items-start justify-center border rounded p-4'
style={{
border: '1px solid #D6D2C4',
background: '#FFF', // White
}}
>
<div className='flex flex-col items-start self-stretch gap-1.5'>
<Text
variant='h4'
as='span'
style={{
color: '#F8971F', // Orange
}}
>
<div className='w-50 border rounded p-4 border-gray-300 bg-white'>
<div className='flex flex-col gap-1.5'>
<Text variant='h4' as='span' className='text-ut-orange'>
{titleText}
</Text>
<Text
variant='small'
as='span'
style={{
color: '#333F48', // Black
}}
>
<Text variant='small' as='span' className='text-ut-black'>
{bodyText}
</Text>
</div>

33
src/views/components/common/List/List.tsx
View File

@@ -1,11 +1,9 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import type { ReactElement } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { satisfies } from 'semver';
/*
* Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
*
*/
/**
@@ -14,8 +12,6 @@ import { satisfies } from 'semver';
export interface ListProps {
draggableElements: any[]; // TODO: Will later define draggableElements based on what types
// of components are draggable.
itemHeight: number;
listHeight: number;
listWidth: number;
gap: number; // Impacts the spacing between items in the list
}
@@ -56,40 +52,13 @@ function Item({ provided, item, style, isDragging /* , gap */ }) {
);
}
interface RowProps {
data: any; // DraggableElements[]; Need to define DraggableElements interface once those components are ready
index: number;
style: React.CSSProperties;
}
const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style }) => {
const item = items[index];
const adjustedStyle = {
...style,
height: `calc(${style.height}px - ${gap}px)`, // Reduce the height by gap to accommodate the margin
marginBottom: `${gap}px`, // Add gap as bottom margin
};
return (
<Draggable draggableId={item.id} index={index} key={item.id}>
{/* @ts-ignore */}
{provided => <Item provided={provided} item={item} style={adjustedStyle} gap={gap} />}
</Draggable>
);
});
/**
* `List` is a functional component that displays a course meeting.
*
* @example
* <List draggableElements={elements} />
*/
export default function List({
draggableElements,
itemHeight,
listHeight,
listWidth,
gap = 12,
}: ListProps): JSX.Element {
export default function List({ draggableElements, listWidth, gap = 12 }: ListProps): JSX.Element {
const [items, setItems] = useState(() => initial(0, draggableElements));
useEffect(() => {

10
src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
View File

@@ -22,13 +22,13 @@ export default function ScheduleTotalHoursAndCourses({
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
return (
<div className='min-w-64 flex content-center items-baseline gap-2 whitespace-nowrap uppercase'>
<Text className='text-[#BF5700]' variant='h1' as='span'>
<Text className='text-ut-burntorange' variant='h1' as='span'>
{`${scheduleName}: `}
</Text>
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
{`${totalHours} HOURS`}
<Text variant='h4' as='span' className='text-[#333F48]'>
{`${totalCourses} courses`}
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-theme-black'>
{totalHours} HOURS
<Text variant='h4' as='span' className='text-ut-black'>
{totalCourses} courses
</Text>
</Text>
</div>

10
src/views/styles/fonts.module.scss
View File

@@ -25,16 +25,6 @@
font-style: normal;
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-display: block;
font-weight: 400;
src: url('@public/fonts/material-icons.woff2') format('woff2');
}
$normal_weight: 500; // Used by <Icon>, will be removed later
$medium_size: 16px;
:export {

28
src/views/styles/popupMain.module.scss
View File

@@ -1,28 +0,0 @@
.arrow {
margin-left: auto; // Pushes the arrow to the right
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid orange; // Use your desired color for the arrow
transition: transform 0.3s ease; // smooth transition for rotation
}
.expanded {
transform: rotate(180deg);
}
.scheduleItem {
border: 1px solid #ccc; /* Example border */
margin: 8px 0; /* Increased spacing */
padding: 10px; /* Inner spacing */
border-radius: 4px; /* Rounded corners */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
background-color: #fff; /* Ensure background contrast */
cursor: pointer;
&:hover {
background-color: #f9f9f9; /* Hover effect */
}
}