Updated icons.

src/app/(main)/SideNav.module.css

@@ -4,7 +4,7 @@
   width: 200px;
   height: 100vh;
   background-color: var(--layer-color-1);
-  border-right: 1px solid var(--layer-color-2);
+  border-right: 1px solid var(--border-color);
 }
 
 .header {

src/app/(main)/SideNav.tsx

@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
 import Link from 'next/link';
-import { Icon } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
+import { Icons, Lucide } from '@/components/icons';
 import { useMessages, useTeamUrl } from '@/components/hooks';
-import styles from './SideNav.module.css';
 
 export function SideNav() {
   const { formatMessage, labels } = useMessages();
@@ -13,69 +11,44 @@ export function SideNav() {
     {
       label: formatMessage(labels.boards),
       href: renderTeamUrl('/boards'),
-      icon: <Icons.Dashboard />,
+      icon: <Lucide.LayoutDashboard />,
     },
     {
       label: formatMessage(labels.dashboard),
       href: renderTeamUrl('/dashboard'),
-      icon: <Icons.BarChart />,
+      icon: <Lucide.Copy />,
     },
     {
       label: formatMessage(labels.websites),
       href: renderTeamUrl('/websites'),
-      icon: <Icons.Globe />,
+      icon: <Lucide.Globe />,
     },
     {
       label: formatMessage(labels.reports),
       href: renderTeamUrl('/reports'),
-      icon: <Icons.Reports />,
+      icon: <Lucide.ChartArea />,
     },
     {
       label: formatMessage(labels.settings),
       href: renderTeamUrl('/settings'),
-      icon: <Icons.Gear />,
+      icon: <Lucide.Settings />,
     },
   ].filter(n => n);
 
   return (
-    <div className={styles.sidenav}>
+    <Nav>
       <SideNavSection>
-        <SideNavHeader />
+        <SideNavHeader name="umami" icon={<Icons.Logo />} />
       </SideNavSection>
       <SideNavSection>
-        {links.map(props => {
-          return <SideNavItem key={props.href} {...props} />;
+        {links.map(({ href, label, icon }) => {
+          return (
+            <Link key={href} href={href}>
+              <SideNavItem label={label} icon={icon} />
+            </Link>
+          );
         })}
       </SideNavSection>
-    </div>
+    </Nav>
   );
 }
-
-const SideNavHeader = () => {
-  return (
-    <div className={styles.header}>
-      <Icon size="sm">
-        <Icons.Logo />
-      </Icon>
-      <div className={styles.name}>umami</div>
-    </div>
-  );
-};
-
-const SideNavSection = ({ title, children }: { title?: string; children: ReactNode }) => {
-  return (
-    <div className={styles.section}>
-      {title && <div className={styles.title}>{title}</div>}
-      <div className={styles.items}>{children}</div>
-    </div>
-  );
-};
-
-const SideNavItem = ({ href, label, icon }: { href: string; label: string; icon: ReactNode }) => {
-  return (
-    <Link href={href} className={styles.item}>
-      <Icon size="sm">{icon}</Icon>
-      {label}
-    </Link>
-  );
-};

src/app/(main)/teams/[teamId]/layout.tsx

@@ -1,13 +1,13 @@
 import { TeamProvider } from './TeamProvider';
 import { Metadata } from 'next';
-import TeamSettingsLayout from './settings/TeamSettingsLayout';
+import { TeamSettingsLayout } from './settings/TeamSettingsLayout';
 
 export default async function ({
   children,
   params,
 }: {
   children: any;
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   const { teamId } = await params;
 

src/assets/dashboard.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512pt" height="512pt" viewBox="0 0 512 512"><path d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0 0 32 37.332v96a5.337 5.337 0 0 0 5.332 5.336h160a5.338 5.338 0 0 0 5.336-5.336v-96A5.337 5.337 0 0 0 197.332 32zm160 480h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0 0 32 250.668v224A5.336 5.336 0 0 0 37.332 480h160a5.337 5.337 0 0 0 5.336-5.332v-224a5.338 5.338 0 0 0-5.336-5.336zM474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 0 0-5.336 5.336v96a5.337 5.337 0 0 0 5.336 5.332h160a5.336 5.336 0 0 0 5.332-5.332v-96a5.337 5.337 0 0 0-5.332-5.336zm160-74.664h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 0 0-5.336 5.332v224a5.338 5.338 0 0 0 5.336 5.336h160a5.337 5.337 0 0 0 5.332-5.336v-224A5.336 5.336 0 0 0 474.668 32zm0 0"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>

src/assets/pushpin.svg

@@ -1,8 +1 @@
- <svg
-      viewBox="0 0 1024 1024"
-      fill="currentColor"
-      height="1em"
-      width="1em"
-    >
-      <path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z" />
-      </svg>
+<svg viewBox="0 0 1024 1024" fill="currentColor" height="1em" width="1em"><path d="M878.3 392.1 631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 0 0-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z"/></svg>

src/components/icons.ts

@@ -1,4 +1,5 @@
 import { Icons as ReactBasicsIcons } from 'react-basics';
+import * as lucide from 'lucide-react';
 import AddUser from '@/assets/add-user.svg';
 import Bars from '@/assets/bars.svg';
 import BarChart from '@/assets/bar-chart.svg';
@@ -56,4 +57,6 @@ const icons = {
   Visitor,
 };
 
+export const Lucide = lucide;
+
 export const Icons = icons;

src/components/input/LanguageButton.tsx

@@ -1,7 +1,7 @@
 import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog } from '@umami/react-zen';
 import { languages } from '@/lib/lang';
 import { useLocale } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Globe } from 'lucide-react';
 
 export function LanguageButton() {
   const { locale, saveLocale } = useLocale();
@@ -15,7 +15,7 @@ export function LanguageButton() {
     <MenuTrigger key="language">
       <Button variant="quiet">
         <Icon>
-          <Icons.Globe />
+          <Globe />
         </Icon>
       </Button>
       <Popover placement="bottom end">

src/components/input/ProfileButton.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
-import { Icons } from '@/components/icons';
+import { User, LogOut, CircleUserRound } from 'lucide-react';
 import { useMessages, useLogin } from '@/components/hooks';
 
 export function ProfileButton() {
@@ -33,7 +33,7 @@ export function ProfileButton() {
     <MenuTrigger>
       <Button data-test="button-profile" variant="quiet">
         <Icon>
-          <Icons.Profile />
+          <CircleUserRound />
         </Icon>
       </Button>
       <Popover placement="bottom end">
@@ -42,14 +42,14 @@ export function ProfileButton() {
             <MenuSeparator />
             <MenuItem id="profile">
               <Icon>
-                <Icons.User />
+                <User />
               </Icon>
               <Text>{formatMessage(labels.profile)}</Text>
             </MenuItem>
             {!cloudMode && (
               <MenuItem data-test="item-logout" id="logout">
                 <Icon>
-                  <Icons.Logout />
+                  <LogOut />
                 </Icon>
                 <Text>{formatMessage(labels.logout)}</Text>
               </MenuItem>

src/components/input/TeamsButton.tsx

@@ -13,8 +13,9 @@ import {
   Popover,
   Row,
   Box,
+  Icons,
 } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { User, Users } from 'lucide-react';
 import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
 
 export function TeamsButton({
@@ -50,10 +51,10 @@ export function TeamsButton({
     <MenuTrigger>
       <Button className={className} variant="quiet">
         <Row alignItems="center" gap="3">
-          <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
+          <Icon>{teamId ? <Users /> : <User />}</Icon>
           {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
-          <Icon>
-            <Icons.ChevronDown />
+          <Icon rotate={90} size="sm">
+            <Icons.Chevron />
           </Icon>
         </Row>
       </Button>
@@ -68,7 +69,7 @@ export function TeamsButton({
             <MenuSection title={formatMessage(labels.myAccount)}>
               <MenuItem id={user.id}>
                 <Icon>
-                  <Icons.User />
+                  <User />
                 </Icon>
                 <Text wrap="nowrap">{user.username}</Text>
               </MenuItem>
@@ -78,7 +79,7 @@ export function TeamsButton({
               {result?.data?.map(({ id, name }) => (
                 <MenuItem key={id} id={id}>
                   <Icon size="sm">
-                    <Icons.Users />
+                    <Users />
                   </Icon>
                   <Text wrap="nowrap">{name}</Text>
                 </MenuItem>