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>