New menu layout.

src/components/common/DateDisplay.tsx

@@ -1,7 +1,7 @@
 import { Icon, Row, Text } from '@umami/react-zen';
 import { differenceInDays, isSameDay } from 'date-fns';
 import { useLocale } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Lucide } from '@/components/icons';
 import { formatDate } from '@/lib/date';
 
 export function DateDisplay({ startDate, endDate }) {
@@ -11,7 +11,7 @@ export function DateDisplay({ startDate, endDate }) {
   return (
     <Row gap="3" alignItems="center" wrap="nowrap">
       <Icon>
-        <Icons.Calendar />
+        <Lucide.Calendar />
       </Icon>
       <Text wrap="nowrap">
         {isSingleDate ? (

src/components/input/DateFilter.tsx

@@ -106,6 +106,7 @@ export function DateFilter({
         placeholder={formatMessage(labels.selectDate)}
         onChange={handleChange}
         renderValue={renderValue}
+        popoverProps={{ style: { width: 200 } }}
       >
         {options.map(({ label, value, divider }: any) => {
           return (

src/components/input/WebsiteDateFilter.tsx

@@ -85,8 +85,8 @@ export function WebsiteDateFilter({
       />
       {!isAllTime && compare && (
         <Row alignItems="center" gap>
-          <Text>VS</Text>
-          <Select selectedKey={compare} onSelectionChange={handleSelect} style={{ width: '200px' }}>
+          <Text weight="bold">VS</Text>
+          <Select value={compare} onChange={handleSelect} popoverProps={{ style: { width: 200 } }}>
             <ListItem id="prev">{formatMessage(labels.previousPeriod)}</ListItem>
             <ListItem id="yoy">{formatMessage(labels.previousYear)}</ListItem>
           </Select>

src/components/metrics/FilterBar.tsx

@@ -26,16 +26,16 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
   return (
     <Row
       gap
-      backgroundColor="1"
+      backgroundColor="3"
       alignItems="center"
       justifyContent="space-between"
-      paddingY="3"
-      paddingLeft="5"
+      paddingY="2"
+      paddingLeft="3"
       paddingRight="2"
       border
       borderRadius="2"
     >
-      <Row alignItems="center" gap="3" wrap="wrap">
+      <Row alignItems="center" gap="3" wrap="wrap" paddingX="2">
         <Text color="11" weight="bold">
           {formatMessage(labels.filters)}
         </Text>
@@ -61,11 +61,9 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
                   <Text color="11">{operatorLabels[operator]}</Text>
                   <Text weight="bold">{paramValue}</Text>
                 </Row>
-                <Button variant="quiet" size="xs" style={{ left: '5px' }}>
-                  <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
-                    <Icons.Close />
-                  </Icon>
-                </Button>
+                <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
+                  <Icons.Close />
+                </Icon>
               </Row>
             </Row>
           );