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

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

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'

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={{