Refactored website components. New layout.

src/components/common/GridRow.tsx

@@ -5,13 +5,13 @@ const LAYOUTS = {
   two: {
     columns: {
       xs: '1fr',
-      md: 'repeat(auto-fill, minmax(600px, 1fr))',
+      md: 'repeat(auto-fill, minmax(560px, 1fr))',
     },
   },
   three: {
     columns: {
       xs: '1fr',
-      md: 'repeat(auto-fill, minmax(400px, 1fr))',
+      md: 'repeat(auto-fill, minmax(360px, 1fr))',
     },
   },
   'one-two': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },

src/components/common/PageBody.tsx

@@ -3,13 +3,14 @@ import { ReactNode } from 'react';
 import { AlertBanner, Loading, Column } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 
-export function Page({
+export function PageBody({
+  maxWidth = '1600px',
   error,
   isLoading,
   children,
   ...props
 }: {
-  className?: string;
+  maxWidth?: string;
   error?: unknown;
   isLoading?: boolean;
   children?: ReactNode;
@@ -25,7 +26,7 @@ export function Page({
   }
 
   return (
-    <Column {...props} width="100%" maxWidth="1320px" margin="auto" paddingBottom="9">
+    <Column {...props} width="100%" paddingBottom="9" style={{ margin: '0 auto', maxWidth }}>
       {children}
     </Column>
   );

src/components/common/PageHeader.tsx

@@ -15,8 +15,14 @@ export function PageHeader({
   children?: ReactNode;
 }) {
   return (
-    <Row justifyContent="space-between" alignItems="center" paddingY="6" border="bottom">
-      <Row gap="3">
+    <Row
+      justifyContent="space-between"
+      alignItems="center"
+      paddingY="6"
+      border="bottom"
+      width="100%"
+    >
+      <Row alignItems="center" gap="3">
         {icon && <Icon>{icon}</Icon>}
         {title && <Heading size="4">{title}</Heading>}
         {description && <Text color="muted">{description}</Text>}

src/components/common/SideMenu.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Text, List, ListItem, Icon, Row } from '@umami/react-zen';
+import { Text, NavMenu, NavMenuItem, Icon, Row } from '@umami/react-zen';
+import Link from 'next/link';
 
 export interface SideMenuProps {
   items: { id: string; label: string; url: string; icon?: ReactNode }[];
@@ -8,17 +9,19 @@ export interface SideMenuProps {
 
 export function SideMenu({ items, selectedKey }: SideMenuProps) {
   return (
-    <List>
+    <NavMenu highlightColor="3">
       {items.map(({ id, label, url, icon }) => {
         return (
-          <ListItem key={id} id={id} href={url}>
-            <Row alignItems="center" gap>
-              {icon && <Icon>{icon}</Icon>}
-              <Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text>
-            </Row>
-          </ListItem>
+          <Link key={id} href={url}>
+            <NavMenuItem isSelected={id === selectedKey}>
+              <Row alignItems="center" gap>
+                {icon && <Icon>{icon}</Icon>}
+                <Text>{label}</Text>
+              </Row>
+            </NavMenuItem>
+          </Link>
         );
       })}
-    </List>
+    </NavMenu>
   );
 }

src/components/input/FilterBar.tsx

@@ -2,9 +2,8 @@ import { MouseEvent } from 'react';
 import { Button, Icon, Icons, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
 import { useNavigation, useMessages, useFormat, useFilters } from '@/components/hooks';
 import { isSearchOperator } from '@/lib/params';
-import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
 
-export function FilterBar({ websiteId }: { websiteId: string }) {
+export function FilterBar() {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const { router, renderUrl } = useNavigation();
@@ -25,8 +24,9 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
 
   return (
     <Row
+      theme="dark"
+      backgroundColor="1"
       gap
-      backgroundColor="3"
       alignItems="center"
       justifyContent="space-between"
       paddingY="2"
@@ -57,18 +57,21 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
             >
               <Row alignItems="center" gap="4">
                 <Row alignItems="center" gap="2">
-                  <Text weight="bold">{label}</Text>
+                  <Text color="12" weight="bold">
+                    {label}
+                  </Text>
                   <Text color="11">{operatorLabels[operator]}</Text>
-                  <Text weight="bold">{paramValue}</Text>
+                  <Text color="12" weight="bold">
+                    {paramValue}
+                  </Text>
                 </Row>
-                <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
+                <Icon onClick={e => handleCloseFilter(name, e)} size="xs" color>
                   <Icons.Close />
                 </Icon>
               </Row>
             </Row>
           );
         })}
-        <WebsiteFilterButton websiteId={websiteId} alignment="center" showText={false} />
       </Row>
       <TooltipTrigger delay={0}>
         <Button variant="quiet" onPress={handleResetFilter}>

src/components/messages.ts

@@ -157,6 +157,7 @@ export const labels = defineMessages({
   eventData: { id: 'label.event-data', defaultMessage: 'Event data' },
   sessionData: { id: 'label.session-data', defaultMessage: 'Session data' },
   funnel: { id: 'label.funnel', defaultMessage: 'Funnel' },
+  funnels: { id: 'label.funnels', defaultMessage: 'Funnels' },
   funnelDescription: {
     id: 'label.funnel-description',
     defaultMessage: 'Understand the conversion and drop-off rate of users.',
@@ -315,6 +316,8 @@ export const labels = defineMessages({
   other: { id: 'label.other', defaultMessage: 'Other' },
   boards: { id: 'label.boards', defaultMessage: 'Boards' },
   apply: { id: 'label.apply', defaultMessage: 'Apply' },
+  links: { id: 'label.links', defaultMessage: 'Links' },
+  pixels: { id: 'label.pixels', defaultMessage: 'Pixels' },
 });
 
 export const messages = defineMessages({