feat(ui): calendar sidebar redesign (#464)
* feat: update calendar sidebar, footer, and header with Figma design * chore: run lint * feat: update header with Figma design * chore: run lint * chore: remove unused vars * chore: fix types * fix: adjust sidebar minimum width * fix: update LogoIcon layout to ensure text is always displayed * feat: add spacing constants * fix: add sidebar styling with spacing system and sticky header * fix: update spacing constants to use rem units * refactor: replace padding with spacing system and colors with UTRP theme * refactor: rename ImportantLinks to ResourceLinks * refactor: simplify CalendarHeader button component by using icon prop * feat: add sidebar open and close transition * refactor: rename unused var * fix: update social icon color * feat: improve layout and spacing in calendar components * refactor: remove unused GearSix icon and options handler * feat: update calendar components with new icons and improved spacing * fix: correct class name * refactor: organize social links into array and update link styling * refactor: remove unused import * fix: adjust gap spacing in radio button * fix: update divider component to use theme offwhite1 * fix: increase size of outward arrow icon * feat: add getSpacingInPx function to convert rem to pixels * fix: update gap spacing in CalendarSchedules component to use spacing system * fix: rollback footer social icons to original icons * fix: update Calendar styles to use theme offwhite1 and adjust padding to account for scrollbar * fix: update LargeLogo component to use gap-spacing-3 * fix: update button variants to 'minimal' and adjust styles for consistency * fix: adjust padding in Calendar component for better layout consistency * fix: increase size of arrow icon * fix: add shrink-0 to radio buttons
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import createSchedule from '@pages/background/lib/createSchedule';
|
||||
import { Plus } from '@phosphor-icons/react';
|
||||
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
|
||||
import { getSpacingInPx } from '@shared/types/Spacing';
|
||||
import { Button } from '@views/components/common/Button';
|
||||
import List from '@views/components/common/List';
|
||||
import ScheduleListItem from '@views/components/common/ScheduleListItem';
|
||||
@@ -26,16 +27,22 @@ export function CalendarSchedules() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='min-w-full w-0 items-center'>
|
||||
<div className='m0 m-b-2 w-full flex justify-between'>
|
||||
<Text variant='h3' className='text-nowrap'>
|
||||
<div className='min-w-full w-0 flex flex-col items-center gap-y-spacing-3'>
|
||||
<div className='m0 w-full flex justify-between'>
|
||||
<Text variant='h3' className='text-nowrap text-theme-black'>
|
||||
MY SCHEDULES
|
||||
</Text>
|
||||
<Button size='mini' variant='minimal' color='theme-black' onClick={handleAddSchedule} icon={Plus} />
|
||||
<Button
|
||||
variant='minimal'
|
||||
color='theme-black'
|
||||
className='h-fit w-fit !p-0 btn'
|
||||
onClick={handleAddSchedule}
|
||||
icon={Plus}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col space-y-2.5'>
|
||||
<div className='w-full flex flex-col'>
|
||||
<List
|
||||
gap={10}
|
||||
gap={getSpacingInPx('spacing-3')}
|
||||
draggables={schedules}
|
||||
itemKey={s => s.id}
|
||||
onReordered={reordered => {
|
||||
|
||||
Reference in New Issue
Block a user