From 0aa469af81e7912a6b26ee1b80c5920f677b5fbd Mon Sep 17 00:00:00 2001
From: Preston Cook <preston.l.cook@gmail.com>
Date: Tue, 7 Jan 2025 14:59:15 -0600
Subject: [PATCH 1/2] feat(ui): update button variants following figma (#482)

* feat(ui): update button variants following figma

* feat(ui): separate size prop to allow for regular and small sized button variants

* update type to no longer include minimal-small

* update uno css config to use new spacing system

* add variants and sizes to file upload; update button and file upload stories

* add mini button variant and update small button

* specify width on icon-only regular variant

* update plus buttons to be mini sizes

* remove redundant classnames

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
---
 src/stories/components/Button.stories.tsx     | 64 +++++++++++++++++--
 src/stories/components/FileUpload.stories.tsx | 62 +++++++++++++++++-
 src/stories/components/Prompt.stories.tsx     | 10 +--
 src/views/components/PopupMain.tsx            |  7 +-
 .../components/calendar/CalendarBottomBar.tsx |  4 +-
 .../components/calendar/CalendarHeader.tsx    |  4 +-
 .../components/calendar/CalendarSchedules.tsx |  4 +-
 src/views/components/common/Button.tsx        | 25 +++++---
 src/views/components/common/FileUpload.tsx    | 25 +++++---
 .../components/common/MigrationDialog.tsx     |  2 +-
 .../components/common/ScheduleListItem.tsx    |  2 +-
 .../HeadingAndActions.tsx                     |  2 +-
 src/views/components/settings/Settings.tsx    |  2 +-
 src/views/hooks/useChangelog.tsx              |  2 +-
 unocss.config.ts                              |  2 +-
 15 files changed, 172 insertions(+), 45 deletions(-)

diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx
index e61683af..1fcf666b 100644
--- a/src/stories/components/Button.stories.tsx
+++ b/src/stories/components/Button.stories.tsx
@@ -35,6 +35,62 @@ export const Default: Story = {
     },
 };
 
+export const Small: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' size='small'>
+                    Button
+                </Button>
+                <Button {...props} variant='outline' color='ut-black' size='small'>
+                    Button
+                </Button>
+                <Button {...props} variant='minimal' color='ut-black' size='small'>
+                    Button
+                </Button>
+            </div>
+            <hr />
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} icon={ImageSquare} variant='filled' color='ut-black' size='small' />
+                <Button {...props} icon={ImageSquare} variant='outline' color='ut-black' size='small' />
+                <Button {...props} icon={ImageSquare} variant='minimal' color='ut-black' size='small' />
+            </div>
+        </div>
+    ),
+};
+
+export const Mini: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' size='mini'>
+                    Button
+                </Button>
+                <Button {...props} variant='outline' color='ut-black' size='mini'>
+                    Button
+                </Button>
+                <Button {...props} variant='minimal' color='ut-black' size='mini'>
+                    Button
+                </Button>
+            </div>
+            <hr />
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} icon={ImageSquare} variant='filled' color='ut-black' size='mini' />
+                <Button {...props} icon={ImageSquare} variant='outline' color='ut-black' size='mini' />
+                <Button {...props} icon={ImageSquare} variant='minimal' color='ut-black' size='mini' />
+            </div>
+        </div>
+    ),
+};
+
 export const Disabled: Story = {
     args: {
         variant: 'filled',
@@ -50,7 +106,7 @@ export const Grid: Story = {
             <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' />
+                <Button {...props} variant='minimal' color='ut-black' />
             </div>
 
             <hr />
@@ -58,7 +114,7 @@ export const Grid: Story = {
             <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 />
+                <Button {...props} variant='minimal' color='ut-black' disabled />
             </div>
         </div>
     ),
@@ -82,12 +138,12 @@ export const PrettyColors: Story = {
                         <Button {...props} variant='outline' color={color}>
                             Button
                         </Button>
-                        <Button {...props} variant='single' color={color}>
+                        <Button {...props} variant='minimal' color={color}>
                             Button
                         </Button>
                         <Button {...props} variant='filled' color={color} />
                         <Button {...props} variant='outline' color={color} />
-                        <Button {...props} variant='single' color={color} />
+                        <Button {...props} variant='minimal' color={color} />
                     </div>
                 ))}
             </div>
diff --git a/src/stories/components/FileUpload.stories.tsx b/src/stories/components/FileUpload.stories.tsx
index c20635f7..2749e231 100644
--- a/src/stories/components/FileUpload.stories.tsx
+++ b/src/stories/components/FileUpload.stories.tsx
@@ -45,6 +45,62 @@ export const Default: Story = {
     },
 };
 
