ui: add datepicker focus state

RaunoT · Aug 26, 2024 · abbb1ef · abbb1ef
1 parent 0ad2040
commit abbb1ef
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -60,7 +60,10 @@ export default function DatePicker({
     >
       <Group className='select-wrapper flex cursor-pointer'>
         <div
-          className='input select-input focus-within:focus-ring !bg-none'
+          className={clsx(
+            'input select-input focus-within:focus-ring !bg-none',
+            isOpen && 'focus-ring bg-neutral-400',
+          )}
           onClick={() => setIsOpen(true)}
         >
           <I18nProvider locale='en-GB'>
@@ -88,7 +91,7 @@ export default function DatePicker({
           <CalendarDaysIcon className='absolute inset-y-0 right-3.5 my-auto size-5 text-neutral-300' />
         </div>
       </Group>
-      <Label className='label'>
+      <Label className={clsx('label', isOpen && 'text-white')}>
         <span className={clsx('label-wrapper', required && 'required')}>
           {label}
         </span>{' '}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -120,10 +120,6 @@
 
     &:focus {
       @apply focus-ring bg-neutral-400 placeholder:text-neutral-300;
-
-      + .label {
-        @apply text-white;
-      }
     }
 
     &[required] + .label > .label-wrapper {
@@ -137,6 +133,12 @@
 
   .input-wrapper {
     @apply relative flex flex-col-reverse gap-2 sm:flex-row-reverse sm:items-center;
+
+    &:focus-within {
+      .label {
+        @apply text-white;
+      }
+    }
   }
 
   .select-wrapper {