refactor: match dropdown to figma & fix issues (#142)

src/views/components/common/Dropdown/Dropdown.tsx

@@ -1,106 +0,0 @@
-import { Disclosure, Transition } from '@headlessui/react';
-import userScheduleHandler from '@pages/background/handler/userScheduleHandler';
-import type { UserSchedule } from '@shared/types/UserSchedule';
-import List from '@views/components/common/List/List';
-import Text from '@views/components/common/Text/Text';
-import React from 'react';
-
-import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
-import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
-
-/**
- * Props for the Dropdown component.
- */
-export type Props = {
-    style?: React.CSSProperties;
-    // Dummy value solely for storybook
-    dummySchedules?: UserSchedule[];
-    dummyActiveIndex?: number;
-    dummyActiveSchedule?: UserSchedule;
-    scheduleComponents?: any[];
-};
-
-/**
- * This is a reusable dropdown component that can be used to toggle the visiblity of information
- */
-export default function Dropdown(props: Props) {
-    // Expand/Hide state for dropdown
-    let [expanded, toggle] = React.useState(false);
-    let [activeScheduleIndex, select] = React.useState(props.dummyActiveIndex);
-    let [activeSchedule, selectFrom] = React.useState(props.dummyActiveSchedule);
-    let [scheduleComponents, setScheduleComponents] = React.useState(props.scheduleComponents);
-
-    const schedules = props.dummySchedules;
-    if (schedules == null) {
-        // TODO
-        // if no dummy values passed in
-        // useSchedules hook here
-    }
-
-    const toggleSwitch = () => {
-        toggle(!expanded);
-    };
-
-    // TODO
-    // WIP function to swap schedules. Prefer to use the hook when in production
-    const switchSchedule = (index: number) => {
-        const scheduleToSwitchTo = schedules[index];
-
-        select(index);
-        selectFrom(scheduleToSwitchTo);
-        if (scheduleToSwitchTo != null && scheduleToSwitchTo.name != null) {
-            userScheduleHandler.switchSchedule({
-                data: {
-                    scheduleName: scheduleToSwitchTo.name,
-                },
-                sender: null,
-                sendResponse: null,
-            });
-        }
-    };
-
-    return (
-        <div
-            style={{ ...props.style, height: expanded && schedules ? `${40 * schedules.length + 54}px` : '72px' }}
-            className='items-left absolute w-72 flex flex-col border'
-        >
-            <Disclosure>
-                <Disclosure.Button>
-                    <div className='flex items-center border-none bg-white p-3 text-left'>
-                        <div className='flex-1'>
-                            <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
-                                MAIN SCHEDULE:
-                            </Text>
-                            <div>
-                                <Text variant='h3' className='text-theme-black leading-[75%]!'>
-                                    {activeSchedule ? activeSchedule.hours : 0} HOURS
-                                </Text>
-                                <Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
-                                    {activeSchedule ? activeSchedule.courses.length : 0} Courses
-                                </Text>
-                            </div>
-                        </div>
-                        <Text className='text-2xl text-ut-burntorange font-normal'>
-                            {expanded ? <DropdownArrowDown /> : <DropdownArrowUp />}
-                        </Text>
-                    </div>
-                </Disclosure.Button>
-
-                <Transition
-                    enter='transition duration-100 ease-out'
-                    enterFrom='transform scale-95 opacity-0'
-                    enterTo='transform scale-100 opacity-100'
-                    leave='transition duration-75 ease-out'
-                    leaveFrom='transform scale-100 opacity-100'
-                    leaveTo='transform scale-95 opacity-0'
-                    beforeEnter={toggleSwitch}
-                    afterLeave={toggleSwitch}
-                >
-                    <Disclosure.Panel>
-                        <List draggableElements={scheduleComponents} gap={10} />
-                    </Disclosure.Panel>
-                </Transition>
-            </Disclosure>
-        </div>
-    );
-}

src/views/components/common/ScheduleDropdown/ScheduleDropdown.tsx

@@ -0,0 +1,61 @@
+import { Disclosure, Transition } from '@headlessui/react';
+import Text from '@views/components/common/Text/Text';
+import useSchedules from '@views/hooks/useSchedules';
+import React from 'react';
+
+import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
+import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
+
+/**
+ * Props for the Dropdown component.
+ */
+export type Props = {
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+};
+
+/**
+ * This is a reusable dropdown component that can be used to toggle the visiblity of information
+ */
+export default function ScheduleDropdown(props: Props) {
+    const [activeSchedule] = useSchedules();
+
+    return (
+        <div className='border border-ut-offwhite rounded border-solid bg-white'>
+            <Disclosure defaultOpen={props.defaultOpen}>
+                {({ open }) => (
+                    <>
+                        <Disclosure.Button className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
+                            <div className='flex-1'>
+                                <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
+                                    {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
+                                </Text>
+                                <p className='-mb-0.5'>
+                                    <Text variant='h3' className='text-theme-black leading-[75%]!'>
+                                        {activeSchedule ? activeSchedule.hours : 0} HOURS
+                                    </Text>
+                                    <Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
+                                        {activeSchedule ? activeSchedule.courses.length : 0} Courses
+                                    </Text>
+                                </p>
+                            </div>
+                            <Text className='text-2xl text-ut-burntorange font-normal'>
+                                {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
+                            </Text>
+                        </Disclosure.Button>
+
+                        <Transition
+                            className='contain-paint max-h-55 origin-top overflow-auto transition-all duration-400 ease-out-expo'
+                            enterFrom='transform scale-98 opacity-0 max-h-0!'
+                            enterTo='transform scale-100 opacity-100 max-h-55'
+                            leaveFrom='transform scale-100 opacity-100 max-h-55'
+                            leaveTo='transform scale-98 opacity-0 max-h-0!'
+                        >
+                            <Disclosure.Panel className='px-3.5 pb-2.5 pt-2'>{props.children}</Disclosure.Panel>
+                        </Transition>
+                    </>
+                )}
+            </Disclosure>
+        </div>
+    );
+}

src/views/components/common/ScheduleListItem/ScheduleListItem.tsx

@@ -1,6 +1,7 @@
 import Text from '@views/components/common/Text/Text';
+import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 
@@ -11,34 +12,35 @@ export type Props = {
     style?: React.CSSProperties;
     active?: boolean;
     name: string;
-    dragHandleProps?: any;
-    onClick?: (index) => void;
+    dragHandleProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
+    onClick?: React.DOMAttributes<HTMLDivElement>['onClick'];
 };
 
 /**
  * This is a reusable dropdown component that can be used to toggle the visiblity of information
  */
-export default function ScheduleListItem({ style, active, name, dragHandleProps, onClick }: Props): JSX.Element {
+export default function ScheduleListItem({ style, name, dragHandleProps, onClick }: Props): JSX.Element {
+    const [activeSchedule] = useSchedules();
+
+    const isActive = useMemo(() => activeSchedule?.name === name, [activeSchedule, name]);
+
     return (
-        <div style={{ ...style }} className='items-center'>
+        <div style={{ ...style }} className='items-center rounded bg-white'>
             <li className='w-100% flex cursor-pointer items-center self-stretch justify-left text-ut-burntorange'>
-                <div className='group flex justify-center'>
+                <div className='flex justify-center'>
                     <div
                         className='flex cursor-move items-center self-stretch rounded rounded-r-0'
                         {...dragHandleProps}
                     >
                         <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
                     </div>
-                    <div className='inline-flex items-center justify-center gap-1.5'>
-                        <div
-                            className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'
-                            onClick={onClick}
-                        >
+                    <div className='group inline-flex items-center justify-center gap-1.5' onClick={onClick}>
+                        <div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
                             <div
                                 className={clsx(
-                                    'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
+                                    'bg-current h-2.9 w-2.9 rounded-full transition tansform scale-100 ease-out-expo duration-250',
                                     {
-                                        'scale-0! opacity-0 ease-in-out! duration-200!': !active,
+                                        'scale-0! opacity-0 ease-in-out! duration-200!': !isActive,
                                     }
                                 )}
                             />