Merge branch 'hackathon' of https://github.com/UT-Developers/UT-Registration-Plus into hackathon

src/shared/util/themeColors.ts

@@ -0,0 +1,60 @@
+export const colors = {
+    ut: {
+        'burnt-orange': '#BF5700',
+        black: '#333F48',
+        orange: '#f8971f',
+        yellow: '#ffd600',
+        'light-green': '#a6cd57',
+        green: '#579d42',
+        teal: '#00a9b7',
+        blue: '#005f86',
+        gray: '#9cadb7',
+        'off-white': '#d6d2c4',
+        concrete: '#95a5a6',
+    },
+    theme: {
+        red: '#af2e2d',
+        black: '#1a2024',
+    },
+} as const;
+
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends Record<string, any> ? `${string & K}-${string & keyof T[K]}` : never;
+}[keyof T];
+
+/**
+ * A union of all colors in the theme
+ */
+export type ThemeColor = NestedKeys<typeof colors>;
+
+export const colorsFlattened = Object.entries(colors).reduce(
+    (acc, [prefix, group]) => {
+        for (const [name, hex] of Object.entries(group)) {
+            acc[`${prefix}-${name}`] = hex;
+        }
+        return acc;
+    },
+    {} as Record<ThemeColor, string>
+);
+
+const hexToRgb = (hex: string) =>
+    hex.match(/[0-9a-f]{2}/gi).map(partialHex => parseInt(partialHex, 16)) as [number, number, number];
+
+const colorsFlattenedRgb = Object.fromEntries(
+    Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRgb(hex)])
+) as Record<ThemeColor, ReturnType<typeof hexToRgb>>;
+
+/**
+ * Retrieves the hexadecimal color value by name from the theme.
+ *
+ * @param name - The name of the theme color.
+ * @returns The hexadecimal color value.
+ */
+export const getThemeColorHexByName = (name: ThemeColor): string => colorsFlattened[name];
+
+/**
+ *
+ * @param name - The name of the theme color.
+ * @returns An array of the red, green, and blue values, respectively
+ */
+export const getThemeColorRgbByName = (name: ThemeColor) => colorsFlattenedRgb[name];

src/stories/components/Button.stories.tsx

@@ -1,24 +1,33 @@
 import { Button } from 'src/views/components/common/Button/Button';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { colorsFlattened } from 'src/shared/util/themeColors';
+import ImagePlaceholderIcon from '~icons/material-symbols/image';
+import AddIcon from '~icons/material-symbols/add';
+import RemoveIcon from '~icons/material-symbols/remove';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+import ReviewsIcon from '~icons/material-symbols/reviews';
+import HappyFaceIcon from '~icons/material-symbols/mood';
+import DescriptionIcon from '~icons/material-symbols/description';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/Common/Button',
+    title: 'Components/Common/Button',
-  component: Button,
+    component: Button,
-  parameters: {
+    parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+        layout: 'centered',
-  },
+    },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+    tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  args: {
+    args: {
-    children: 'Button',
+        children: 'Button',
-  },
+        icon: ImagePlaceholderIcon,
-  argTypes: {
+    },
-    children: { control: 'text' },
+    argTypes: {
-  },
+        children: { control: 'text' },
+    },
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -26,72 +35,112 @@ type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
-  args: {},
+    args: {
+        variant: 'filled',
+        color: 'ut-black',
+    },
 };
 
 export const Disabled: Story = {
-  args: {
+    args: {
-    disabled: true,
+        variant: 'filled',
-  },
+        color: 'ut-black',
-};
+        disabled: true,
-
-export const Grid: Story = {
-  render: props => (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' />
-        <Button {...props} type='secondary' />
-        <Button {...props} type='tertiary' />
-        <Button {...props} type='danger' />
-        <Button {...props} type='warning' />
-        <Button {...props} type='success' />
-        <Button {...props} type='info' />
-      </div>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' disabled />
-        <Button {...props} type='secondary' disabled />
-        <Button {...props} type='tertiary' disabled />
-        <Button {...props} type='danger' disabled />
-        <Button {...props} type='warning' disabled />
-        <Button {...props} type='success' disabled />
-        <Button {...props} type='info' disabled />
-      </div>
-    </div>
-  ),
-};
-
-
-// TODO: Actually show the buttons as they appear in the design
-export const CourseButtons: Story = {
-  args: {
-    children: 'Add Course',
-  },
-  render: props => (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' />
-        <Button {...props} type='secondary' />
-        <Button {...props} type='tertiary' />
-        <Button {...props} type='danger' />
-        <Button {...props} type='warning' />
-        <Button {...props} type='success' />
-        <Button {...props} type='info' />
-      </div>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' disabled />
-        <Button {...props} type='secondary' disabled />
-        <Button {...props} type='tertiary' disabled />
-        <Button {...props} type='danger' disabled />
-        <Button {...props} type='warning' disabled />
-        <Button {...props} type='success' disabled />
-        <Button {...props} type='info' disabled />
-      </div>
-    </div>
-  ),
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
     },
-  },
+};
+
+// @ts-ignore
+export const Grid: Story = {
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' />
+                <Button {...props} variant='outline' color='ut-black' />
+                <Button {...props} variant='single' color='ut-black' />
+            </div>
+
+            <hr />
+
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' disabled />
+                <Button {...props} variant='outline' color='ut-black' disabled />
+                <Button {...props} variant='single' color='ut-black' disabled />
+            </div>
+        </div>
+    ),
+};
+
+export const PrettyColors: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => {
+        const colorsNames = Object.keys(colorsFlattened) as (keyof typeof colorsFlattened)[];
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                {colorsNames.map(color => (
+                    <div style={{ display: 'flex', gap: '15px' }} key={color}>
+                        <Button {...props} variant='filled' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='outline' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='single' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='filled' color={color} />
+                        <Button {...props} variant='outline' color={color} />
+                        <Button {...props} variant='single' color={color} />
+                    </div>
+                ))}
+            </div>
+        );
+    },
+};
+
+// @ts-ignore
+export const CourseButtons: Story = {
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center' }}>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+            <Button {...props} variant='filled' color='theme-red' icon={RemoveIcon}>
+                Remove Course
+            </Button>
+        </div>
+    ),
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
+        },
+    },
+};
+
+export const CourseCatalogActionButtons: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', gap: '15px' }}>
+            <Button {...props} variant='filled' color='ut-burnt-orange' icon={CalendarMonthIcon} />
+            <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
+                RateMyProf
+            </Button>
+            <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+                CES
+            </Button>
+            <Button {...props} variant='outline' color='ut-yellow' icon={DescriptionIcon}>
+                Past Syllabi
+            </Button>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+        </div>
+    ),
 };

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

