chore: cleanup/resolve PR comments

src/views/components/common/Dropdown/Dropdown.tsx

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

src/views/components/common/Icon/Icon.module.scss

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

src/views/components/common/Icon/Icon.tsx

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

src/views/components/common/InfoCard/InfoCard.tsx

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

src/views/components/common/List/List.tsx

@@ -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(() => {

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

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