feat(ui): add schedule list icons (#500)

This commit is contained in:
Preston Cook
2025-01-25 20:10:40 -06:00
committed by GitHub
parent 93733e3721
commit f0b257aa12

View File

@@ -2,7 +2,15 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import deleteSchedule from '@pages/background/lib/deleteSchedule'; import deleteSchedule from '@pages/background/lib/deleteSchedule';
import duplicateSchedule from '@pages/background/lib/duplicateSchedule'; import duplicateSchedule from '@pages/background/lib/duplicateSchedule';
import renameSchedule from '@pages/background/lib/renameSchedule'; import renameSchedule from '@pages/background/lib/renameSchedule';
import { Circle, DotsSixVertical, DotsThree, RadioButton } from '@phosphor-icons/react'; import {
Circle,
CopySimple,
DotsSixVertical,
DotsThree,
PencilSimpleLine,
RadioButton,
Trash,
} from '@phosphor-icons/react';
import type { UserSchedule } from '@shared/types/UserSchedule'; import type { UserSchedule } from '@shared/types/UserSchedule';
import Text from '@views/components/common/Text/Text'; import Text from '@views/components/common/Text/Text';
import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit'; import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
@@ -147,7 +155,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
as={ExtensionRootWrapper} as={ExtensionRootWrapper}
className={clsx([ className={clsx([
styleResetClass, styleResetClass,
'w-30 cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite focus:outline-none', 'w-fit cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite1 focus:outline-none',
'data-[closed]:(opacity-0 scale-95)', 'data-[closed]:(opacity-0 scale-95)',
'data-[enter]:(ease-out-expo duration-150)', 'data-[enter]:(ease-out-expo duration-150)',
'data-[leave]:(ease-out duration-50)', 'data-[leave]:(ease-out duration-50)',
@@ -156,34 +164,40 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
anchor='bottom end' anchor='bottom end'
> >
<MenuItem> <MenuItem>
<Text <Button
as='button' className='w-full flex justify-start'
variant='small'
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40' color='ut-black'
size='small'
variant='minimal'
icon={PencilSimpleLine}
> >
Rename Rename
</Text> </Button>
</MenuItem> </MenuItem>
<MenuItem> <MenuItem>
<Text <Button
as='button' className='w-full flex justify-start'
variant='small'
onClick={() => handleDuplicateSchedule(schedule.id)} onClick={() => handleDuplicateSchedule(schedule.id)}
className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40' color='ut-black'
size='small'
variant='minimal'
icon={CopySimple}
> >
Duplicate Duplicate
</Text> </Button>
</MenuItem> </MenuItem>
<MenuItem> <MenuItem>
<Text <Button
as='button' className='w-full flex justify-start'
variant='small'
onClick={handleDelete} onClick={handleDelete}
className='w-full rounded bg-transparent p-2 text-left text-theme-red data-[focus]:bg-red-200/40' color='theme-red'
size='small'
variant='minimal'
icon={Trash}
> >
Delete Delete Schedule
</Text> </Button>
</MenuItem> </MenuItem>
</MenuItems> </MenuItems>
</Menu> </Menu>