Move error into picker (#2780)

* Move error into picker

* Use flex avoid negative margin

* Fix border hover

* Fix missing border and today dot error colour

Author: benjaminleonard

app/components/form/fields/DateTimeRangePicker.tsx

@@ -116,7 +116,7 @@ export function DateTimeRangePicker({
   return (
     <form className="flex">
       <Listbox
-        className="z-10 w-[10rem] border-r border-r-default [&_button]:!rounded-r-none [&_button]:!border-r-0"
+        className="z-10 w-[10rem] [&_button]:!rounded-r-none [&_button]:!border-r-0"
         name="preset"
         selected={preset}
         aria-label="Choose a time range preset"
@@ -140,7 +140,7 @@ export function DateTimeRangePicker({
           minValue={minValue}
           maxValue={maxValue}
           hideTimeZone
-          className="[&_.rounded-l]:!rounded-l-none [&_button]:!border-l-0"
+          className="[&_.rounded-l]:!rounded-l-none"
         />
       </div>
     </form>

app/ui/lib/CalendarCell.tsx

@@ -121,7 +121,14 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
         </div>
 
         {cellIsToday && (
-          <div className="absolute bottom-[5px] left-1/2 h-[3px] w-[3px] -translate-x-1/2 rounded-full bg-[var(--content-accent-tertiary)] content-['']" />
+          <div
+            className={cn(
+              "absolute bottom-[5px] left-1/2 h-[3px] w-[3px] -translate-x-1/2 rounded-full content-['']",
+              isInvalid
+                ? 'bg-[var(--content-error-tertiary)]'
+                : 'bg-[var(--content-accent-tertiary)]'
+            )}
+          />
         )}
       </div>
     </td>

app/ui/lib/DateRangePicker.tsx

@@ -65,7 +65,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
             state.isOpen && 'z-10 ring-2',
             'relative flex h-11 items-center rounded-l rounded-r border text-sans-md border-default focus-within:ring-2 hover:border-raise focus:z-10',
             state.isInvalid
-              ? 'focus-error border-error ring-error-secondary'
+              ? 'focus-error border-error ring-error-secondary hover:border-error'
               : 'border-default ring-accent-secondary'
           )}
         >
@@ -82,32 +82,35 @@ export function DateRangePicker(props: DateRangePickerProps) {
           </div>
         </button>
       </div>
-      {state.isInvalid && (
-        <p {...errorMessageProps} className="py-2 text-sans-md text-error">
-          Date range is invalid
-        </p>
-      )}
       {state.isOpen && (
         <Popover triggerRef={ref} state={state} placement="bottom start">
           <Dialog {...dialogProps}>
             <RangeCalendar {...calendarProps} />
-            <div className="flex items-center space-x-2 border-t p-4 border-t-secondary">
-              <TimeField
-                label="Start time"
-                value={state.timeRange?.start || null}
-                onChange={(v) => state.setTime('start', v)}
-                hourCycle={24}
-                className="shrink-0 grow basis-0"
-              />
-              <div className="text-quaternary">–</div>
-              <TimeField
-                label="End time"
-                value={state.timeRange?.end || null}
-                onChange={(v) => state.setTime('end', v)}
-                hourCycle={24}
-                className="shrink-0 grow basis-0"
-              />
+            <div className="flex flex-col items-center gap-3 border-t p-4 border-t-secondary">
+              <div className="flex w-full items-center space-x-2">
+                <TimeField
+                  label="Start time"
+                  value={state.timeRange?.start || null}
+                  onChange={(v) => state.setTime('start', v)}
+                  hourCycle={24}
+                  className="shrink-0 grow basis-0"
+                />
+                <div className="text-quaternary">–</div>
+                <TimeField
+                  label="End time"
+                  value={state.timeRange?.end || null}
+                  onChange={(v) => state.setTime('end', v)}
+                  hourCycle={24}
+                  className="shrink-0 grow basis-0"
+                />
+              </div>
+              {state.isInvalid && (
+                <p {...errorMessageProps} className="text-sans-md text-error">
+                  Date range is invalid
+                </p>
+              )}
             </div>
+            <div className="flex items-center justify-center space-x-2 px-4 border-t-secondary"></div>
           </Dialog>
         </Popover>
       )}