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:
Ethan
2025-01-19 18:34:20 -06:00
committed by GitHub
parent 52347fd56d
commit 843cb5b443
11 changed files with 267 additions and 114 deletions

View File

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