Theme change. Render custom date ranges.

src/app/(main)/App.tsx

@@ -38,7 +38,7 @@ export function App({ children }) {
         gridRow="2 / 3"
         alignItems="center"
         overflow="auto"
-        backgroundColor="0"
+        backgroundColor="2"
       >
         <Page>
           {children}

src/app/(main)/MenuBar.tsx

@@ -17,7 +17,7 @@ export function MenuBar(props: RowProps) {
       paddingY="3"
       paddingX="3"
       paddingRight="5"
-      backgroundColor="0"
+      backgroundColor="2"
       style={{ borderBottom: '1px solid var(--border-color)' }}
     >
       <Row>

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -17,6 +17,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
 import { ScreenTable } from '@/components/metrics/ScreenTable';
 import { TagsTable } from '@/components/metrics/TagsTable';
 import { ChannelsTable } from '@/components/metrics/ChannelsTable';
+import { Panel } from '@/components/common/Panel';
 
 const views = {
   url: PagesTable,
@@ -145,15 +146,17 @@ export function WebsiteExpandedView({
         <SideBar items={items} selectedKey={view} />
       </Column>
       <Column>
-        <DetailsComponent
-          websiteId={websiteId}
-          domainName={domainName}
-          animate={false}
-          virtualize={true}
-          itemCount={25}
-          allowFilter={true}
-          allowSearch={true}
-        />
+        <Panel>
+          <DetailsComponent
+            websiteId={websiteId}
+            domainName={domainName}
+            animate={false}
+            virtualize={true}
+            itemCount={25}
+            allowFilter={true}
+            allowSearch={true}
+          />
+        </Panel>
       </Column>
     </Grid>
   );

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -8,7 +8,6 @@ import { EventsMetricsBar } from './EventsMetricsBar';
 import { Panel } from '@/components/common/Panel';
 import { EventsChart } from '@/components/metrics/EventsChart';
 import { GridRow } from '@/components/common/GridRow';
-import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
 import { EventProperties } from './EventProperties';
 
@@ -29,28 +28,18 @@ export function EventsPage({ websiteId }) {
       </Panel>
       <GridRow layout="two-one">
         <Panel gridColumn="span 2">
-          <EventsChart websiteId={websiteId} />
+          <EventsChart websiteId={websiteId} focusLabel={label} />
         </Panel>
         <Panel>
-          <MetricsTable
+          <EventsTable
             websiteId={websiteId}
             type="event"
             title={formatMessage(labels.events)}
             metric={formatMessage(labels.actions)}
+            onLabelClick={handleLabelClick}
           />
         </Panel>
       </GridRow>
-      <EventsMetricsBar websiteId={websiteId} />
-      <GridRow columns="two-one">
-        <EventsChart websiteId={websiteId} focusLabel={label} />
-        <EventsTable
-          websiteId={websiteId}
-          type="event"
-          title={formatMessage(labels.events)}
-          metric={formatMessage(labels.actions)}
-          onLabelClick={handleLabelClick}
-        />
-      </GridRow>
       <Panel marginY="6">
         <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
           <TabList>

src/components/input/DateFilter.tsx

@@ -1,6 +1,6 @@
 import { useState, Key, Fragment } from 'react';
 import { Icon, Modal, Select, Text, Row, ListItem, ListSeparator, Dialog } from '@umami/react-zen';
-import { endOfYear, isSameDay } from 'date-fns';
+import { differenceInDays, endOfYear, isSameDay } from 'date-fns';
 import { DatePickerForm } from '@/components/metrics/DatePickerForm';
 import { useLocale, useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
@@ -92,13 +92,26 @@ export function DateFilter({
     onChange(value.toString());
   };
 
+  const renderValue = ({ defaultChildren }) => {
+    return value.startsWith('range') ? (
+      <CustomRange
+        startDate={startDate}
+        endDate={endDate}
+        isSingleDate={differenceInDays(endDate, startDate) === 0}
+      />
+    ) : (
+      defaultChildren
+    );
+  };
+
   return (
     <>
       <Select
         selectedKey={value}
         placeholder={formatMessage(labels.selectDate)}
         onSelectionChange={handleChange}
-        style={{ width: '200px' }}
+        renderValue={renderValue}
+        style={{ width: 'auto' }}
       >
         {options.map(({ label, value, divider }: any) => {
           return (
@@ -127,29 +140,21 @@ export function DateFilter({
   );
 }
 
-export const CustomRange = ({ startDate, endDate, unit, onClick }) => {
+export const CustomRange = ({ startDate, endDate, isSingleDate }) => {
   const { locale } = useLocale();
 
-  const monthFormat = unit === 'month';
-
-  function handleClick(e) {
-    e.stopPropagation();
-
-    onClick();
-  }
-
   return (
     <Row gap="3" alignItems="center" wrap="nowrap">
-      <Icon onClick={handleClick}>
+      <Icon>
         <Icons.Calendar />
       </Icon>
-      <Text>
-        {monthFormat ? (
-          <>{formatDate(startDate, 'MMMM yyyy', locale)}</>
+      <Text wrap="nowrap">
+        {isSingleDate ? (
+          <>{formatDate(startDate, 'PP', locale)}</>
         ) : (
           <>
-            {formatDate(startDate, 'd LLL y', locale)}
-            {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
+            {formatDate(startDate, 'PP', locale)}
+            {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'PP', locale)}`}
           </>
         )}
       </Text>

src/components/metrics/DatePickerForm.tsx

@@ -64,7 +64,7 @@ export function DatePickerForm({
       <Row justifyContent="end" gap>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
         <Button variant="primary" onPress={handleSave} isDisabled={disabled}>
-          {formatMessage(labels.save)}
+          {formatMessage(labels.apply)}
         </Button>
       </Row>
     </Column>

src/components/metrics/FilterBar.tsx

@@ -25,8 +25,8 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
 
   return (
     <Row
-      gap="3"
-      backgroundColor="2"
+      gap
+      backgroundColor="1"
       alignItems="center"
       justifyContent="space-between"
       paddingY="3"