feat(calendar): adjust border styles (#119)

domhhv · Oct 25, 2024 · a126c16 · a126c16
1 parent 1028a5b
commit a126c16
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx
@@ -82,7 +82,7 @@ const Calendar = () => {
     <div className="flex h-full w-full flex-1 flex-col p-0 lg:p-4">
       <div
         {...calendarProps}
-        className="mt-4 flex max-w-full flex-1 flex-col px-0 lg:px-16"
+        className="mt-2 flex max-w-full flex-1 flex-col px-0 lg:px-16"
       >
         <CalendarHeader
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}

diff --git a/src/components/calendar/CalendarCell.tsx b/src/components/calendar/CalendarCell.tsx
@@ -118,7 +118,7 @@ const CalendarCell = ({
   };
 
   const cellRootClassName = clsx(
-    'flex h-28 flex-1 flex-col border-r-3 border-neutral-500 last-of-type:border-r-0 hover:bg-neutral-200 dark:border-neutral-400 dark:hover:bg-neutral-800',
+    'flex h-28 flex-1 flex-col border-r-2 border-neutral-500 last-of-type:border-r-0 hover:bg-neutral-200 dark:border-neutral-400 dark:hover:bg-neutral-800',
     rangeStatus === 'below-range' && 'cursor-w-resize',
     rangeStatus === 'above-range' && 'cursor-e-resize',
     isToday &&
@@ -156,6 +156,7 @@ const CalendarCell = ({
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
+                  transition={{ duration: 0.5 }}
                 >
                   <OccurrenceChip
                     occurrences={habitOccurrences}

diff --git a/src/components/calendar/CalendarHeader.tsx b/src/components/calendar/CalendarHeader.tsx
@@ -89,7 +89,7 @@ const CalendarHeader = ({
   };
 
   return (
-    <div className="mb-2 flex flex-col items-center justify-between gap-2 rounded-md border-3 border-neutral-500 px-4 py-4 md:flex-row md:gap-0 md:py-2">
+    <div className="mb-2 flex flex-col items-center justify-between gap-2 md:flex-row md:gap-0">
       <div className="flex flex-col items-center justify-between gap-2 md:flex-row md:gap-0">
         <div className="mr-2 flex flex-col items-center gap-2 md:flex-row">
           <Select

diff --git a/src/components/calendar/CalendarMonthGrid.tsx b/src/components/calendar/CalendarMonthGrid.tsx
@@ -28,7 +28,7 @@ const Month = (
       {weekIndexes.map((weekIndex) => (
         <div
           key={weekIndex}
-          className="flex h-[110px] justify-between border-l-3 border-r-3 border-t-3 border-neutral-500 last-of-type:border-b-3 dark:border-neutral-400 lg:h-auto"
+          className="flex h-[110px] justify-between border-l-2 border-r-2 border-t-2 border-neutral-500 last-of-type:border-b-2 dark:border-neutral-400 lg:h-auto"
         >
           {state
             .getDatesInWeek(weekIndex)

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -12,7 +12,7 @@ const Header = () => {
 
   return (
     <header className="border-b border-b-neutral-300 bg-neutral-200 dark:border-b-neutral-800 dark:bg-neutral-900">
-      <div className="mx-auto flex w-full flex-col items-center justify-between gap-2 p-4 sm:flex-row sm:gap-0 lg:w-[90%]">
+      <div className="mx-auto flex w-full flex-col items-center justify-between gap-2 px-20 py-4 sm:flex-row sm:gap-0">
         <div className="flex flex-col-reverse items-center gap-3 sm:flex-row">
           <Button color="primary" as={Link} to="/calendar">
             Calendar