+export const Small: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <FileUpload {...props} variant='filled' color='ut-black' size='small'>
+                    Upload File
+                </FileUpload>
+                <FileUpload {...props} variant='outline' color='ut-black' size='small'>
+                    Upload File
+                </FileUpload>
+                <FileUpload {...props} variant='minimal' color='ut-black' size='small'>
+                    Upload File
+                </FileUpload>
+            </div>
+            <hr />
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <FileUpload {...props} icon={ImageSquare} variant='filled' color='ut-black' size='small' />
+                <FileUpload {...props} icon={ImageSquare} variant='outline' color='ut-black' size='small' />
+                <FileUpload {...props} icon={ImageSquare} variant='minimal' color='ut-black' size='small' />
+            </div>
+        </div>
+    ),
+};
+
+export const Mini: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <FileUpload {...props} variant='filled' color='ut-black' size='mini'>
+                    Button
+                </FileUpload>
+                <FileUpload {...props} variant='outline' color='ut-black' size='mini'>
+                    Button
+                </FileUpload>
+                <FileUpload {...props} variant='minimal' color='ut-black' size='mini'>
+                    Button
+                </FileUpload>
+            </div>
+            <hr />
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <FileUpload {...props} icon={ImageSquare} variant='filled' color='ut-black' size='mini' />
+                <FileUpload {...props} icon={ImageSquare} variant='outline' color='ut-black' size='mini' />
+                <FileUpload {...props} icon={ImageSquare} variant='minimal' color='ut-black' size='mini' />
+            </div>
+        </div>
+    ),
+};
+
 export const Disabled: Story = {
     args: {
         variant: 'filled',
@@ -60,7 +116,7 @@ export const Grid: Story = {
             <div style={{ display: 'flex', gap: '15px' }}>
                 <FileUpload {...props} variant='filled' color='ut-black' />
                 <FileUpload {...props} variant='outline' color='ut-black' />
-                <FileUpload {...props} variant='single' color='ut-black' />
+                <FileUpload {...props} variant='minimal' color='ut-black' />
             </div>
 
             <hr />
@@ -68,7 +124,7 @@ export const Grid: Story = {
             <div style={{ display: 'flex', gap: '15px' }}>
                 <FileUpload {...props} variant='filled' color='ut-black' disabled />
                 <FileUpload {...props} variant='outline' color='ut-black' disabled />
-                <FileUpload {...props} variant='single' color='ut-black' disabled />
+                <FileUpload {...props} variant='minimal' color='ut-black' disabled />
             </div>
         </div>
     ),
@@ -92,7 +148,7 @@ export const PrettyColors: Story = {
                         <FileUpload {...props} variant='outline' color={color}>
                             Button
                         </FileUpload>
-                        <FileUpload {...props} variant='single' color={color}>
+                        <FileUpload {...props} variant='minimal' color={color}>
                             Button
                         </FileUpload>
                     </div>
diff --git a/src/stories/components/Prompt.stories.tsx b/src/stories/components/Prompt.stories.tsx
index bf98aa30..a73f1244 100644
--- a/src/stories/components/Prompt.stories.tsx
+++ b/src/stories/components/Prompt.stories.tsx
@@ -56,10 +56,10 @@ export const AreYouSure: StoryObj<PromptDialogProps> = {
             </Text>
         ),
         children: [
-            <Button key='yes' variant='single' color='ut-burntorange'>
+            <Button key='yes' variant='minimal' color='ut-burntorange'>
                 Yes
             </Button>,
-            <Button key='no' variant='single' color='ut-black'>
+            <Button key='no' variant='minimal' color='ut-black'>
                 No
             </Button>,
         ],
@@ -76,7 +76,7 @@ export const YouHave10ActiveSchedules: StoryObj<PromptDialogProps> = {
             </Text>
         ),
         children: [
-            <Button key='yes' variant='single' color='ut-black'>
+            <Button key='yes' variant='minimal' color='ut-black'>
                 I understand
             </Button>,
         ],
@@ -94,10 +94,10 @@ export const WelcomeToUTRPV2: StoryObj<PromptDialogProps> = {
             </Text>
         ),
         children: [
-            <Button key='migrate' variant='single' color='ut-black'>
+            <Button key='migrate' variant='minimal' color='ut-black'>
                 Don&apos;t Migrate
             </Button>,
-            <Button key='start-fresh' variant='single' color='ut-burntorange'>
+            <Button key='start-fresh' variant='minimal' color='ut-burntorange'>
                 Migrate
             </Button>,
         ],
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index 35a54cf0..e47594de 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -132,12 +132,11 @@ export default function PopupMain(): JSX.Element {
                     <div className='bottom-0 right-0 mt-2.5 w-full flex justify-end'>
                         <Button
                             variant='filled'
+                            size='mini'
                             color='ut-burntorange'
-                            className='h-fit p-0 btn'
                             onClick={handleAddSchedule}
-                        >
-                            <Plus className='h-6 w-6' />
-                        </Button>
+                            icon={Plus}
+                        />
                     </div>
                 </ScheduleDropdown>
             </div>
diff --git a/src/views/components/calendar/CalendarBottomBar.tsx b/src/views/components/calendar/CalendarBottomBar.tsx
index 4b650ec9..4d140620 100644
--- a/src/views/components/calendar/CalendarBottomBar.tsx
+++ b/src/views/components/calendar/CalendarBottomBar.tsx
@@ -60,12 +60,12 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
             </div>
             <div className='flex items-center screenshot:hidden'>
                 {displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
-                <Button variant='single' color='ut-black' icon={CalendarDots} onClick={saveAsCal}>
+                <Button variant='minimal' color='ut-black' icon={CalendarDots} onClick={saveAsCal}>
                     Save as .CAL
                 </Button>
                 <Divider orientation='vertical' size='1rem' className='mx-1.25' />
                 <Button
-                    variant='single'
+                    variant='minimal'
                     color='ut-black'
                     icon={ImageSquare}
                     onClick={() => requestAnimationFrame(() => saveCalAsPng())}
diff --git a/src/views/components/calendar/CalendarHeader.tsx b/src/views/components/calendar/CalendarHeader.tsx
index 8854b1f2..e1b1df0e 100644
--- a/src/views/components/calendar/CalendarHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader.tsx
@@ -57,7 +57,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
     return (
         <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
             <Button
-                variant='single'
+                variant='minimal'
                 icon={Sidebar}
                 color='ut-gray'
                 onClick={onSidebarToggle}
@@ -83,7 +83,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
 
                 {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                 <Button variant='single' icon={RedoIcon} color='ut-black' /> */}
-                <Button variant='single' icon={GearSix} color='theme-black' onClick={handleOpenOptions} />
+                <Button variant='minimal' icon={GearSix} color='theme-black' onClick={handleOpenOptions} />
             </div>
         </div>
     );
diff --git a/src/views/components/calendar/CalendarSchedules.tsx b/src/views/components/calendar/CalendarSchedules.tsx
index 767a6d30..e64674fd 100644
--- a/src/views/components/calendar/CalendarSchedules.tsx
+++ b/src/views/components/calendar/CalendarSchedules.tsx
@@ -31,9 +31,7 @@ export function CalendarSchedules() {
                 <Text variant='h3' className='text-nowrap'>
                     MY SCHEDULES
                 </Text>
-                <Button variant='single' color='theme-black' className='h-fit p-0 btn' onClick={handleAddSchedule}>
-                    <Plus className='h-6 w-6' />
-                </Button>
+                <Button size='mini' variant='minimal' color='theme-black' onClick={handleAddSchedule} icon={Plus} />
             </div>
             <div className='flex flex-col space-y-2.5'>
                 <List
diff --git a/src/views/components/common/Button.tsx b/src/views/components/common/Button.tsx
index afa3474b..e603356f 100644
--- a/src/views/components/common/Button.tsx
+++ b/src/views/components/common/Button.tsx
@@ -8,7 +8,8 @@ import React from 'react';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    variant: 'filled' | 'outline' | 'single';
+    variant?: 'filled' | 'outline' | 'minimal';
+    size?: 'regular' | 'small' | 'mini';
     onClick?: () => void;
     icon?: Icon;
     iconProps?: IconProps;
@@ -24,7 +25,8 @@ interface Props {
 export function Button({
     className,
     style,
-    variant,
+    variant = 'filled',
+    size = 'regular',
     onClick,
     icon,
     iconProps,
@@ -52,11 +54,15 @@ export function Button({
                 {
                     'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
-                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
-                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': 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,
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border stroke-width-[1px]':
+                        variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'minimal',
+                    'h-10 gap-spacing-3 px-spacing-5': size === 'regular' && !isIconOnly,
+                    'h-10 w-10 p-spacing-2': size === 'regular' && isIconOnly,
+                    'h-[35px] gap-spacing-3 px-spacing-3': size === 'small' && !isIconOnly,
+                    'h-[35px] w-[35px] p-spacing-2': size === 'small' && isIconOnly,
+                    'h-6 p-spacing-2': size === 'mini' && !isIconOnly,
+                    'h-6 w-6 p-0': size === 'mini' && isIconOnly,
                 },
                 className
             )}
@@ -66,7 +72,10 @@ export function Button({
         >
             {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
-                <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
+                <Text
+                    variant={size === 'regular' ? 'h4' : 'small'}
+                    className='inline-flex translate-y-0.08 items-center gap-2'
+                >
                     {children}
                 </Text>
             )}
diff --git a/src/views/components/common/FileUpload.tsx b/src/views/components/common/FileUpload.tsx
index 4fb057dc..d2c1f88d 100644
--- a/src/views/components/common/FileUpload.tsx
+++ b/src/views/components/common/FileUpload.tsx
@@ -8,7 +8,8 @@ import React from 'react';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    variant: 'filled' | 'outline' | 'single';
+    variant?: 'filled' | 'outline' | 'minimal';
+    size?: 'regular' | 'small' | 'mini';
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     icon?: Icon;
     iconProps?: IconProps;
@@ -25,7 +26,8 @@ interface Props {
 export default function FileUpload({
     className,
     style,
-    variant,
+    variant = 'filled',
+    size = 'regular',
     onChange,
     icon,
     iconProps,
@@ -53,11 +55,15 @@ export default function FileUpload({
                 {
                     'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
-                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
-                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': 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,
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border stroke-width-[1px]':
+                        variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'minimal',
+                    'h-10 gap-spacing-3 px-spacing-5': size === 'regular' && !isIconOnly,
+                    'h-10 w-10 p-spacing-2': size === 'regular' && isIconOnly,
+                    'h-[35px] gap-spacing-3 px-spacing-3': size === 'small' && !isIconOnly,
+                    'h-[35px] w-[35px] p-spacing-2': size === 'small' && isIconOnly,
+                    'h-6 p-spacing-2': size === 'mini' && !isIconOnly,
+                    'h-6 w-6 p-0': size === 'mini' && isIconOnly,
                 },
                 className
             )}
@@ -65,7 +71,10 @@ export default function FileUpload({
         >
             {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
-                <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
+                <Text
+                    variant={size === 'regular' ? 'h4' : 'small'}
+                    className='inline-flex translate-y-0.08 items-center gap-2'
+                >
                     {children}
                 </Text>
             )}
diff --git a/src/views/components/common/MigrationDialog.tsx b/src/views/components/common/MigrationDialog.tsx
index fc005335..84191995 100644
--- a/src/views/components/common/MigrationDialog.tsx
+++ b/src/views/components/common/MigrationDialog.tsx
@@ -53,7 +53,7 @@ function MigrationButtons({ close }: { close: () => void }): JSX.Element {
                 </Text>
             )}
             <Button
-                variant='single'
+                variant='minimal'
                 color='ut-black'
                 onClick={() => {
                     close();
diff --git a/src/views/components/common/ScheduleListItem.tsx b/src/views/components/common/ScheduleListItem.tsx
index 86e53e13..98efacf7 100644
--- a/src/views/components/common/ScheduleListItem.tsx
+++ b/src/views/components/common/ScheduleListItem.tsx
@@ -73,7 +73,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
             // eslint-disable-next-line react/no-unstable-nested-components
             buttons: close => (
                 <>
-                    <Button variant='single' color='ut-black' onClick={close}>
+                    <Button variant='minimal' color='ut-black' onClick={close}>
                         Cancel
                     </Button>
                     <Button
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
index 6fce4af2..a9082459 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -107,7 +107,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                     <Text variant='h1' className='flex-1 whitespace-nowrap text-theme-black'>
                         ({department} {courseNumber})
                     </Text>
-                    <Button color='ut-burntorange' variant='single' icon={Copy} onClick={handleCopy}>
+                    <Button color='ut-burntorange' variant='minimal' icon={Copy} onClick={handleCopy}>
                         {formattedUniqueId}
                     </Button>
                     <button className='bg-transparent p-0 text-ut-black btn' onClick={onClose}>
diff --git a/src/views/components/settings/Settings.tsx b/src/views/components/settings/Settings.tsx
index 4c359865..1996a08c 100644
--- a/src/views/components/settings/Settings.tsx
+++ b/src/views/components/settings/Settings.tsx
@@ -260,7 +260,7 @@ export default function Settings(): JSX.Element {
                     UTRP SETTINGS & CREDITS PAGE
                 </Text>
                 <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
-                    <Button variant='single' color='theme-black' onClick={handleChangelogOnClick}>
+                    <Button variant='minimal' color='theme-black' onClick={handleChangelogOnClick}>
                         <IconoirGitFork className='h-6 w-6 text-ut-gray' />
                         <Text variant='small' className='text-ut-gray font-normal'>
                             v{manifest.version} - {process.env.NODE_ENV}
diff --git a/src/views/hooks/useChangelog.tsx b/src/views/hooks/useChangelog.tsx
index 1f6b8ac2..927f6e0e 100644
--- a/src/views/hooks/useChangelog.tsx
+++ b/src/views/hooks/useChangelog.tsx
@@ -21,7 +21,7 @@ export default function useChangelog(): () => void {
                     <Text variant='h1' className='text-theme-black'>
                         Changelog
                     </Text>
-                    <Button variant='single' onClick={close} color='theme-black' className='p-1 text-gray-700'>
+                    <Button variant='minimal' onClick={close} color='theme-black' className='p-1 text-gray-700'>
                         <X className='h-6 w-6' />
                     </Button>
                 </div>
diff --git a/unocss.config.ts b/unocss.config.ts
index 9025e7b6..5893b0c0 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -26,7 +26,7 @@ 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 disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
+        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-spacing-3 rounded-1 px-spacing-5 py-0 text-4.5 btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
         link: 'text-ut-burntorange link:text-ut-burntorange underline underline-offset-2 hover:text-ut-orange focus-visible:text-ut-orange focusable btn-transition ease-out-expo',
         linkanimate:
             'relative cursor-pointer transition duration-100 ease-out after:(absolute left-0.4 right-0.4 h-2px scale-x-95 bg-ut-orange opacity-0 transition duration-250 ease-out-expo content-empty -bottom-0.75 -translate-y-0.5) active:scale-95 hover:text-ut-orange focus-visible:text-ut-orange hover:after:(opacity-100) !hover:after:translate-y-0 !hover:after:scale-x-100',

From a20332e53da9bda873fabb8395afe6ff6303799c Mon Sep 17 00:00:00 2001
From: Aaron Chen <86327871+aaronthechen@users.noreply.github.com>
Date: Wed, 8 Jan 2025 02:20:10 -0600
Subject: [PATCH 2/2] feat(ui): added shadows to popup buttons and course
 blocks (#378)

* feat(ui): added shadows to popup buttons and course blocks

* feat(ui): keep shadow state while dragging course block

* feat(ui): fixed transition "flash" after dragging

* feat(ui): fix linting/styling

* Update src/views/components/PopupMain.tsx

Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>

* fix(ui): change old icons to the new ones from main

* fix(ui): show flag icon instead of plus icon for feedback

* chore: fix button variants after merge

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>
Co-authored-by: Samuel Gunter <sgunter@utexas.edu>
---
 src/views/components/PopupMain.tsx            | 21 ++++++++-----------
 src/views/components/common/List.tsx          |  4 ++--
 .../components/common/PopupCourseBlock.tsx    | 17 +++++++++++++--
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index e47594de..2fd13f72 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,6 +1,6 @@
 import splashText from '@assets/insideJokes';
 import createSchedule from '@pages/background/lib/createSchedule';
-import { CalendarDots, GearSix, Plus } from '@phosphor-icons/react';
+import { CalendarDots, Flag, GearSix, Plus } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
@@ -14,8 +14,6 @@ import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeStrin
 import useKC_DABR_WASM from 'kc-dabr-wasm';
 import React, { useEffect, useState } from 'react';
 
-import Feedback from '~icons/material-symbols/flag';
-
 import { Button } from './common/Button';
 import CourseStatus from './common/CourseStatus';
 import { SmallLogo } from './common/LogoIcon';
@@ -91,15 +89,14 @@ export default function PopupMain(): JSX.Element {
                 <div className='flex items-center justify-between bg-white'>
                     <SmallLogo />
                     <div className='flex items-center gap-2.5'>
-                        <button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
-                            <CalendarDots className='size-6 text-white' />
-                        </button>
-                        <button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
-                            <GearSix className='size-6 color-ut-black' />
-                        </button>
-                        <button className='bg-transparent px-2 py-1.25 btn' onClick={openReportWindow}>
-                            <Feedback className='size-6 color-ut-black' />
-                        </button>
+                        <Button
+                            variant='filled'
+                            color='ut-burntorange'
+                            onClick={handleCalendarOpenOnClick}
+                            icon={CalendarDots}
+                        />
+                        <Button variant='minimal' color='ut-black' onClick={handleOpenOptions} icon={GearSix} />
+                        <Button variant='minimal' color='ut-black' onClick={openReportWindow} icon={Flag} />
                     </div>
                 </div>
             </div>
diff --git a/src/views/components/common/List.tsx b/src/views/components/common/List.tsx
index 267d7e29..78b90c58 100644
--- a/src/views/components/common/List.tsx
+++ b/src/views/components/common/List.tsx
@@ -59,7 +59,7 @@ function Item<T>(props: {
             {...props.provided.draggableProps}
             ref={props.provided.innerRef}
             style={getStyle(props.provided, props.style)}
-            className={props.isDragging ? 'is-dragging' : ''}
+            className={props.isDragging ? 'group is-dragging' : ''}
         >
             {props.children}
         </div>
@@ -104,7 +104,7 @@ function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<
     );
 
     return (
-        <div style={{ overflow: 'hidden' }}>
+        <div style={{ overflow: 'clip', overflowClipMargin: `${gap}px` }}>
             <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable
                     droppableId='droppable'
diff --git a/src/views/components/common/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock.tsx
index 1edfbd0a..d902cba8 100644
--- a/src/views/components/common/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock.tsx
@@ -9,7 +9,7 @@ import { pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 /**
  * Props for PopupCourseBlock
@@ -37,6 +37,7 @@ export default function PopupCourseBlock({
     dragHandleProps,
 }: PopupCourseBlockProps): JSX.Element {
     const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
+    const ref = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         initSettings().then(({ enableCourseStatusChips }) => setEnableCourseStatusChips(enableCourseStatusChips));
@@ -46,6 +47,17 @@ export default function PopupCourseBlock({
             // console.log('enableCourseStatusChips', newValue);
         });
 
+        // adds transition for shadow hover after three frames
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    if (ref.current) {
+                        ref.current.classList.add('transition-shadow-100');
+                    }
+                });
+            });
+        });
+
         return () => {
             OptionsStore.removeListener(l1);
         };
@@ -66,10 +78,11 @@ export default function PopupCourseBlock({
                 backgroundColor: colors.primaryColor,
             }}
             className={clsx(
-                'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3 focusable cursor-pointer text-left',
+                'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3 focusable cursor-pointer text-left hover:shadow-md ease-out group-[.is-dragging]:shadow-md',
                 className
             )}
             onClick={handleClick}
+            ref={ref}
         >
             <div
                 style={{