Semantic search UI tweaks (#13591)

* Semantic search UI tweaks

* clean up

web/src/components/filter/CalendarFilterButton.tsx

@@ -12,6 +12,7 @@ import { isMobile } from "react-device-detect";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { DateRangePicker } from "../ui/calendar-range";
 import { DateRange } from "react-day-picker";
+import { useState } from "react";
 
 type CalendarFilterButtonProps = {
   reviewSummary?: ReviewSummary;
@@ -91,6 +92,8 @@ export function CalendarRangeFilterButton({
   defaultText,
   updateSelectedRange,
 }: CalendarRangeFilterButtonProps) {
+  const [open, setOpen] = useState(false);
+
   const selectedDate = useFormattedRange(
     range?.from == undefined ? 0 : range.from.getTime() / 1000 + 1,
     range?.to == undefined ? 0 : range.to.getTime() / 1000 - 1,
@@ -119,24 +122,18 @@ export function CalendarRangeFilterButton({
         initialDateFrom={range?.from}
         initialDateTo={range?.to}
         showCompare={false}
-        onUpdate={(range) => updateSelectedRange(range.range)}
+        onUpdate={(range) => {
+          updateSelectedRange(range.range);
+          setOpen(false);
+        }}
+        onReset={() => updateSelectedRange(undefined)}
       />
-      <DropdownMenuSeparator />
-      <div className="flex items-center justify-center p-2">
-        <Button
-          onClick={() => {
-            updateSelectedRange(undefined);
-          }}
-        >
-          Reset
-        </Button>
-      </div>
     </>
   );
 
   if (isMobile) {
     return (
-      <Drawer>
+      <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
         <DrawerContent>{content}</DrawerContent>
       </Drawer>
@@ -144,9 +141,9 @@ export function CalendarRangeFilterButton({
   }
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent className="w-[840px]">{content}</PopoverContent>
+      <PopoverContent className="w-auto">{content}</PopoverContent>
     </Popover>
   );
 }

web/src/components/ui/calendar-range.tsx

@@ -1,7 +1,4 @@
-/* eslint-disable max-lines */
-"use client";
-
-import { type FC, useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Button } from "./button";
 import { Calendar } from "./calendar";
 import { Label } from "./label";
@@ -19,6 +16,7 @@ import { LuCheck } from "react-icons/lu";
 export interface DateRangePickerProps {
   /** Click handler for applying the updates from DateRangePicker. */
   onUpdate?: (values: { range: DateRange; rangeCompare?: DateRange }) => void;
+  onReset?: () => void;
   /** Initial value for start date */
   initialDateFrom?: Date | string;
   /** Initial value for end date */
@@ -73,14 +71,15 @@ const PRESETS: Preset[] = [
 ];
 
 /** The DateRangePicker component allows a user to select a range of dates */
-export const DateRangePicker: FC<DateRangePickerProps> = ({
+export function DateRangePicker({
   initialDateFrom = new Date(new Date().setHours(0, 0, 0, 0)),
   initialDateTo,
   initialCompareFrom,
   initialCompareTo,
   onUpdate,
+  onReset,
   showCompare = true,
-}): JSX.Element => {
+}: DateRangePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const [range, setRange] = useState<DateRange>({
@@ -283,7 +282,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
     isSelected: boolean;
   }): JSX.Element => (
     <Button
-      className={cn(isSelected && "pointer-events-none text-white")}
+      className={cn(isSelected && "pointer-events-none text-primary")}
       variant="ghost"
       onClick={() => {
         setPreset(preset);
@@ -415,17 +414,19 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
           </div>
         )}
       </div>
-      <div className="flex justify-end gap-2 py-2 pr-4">
+      <div className="flex justify-center gap-2 py-2 pr-4">
         <Button
           onClick={() => {
             setIsOpen(false);
             resetValues();
+            onReset?.();
           }}
           variant="ghost"
         >
-          Cancel
+          Reset
         </Button>
         <Button
+          variant="select"
           onClick={() => {
             setIsOpen(false);
             if (
@@ -436,9 +437,9 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
             }
           }}
         >
-          Update
+          Apply
         </Button>
       </div>
     </div>
   );
-};
+}