Merge branch 'pr/68' into hackathon

2024-02-17 10:52:02 -06:00
parent 39b4396f88 0928e8d033
commit f049a25aac
8 changed files with 257 additions and 185 deletions
--- a/src/shared/util/themeColors.ts
+++ b/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];
--- a/src/stories/components/Button.stories.tsx
+++ b/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',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  args: {
-    children: 'Button',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
+    title: 'Components/Common/Button',
+    component: Button,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    args: {
+        children: 'Button',
+        icon: ImagePlaceholderIcon,
+    },
+    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: {
-    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',
+    args: {
+        variant: 'filled',
+        color: 'ut-black',
+        disabled: true,
    },
-  },
+};
+
+// @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>
+    ),
 };
--- a/src/views/components/common/Button/Button.module.scss
+++ b/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;
-            }
-        }
-    }
-}
--- a/src/views/components/common/Button/Button.tsx
+++ b/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,
-    testId,
-    children,
+    style,
+    variant,
+    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}
-            data-testid={testId}
-            className={clsx(styles.button, className, styles[type ?? 'primary'], {
-                [styles.disabled]: disabled,
-            })}
+            style={
+                {
+                    ...style,
+                    '--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>
    );
 }
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/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;
--- a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
+++ b/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}
            >

--- a/src/views/components/injected/TableRow/TableRow.tsx
+++ b/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 && (
--- a/unocss.config.ts
+++ b/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: {
-            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',
-            },
-        },
+        colors,
    },

    presets: [