calendar

Author: papistacoding

packages/ui/src/calendar-popover/calendar-popover.styles.tsx

@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 export const calendarPopoverStyles = tv({
   slots: {
     calendarIcon: 'ml-10 h-4 w-4 opacity-50',
-    calendarInput: 'flex justify-between w-full items-center font-normal px-2 tracking-[-0.16px]',
+    calendarInput: 'text-base flex justify-between w-full items-center font-normal px-2 tracking-[-0.16px]',
     calendarPopover: 'w-auto p-0 z-10',
   },
 })

packages/ui/src/calendar-popover/calendar-popover.tsx

@@ -59,7 +59,14 @@ const CalendarPopover = <T extends FieldValues>({ field, defaultToday, required,
   return (
     <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
       <PopoverTrigger asChild>
-        <Button className={buttonClassName ?? 'w-full flex justify-between items-center'} variant="outlineInput" childFull>
+        <Button
+          className={
+            buttonClassName ??
+            '!h-12 w-full flex justify-between items-center border border-neutral-300 border-input dark:border-brand !p-1  text-base rounded-md focus-visible:outline-none  disabled:cursor-not-allowed disabled:opacity-50'
+          }
+          variant="outlineInput"
+          childFull
+        >
           <div className={calendarInput()}>
             <span>{value ? format(value, 'PPP') : 'Select a date:'}</span>
             <div className="flex items-center gap-x-2">

packages/ui/src/multiple-selector/multiple-selector.tsx

@@ -418,7 +418,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
       >
         <div
           className={cn(
-            'rounded-md border border-neutral-300 dark:border-brand bg-input-background text-base md:text-sm px-3 py-2',
+            'h-12 rounded-md border border-neutral-300 dark:border-brand bg-input-background text-base md:text-sm px-3 py-2',
             {
               'cursor-text': !disabled && selected.length !== 0,
             },