@@ -1,67 +0,0 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
-.button {
-    background-color: #000;
-    color: #fff;
-    padding: 10px;
-    margin: 10px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-    font-family: 'Inter';
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-        background-color: #fff;
-        color: #000;
-    }
-
-    &:active {
-        transform: scale(0.96);
-    }
-
-    &.disabled {
-        cursor: not-allowed !important;
-        opacity: 0.5 !important;
-
-        &:active {
-            transform: unset;
-        }
-    }
-
-    @each $color,
-        $value
-            in (
-                primary: colors.$burnt_orange,
-                secondary: colors.$charcoal,
-                tertiary: colors.$bluebonnet,
-                danger: colors.$speedway_brick,
-                warning: colors.$tangerine,
-                success: colors.$turtle_pond,
-                info: colors.$turquoise
-            )
-    {
-        &.#{$color} {
-            background-color: $value;
-            color: #fff;
-
-            &:hover {
-                background-color: color.adjust($value, $lightness: 10%);
-            }
-
-            &:focus-visible,
-            &:active {
-                background-color: color.adjust($value, $lightness: -10%);
-            }
-
-            &.disabled {
-                background-color: $value !important;
-            }
-        }
-    }
-}

src/views/components/common/Button/Button.tsx

@@ -1,15 +1,18 @@
 import clsx from 'clsx';
 import React from 'react';
-import styles from './Button.module.scss';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
+import type IconComponent from '~icons/material-symbols';
+import Text from '../Text/Text';
 
 interface Props {
     className?: string;
     style?: React.CSSProperties;
+    variant: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    icon?: typeof IconComponent;
     disabled?: boolean;
     title?: string;
-    testId?: string;
+    color: ThemeColor;
 }
 
 /**
@@ -17,26 +20,57 @@ interface Props {
  * @returns
  */
 export function Button({
-    style,
     className,
-    type,
+    style,
-    testId,
+    variant,
-    children,
+    onClick,
+    icon,
     disabled,
     title,
-    onClick,
+    color,
+    children,
 }: React.PropsWithChildren<Props>): JSX.Element {
+    const Icon = icon;
+    const isIconOnly = !children && !!icon;
+    const colorHex = getThemeColorHexByName(color);
+    const colorRgb = getThemeColorRgbByName(color).join(' ');
+
     return (
         <button
-            style={style}
+            style={
-            data-testid={testId}
+                {
-            className={clsx(styles.button, className, styles[type ?? 'primary'], {
+                    ...style,
-                [styles.disabled]: disabled,
+                    '--color': colorHex,
-            })}
+                    '--bg-color-8': `rgba(${colorRgb} / 0.08)`,
+                    '--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
+                    '--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
+                } as React.CSSProperties
+            }
+            className={clsx(
+                'btn',
+                {
+                    'disabled:(cursor-not-allowed opacity-50)': disabled,
+                    'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow':
+                        variant === 'filled',
+                    'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid':
+                        variant === 'outline',
+                    'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single"
+                    'px-2 py-1.25': isIconOnly && variant !== 'outline',
+                    'px-1.75 py-1.25': isIconOnly && variant === 'outline',
+                    'px-3.75': variant === 'outline' && !isIconOnly,
+                },
+                className
+            )}
             title={title}
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {children}
+            {icon && <Icon className='size-6' />}
+            {!isIconOnly && (
+                <Text variant='h4' className='translate-y-0.08'>
+                    {children}
+                </Text>
+            )}
         </button>
     );
 }

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

