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