Code cleanup.

src/components/common/IconLabel.tsx

@@ -0,0 +1,32 @@
+import { Icon, type IconProps, Row, type RowProps, Text, type TextProps } from '@umami/react-zen';
+import type { ReactNode } from 'react';
+
+interface IconLabelProps extends RowProps {
+  icon: ReactNode;
+  label?: ReactNode;
+  weight?: TextProps['weight'];
+  iconProps?: Partial<IconProps>;
+  labelProps?: Partial<TextProps>;
+}
+
+export function IconLabel({
+  icon,
+  label,
+  weight,
+  iconProps,
+  labelProps,
+  children,
+  ...props
+}: IconLabelProps) {
+  return (
+    <Row alignItems="center" gap="2" {...props}>
+      <Icon {...iconProps}>{icon}</Icon>
+      {label && (
+        <Text weight={weight} {...labelProps}>
+          {label}
+        </Text>
+      )}
+      {children}
+    </Row>
+  );
+}

src/components/common/SideMenu.tsx

@@ -1,14 +1,6 @@
-import {
-  Column,
-  Heading,
-  IconLabel,
-  NavMenu,
-  NavMenuGroup,
-  NavMenuItem,
-  type NavMenuProps,
-  Row,
-} from '@umami/react-zen';
+import { Column, Heading, Row, Text } from '@umami/react-zen';
 import Link from 'next/link';
+import { IconLabel } from '@/components/common/IconLabel';
 
 interface SideMenuData {
   id: string;
@@ -22,7 +14,7 @@ interface SideMenuItems {
   items: SideMenuData[];
 }
 
-export interface SideMenuProps extends NavMenuProps {
+export interface SideMenuProps {
   items: SideMenuItems[];
   title?: string;
   selectedKey?: string;
@@ -42,39 +34,47 @@ export function SideMenu({
 
       return (
         <Link key={id} href={path}>
-          <NavMenuItem isSelected={isSelected}>
-            <IconLabel icon={icon}>{label}</IconLabel>
-          </NavMenuItem>
+          <Row padding borderRadius hover={{ backgroundColor: 'surface-raised' }}>
+            <IconLabel icon={icon}>
+              <Text weight={isSelected ? 'bold' : 'normal'}>{label}</Text>
+            </IconLabel>
+          </Row>
         </Link>
       );
     });
   };
 
   return (
-    <Column gap overflowY="auto" justifyContent="space-between" position="sticky" top="20px">
+    <Column
+      gap
+      overflowY="auto"
+      justifyContent="space-between"
+      position="sticky"
+      backgroundColor="surface-base"
+    >
       {title && (
         <Row padding>
-          <Heading size="1">{title}</Heading>
+          <Heading size="sm">{title}</Heading>
         </Row>
       )}
-      <NavMenu gap="6" {...props}>
+      <Column gap="6" {...props}>
         {items?.map(({ label, items }, index) => {
           if (label) {
             return (
-              <NavMenuGroup
+              <Column
                 title={label}
                 key={`${label}${index}`}
                 gap="1"
-                allowMinimize={allowMinimize}
                 marginBottom="3"
+                minHeight="40px"
               >
                 {renderItems(items)}
-              </NavMenuGroup>
+              </Column>
             );
           }
           return null;
         })}
-      </NavMenu>
+      </Column>
     </Column>
   );
 }

src/components/input/DialogButton.tsx

@@ -4,10 +4,10 @@ import {
   Dialog,
   type DialogProps,
   DialogTrigger,
-  IconLabel,
   Modal,
 } from '@umami/react-zen';
 import type { CSSProperties, ReactNode } from 'react';
+import { IconLabel } from '@/components/common/IconLabel';
 import { useMobile } from '@/components/hooks';
 
 export interface DialogButtonProps extends Omit<ButtonProps, 'children'> {

src/components/input/LanguageButton.tsx

@@ -14,12 +14,12 @@ export function LanguageButton() {
   return (
     <MenuTrigger key="language">
       <Button variant="quiet">
-        <Icon>
+        <Icon color="primary">
           <Globe />
         </Icon>
       </Button>
       <Popover placement="bottom end">
-        <Dialog variant="menu">
+        <Dialog>
           <Grid columns="repeat(3, minmax(200px, 1fr))" overflow="hidden">
             {items.map(({ value, label }) => {
               return (

src/components/input/NavButton.tsx

@@ -1,7 +1,6 @@
 import {
   Column,
   Icon,
-  IconLabel,
   Menu,
   MenuItem,
   MenuSection,
@@ -15,6 +14,7 @@ import {
 } from '@umami/react-zen';
 import { ArrowRight } from 'lucide-react';
 import type { Key } from 'react';
+import { IconLabel } from '@/components/common/IconLabel';
 import {
   useConfig,
   useLoginQuery,
@@ -77,8 +77,8 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
           padding
           border
           borderRadius
-          shadow="1"
-          maxHeight="40px"
+          shadow="sm"
+          minHeight="40px"
           role="button"
           style={{ cursor: 'pointer', textWrap: 'nowrap', overflow: 'hidden', outline: 'none' }}
         >

src/components/input/SegmentFilters.tsx

@@ -1,5 +1,6 @@
-import { IconLabel, List, ListItem } from '@umami/react-zen';
+import { List, ListItem } from '@umami/react-zen';
 import { Empty } from '@/components/common/Empty';
+import { IconLabel } from '@/components/common/IconLabel';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useWebsiteSegmentsQuery } from '@/components/hooks';
 import { ChartPie, UserPlus } from '@/components/icons';

src/components/metrics/ListTable.tsx

@@ -111,14 +111,7 @@ const AnimatedRow = ({
   });
 
   return (
-    <Grid
-      columns="1fr 50px 50px"
-      paddingLeft="2"
-      alignItems="center"
-      hoverBackgroundColor="2"
-      borderRadius
-      gap
-    >
+    <Grid columns="1fr 50px 50px" paddingLeft="2" alignItems="center" borderRadius gap>
       <Row alignItems="center">
         <Text truncate={true} style={{ maxWidth: isPhone ? '200px' : '400px' }}>
           {label}