@@ -1,7 +1,7 @@
 @import 'src/views/styles/base.module.scss';
 
 .extensionRoot {
-    font-family: 'Inter' !important;
+    @apply font-sans;
     color: #303030;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

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

@@ -15,39 +15,26 @@ export function InfoCard({
     bodyText
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <div style = {{
+        <div
-            display: "flex",
+            className = 'w-50 flex flex-col items-start justify-center border rounded p-4'  
-            width: "200px",
+            style = {{
-            minWidth: "200px",
+                border: "1px solid #D6D2C4",
-            maxWidth: "200px",
+                background: "#FFF" //   White
-            padding: "15px",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "flex-start",
-            borderRadius: "4px",
-            border: "1px solid #D6D2C4",
-            background: "#FFF" //White
-        }}>
-            <div style = {{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-start",
-                gap: "7px",
-                alignSelf: "stretch",
             }}>
-                <Text variant = "h4" as = 'span'
+                <div className="flex flex-col items-start self-stretch gap-1.5">
-                    style = {{
+                    <Text variant = "h4" as = 'span'
-                        color: '#F8971F', //Orange
+                        style = {{
-                    }}> 
+                            color: '#F8971F', //    Orange
-                    {titleText} 
+                        }}> 
-                </Text>
+                        {titleText} 
-                <Text variant = "small" as = 'span'
+                    </Text>
-                    style = {{
+                    <Text variant = "small" as = 'span'
-                        color: '#333F48', //Black
+                        style = {{
-                    }}> 
+                            color: '#333F48', //    Black
-                    {bodyText} 
+                        }}> 
-                </Text>
+                        {bodyText} 
-            </ div>
+                    </Text>
+                </ div>
         </div>
     );
 }

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

@@ -17,7 +17,7 @@ export interface ScheduleTotalHoursAndCoursesProps {
  */
 export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className="flex min-w-64 content-center gap-2 flex-wrap uppercase items-baseline">
+        <div className="min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase">
             <Text
                 className="text-[#BF5700]"
                 variant='h1'
@@ -28,7 +28,7 @@ export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours
             <Text
                 variant='h3'
                 as='div'
-                className="text-[#1A2024] flex flex-row gap-2 items-center"
+                className="flex flex-row items-center gap-2 text-[#1A2024]"
             >
                 {`${totalHours} HOURS`}
                 <Text

src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx

@@ -83,7 +83,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 onClick={openRateMyProfessorURL}
                 disabled={!course.instructors.length}
-                type='primary'
+                variant='primary'
                 className={styles.button}
                 title='Search for this professor on RateMyProfessor'
             >
@@ -94,7 +94,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             </Button>
             <Button
                 onClick={openSyllabiURL}
-                type='secondary'
+                variant='secondary'
                 className={styles.button}
                 title='Search for syllabi for this course'
             >
@@ -105,7 +105,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             </Button>
             <Button
                 onClick={openTextbookURL}
-                type='tertiary'
+                variant='tertiary'
                 className={styles.button}
                 title='Search for textbooks for this course'
             >
@@ -118,7 +118,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 disabled={!activeSchedule}
                 onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
                 title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
-                type={isCourseSaved ? 'danger' : 'success'}
+                variant={isCourseSaved ? 'danger' : 'success'}
                 className={styles.button}
             >
 

src/views/components/injected/TableRow/TableRow.tsx

@@ -84,7 +84,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     return ReactDOM.createPortal(
         <>
-            <Button className={styles.rowButton} onClick={onClick} type='secondary'>
+            <Button className={styles.rowButton} onClick={onClick} variant='secondary'>
                 <Icon name='bar_chart' color='white' size='medium' />
             </Button>
             {conflicts.length > 0 && (

unocss.config.ts

@@ -3,10 +3,23 @@ import presetWebFonts from '@unocss/preset-web-fonts';
 import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
 import { defineConfig } from 'unocss';
+import { colors } from './src/shared/util/themeColors';
 
 export default defineConfig({
     rules: [
         ['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
+        [
+            'btn-shadow',
+            {
+                'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);',
+            },
+        ],
+        [
+            'btn-shade',
+            {
+                'background-color': 'var(--bg-color-8)',
+            },
+        ],
         [
             'ring-offset-0',
             {
@@ -16,31 +29,14 @@ export default defineConfig({
     ],
     shortcuts: {
         focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
+        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition',
     },
     theme: {
         easing: {
             'in-out-expo': 'cubic-bezier(.46, 0, .21, 1)',
             'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
         },
-        colors: {
+        colors,
-            ut: {
-                'burnt-orange': '#BF5700',
-                black: '#333F48',
-                orange: '#f8971f',
-                yellow: '#ffd600',
-                'light-green': '#a6cd57',
-                green: '#579d42',
-                teal: '#00a9b7',
-                blue: '#005f86',
-                gray: '#9cadb7',
-                'off-white': '#d6d2c4',
-                concrete: '#95a5a6',
-            },
-            theme: {
-                red: '#af2e2d',
-                black: '#1a2024',
-            },
-        },
     },
 
     presets: [