Filtering via FilterBar.

src/components/input/DateFilter.tsx

@@ -9,17 +9,14 @@ export interface DateFilterProps {
   value: string;
   startDate: Date;
   endDate: Date;
-  offset?: number;
-  className?: string;
   onChange?: (value: string) => void;
   showAllTime?: boolean;
-  alignment?: 'start' | 'center' | 'end';
 }
 
 export function DateFilter({
+  value,
   startDate,
   endDate,
-  value,
   onChange,
   showAllTime = false,
 }: DateFilterProps) {

src/components/input/FilterBar.tsx

@@ -24,18 +24,19 @@ export function FilterBar() {
   }
 
   return (
-    <Row gap alignItems="center" justifyContent="space-between" paddingY="3">
-      <Row alignItems="center" gap="3" wrap="wrap">
+    <Row gap alignItems="center" justifyContent="space-between" padding backgroundColor="3">
+      <Row alignItems="center" gap="2" wrap="wrap">
         {Object.keys(filters).map(key => {
           const filter = filters[key];
           const { name, label, operator, value } = filter;
-          const paramValue = isSearchOperator(operator) ? value : formatValue(value, key);
+          const paramValue = isSearchOperator(operator) ? value : formatValue(value, name);
 
           return (
             <Row
               key={name}
               border
-              padding
+              padding="2"
+              color
               backgroundColor
               borderRadius
               alignItems="center"
@@ -61,7 +62,7 @@ export function FilterBar() {
         })}
       </Row>
       <TooltipTrigger delay={0}>
-        <Button variant="quiet" onPress={handleResetFilter}>
+        <Button variant="wrapper" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
           <Icon>
             <Close />
           </Icon>

src/components/input/WebsiteDateFilter.tsx

@@ -78,7 +78,6 @@ export function WebsiteDateFilter({
         value={value}
         startDate={startDate}
         endDate={endDate}
-        offset={offset}
         onChange={handleChange}
         showAllTime={showAllTime}
       />