Start using react-zen.

package.json

@@ -75,6 +75,7 @@
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.28.6",
     "@umami/prisma-client": "^0.14.0",
+    "@umami/react-zen": "^0.50.0",
     "@umami/redis-client": "^0.26.0",
     "bcryptjs": "^2.4.3",
     "chalk": "^4.1.1",
@@ -111,7 +112,7 @@
     "react-basics": "^0.126.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^4.0.4",
-    "react-intl": "^6.5.5",
+    "react-intl": "^7.1.6",
     "react-simple-maps": "^2.3.0",
     "react-use-measure": "^2.0.4",
     "react-window": "^1.8.6",
@@ -126,6 +127,7 @@
   "devDependencies": {
     "@formatjs/cli": "^4.2.29",
     "@netlify/plugin-nextjs": "^5.8.1",
+    "@react-spring/types": "^9.7.5",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
@@ -135,9 +137,9 @@
     "@svgr/webpack": "^8.1.0",
     "@types/cypress": "^1.1.3",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.5",
-    "@types/react": "^19.0.4",
-    "@types/react-dom": "^19.0.2",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/react-intl": "^3.0.0",
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^6.7.3",

src/app/(main)/App.tsx

@@ -1,9 +1,11 @@
 'use client';
-import { Loading } from 'react-basics';
+import { Grid, Loading } from '@umami/react-zen';
 import Script from 'next/script';
 import { usePathname } from 'next/navigation';
-import { useLogin, useConfig } from '@/components/hooks';
 import UpdateNotice from './UpdateNotice';
+import NavBar from '@/app/(main)/NavBar';
+import Page from '@/components/layout/Page';
+import { useLogin, useConfig } from '@/components/hooks';
 
 export function App({ children }) {
   const { user, isLoading, error } = useLogin();
@@ -27,13 +29,16 @@ export function App({ children }) {
   }
 
   return (
-    <>
-      {children}
-      <UpdateNotice user={user} config={config} />
-      {process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (
-        <Script src={`${process.env.basePath || ''}/telemetry.js`} />
-      )}
-    </>
+    <Grid rows="auto 1fr">
+      <NavBar />
+      <Page>
+        <UpdateNotice user={user} config={config} />
+        {children}
+        {process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (
+          <Script src={`${process.env.basePath || ''}/telemetry.js`} />
+        )}
+      </Page>
+    </Grid>
   );
 }
 

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

@@ -10,16 +10,6 @@
   z-index: 200;
 }
 
-.logo {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  font-size: 16px;
-  font-weight: 700;
-  min-width: 0;
-}
-
 .links {
   display: flex;
   flex-direction: row;
@@ -48,15 +38,10 @@
   border-bottom: 2px solid var(--primary400);
 }
 
-.actions,
 .mobile {
-  display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-}
-
-.mobile {
   display: none;
 }
 
@@ -65,8 +50,7 @@
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .links,
-  .actions {
+  .links {
     display: none;
   }
 

src/app/(main)/NavBar.tsx

@@ -1,24 +1,15 @@
 'use client';
-import { useEffect } from 'react';
-import { Icon, Text } from 'react-basics';
+import { Icon, Text, ThemeButton, Row } from '@umami/react-zen';
 import Link from 'next/link';
-import classNames from 'classnames';
-import HamburgerButton from '@/components/common/HamburgerButton';
-import ThemeButton from '@/components/input/ThemeButton';
 import LanguageButton from '@/components/input/LanguageButton';
 import ProfileButton from '@/components/input/ProfileButton';
 import TeamsButton from '@/components/input/TeamsButton';
 import Icons from '@/components/icons';
-import { useMessages, useNavigation, useTeamUrl } from '@/components/hooks';
-import { getItem, setItem } from '@/lib/storage';
-import styles from './NavBar.module.css';
+import { useMessages, useTeamUrl } from '@/components/hooks';
 
 export function NavBar() {
   const { formatMessage, labels } = useMessages();
-  const { pathname, router } = useNavigation();
-  const { teamId, renderTeamUrl } = useTeamUrl();
-
-  const cloudMode = !!process.env.cloudMode;
+  const { renderTeamUrl } = useTeamUrl();
 
   const links = [
     { label: formatMessage(labels.dashboard), url: renderTeamUrl('/dashboard') },
@@ -27,106 +18,32 @@ export function NavBar() {
     { label: formatMessage(labels.settings), url: renderTeamUrl('/settings') },
   ].filter(n => n);
 
-  const menuItems = [
-    {
-      label: formatMessage(labels.dashboard),
-      url: renderTeamUrl('/dashboard'),
-    },
-    !cloudMode && {
-      label: formatMessage(labels.settings),
-      url: renderTeamUrl('/settings'),
-      children: [
-        ...(teamId
-          ? [
-              {
-                label: formatMessage(labels.team),
-                url: renderTeamUrl('/settings/team'),
-              },
-            ]
-          : []),
-        {
-          label: formatMessage(labels.websites),
-          url: renderTeamUrl('/settings/websites'),
-        },
-        ...(!teamId
-          ? [
-              {
-                label: formatMessage(labels.teams),
-                url: renderTeamUrl('/settings/teams'),
-              },
-              {
-                label: formatMessage(labels.users),
-                url: '/settings/users',
-              },
-            ]
-          : [
-              {
-                label: formatMessage(labels.members),
-                url: renderTeamUrl('/settings/members'),
-              },
-            ]),
-      ],
-    },
-    {
-      label: formatMessage(labels.profile),
-      url: '/profile',
-    },
-    !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
-  ].filter(n => n);
-
-  const handleTeamChange = (teamId: string) => {
-    const url = teamId ? `/teams/${teamId}` : '/';
-    if (!cloudMode) {
-      setItem('umami.team', { id: teamId });
-    }
-    router.push(cloudMode ? `${process.env.cloudUrl}${url}` : url);
-  };
-
-  useEffect(() => {
-    if (!cloudMode) {
-      const teamIdLocal = getItem('umami.team')?.id;
-
-      if (teamIdLocal && teamIdLocal !== teamId) {
-        router.push(
-          pathname !== '/' && pathname !== '/dashboard' ? '/' : `/teams/${teamIdLocal}/dashboard`,
-        );
-      }
-    }
-  }, [cloudMode]);
-
   return (
-    <div className={styles.navbar}>
-      <div className={styles.logo}>
-        <Icon size="lg">
+    <Row justifyContent="space-between" alignItems="center" paddingX="4" paddingY="3">
+      <Row alignItems="center" gap="3">
+        <Icon size="md">
           <Icons.Logo />
         </Icon>
-        <Text>umami</Text>
-      </div>
-      <div className={styles.links}>
+        <Text size="3" weight="bold">
+          umami
+        </Text>
+      </Row>
+      <Row gap="4">
         {links.map(({ url, label }) => {
           return (
-            <Link
-              key={url}
-              href={url}
-              className={classNames({ [styles.selected]: pathname.startsWith(url) })}
-              prefetch={url !== '/settings'}
-            >
+            <Link key={url} href={url} prefetch={url !== '/settings'}>
               <Text>{label}</Text>
             </Link>
           );
         })}
-      </div>
-      <div className={styles.actions}>
-        <TeamsButton onChange={handleTeamChange} />
+      </Row>
+      <Row justifyContent="flex-end">
+        <TeamsButton />
         <ThemeButton />
         <LanguageButton />
         <ProfileButton />
-      </div>
-      <div className={styles.mobile}>
-        <TeamsButton onChange={handleTeamChange} showText={false} />
-        <HamburgerButton menuItems={menuItems} />
-      </div>
-    </div>
+      </Row>
+    </Row>
   );
 }
 

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

@@ -1,38 +0,0 @@
-.notice {
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 800px;
-  gap: 20px;
-  margin: 60px auto;
-  align-self: center;
-  background: var(--base50);
-  padding: 20px;
-  border: 1px solid var(--base300);
-  border-radius: var(--border-radius);
-  z-index: 9999;
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--font-color100);
-  font-weight: 700;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  gap: 10px;
-  flex: 0;
-}
-
-@media only screen and (max-width: 992px) {
-  .message {
-    height: 80px;
-  }
-}

src/app/(main)/UpdateNotice.tsx

@@ -1,12 +1,10 @@
 import { useEffect, useCallback, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from 'react-basics';
+import { Button, AlertBanner, Flexbox } from '@umami/react-zen';
 import { setItem } from '@/lib/storage';
 import useStore, { checkVersion } from '@/store/version';
 import { REPO_URL, VERSION_CHECK } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
 import { usePathname } from 'next/navigation';
-import styles from './UpdateNotice.module.css';
 
 export function UpdateNotice({ user, config }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -47,19 +45,15 @@ export function UpdateNotice({ user, config }) {
     return null;
   }
 
-  return createPortal(
-    <div className={styles.notice}>
-      <div className={styles.message}>
-        {formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
-      </div>
-      <div className={styles.buttons}>
-        <Button variant="primary" onClick={handleViewClick}>
+  return (
+    <Flexbox justifyContent="space-between" alignItems="center">
+      <AlertBanner title={formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}>
+        <Button variant="primary" onPress={handleViewClick}>
           {formatMessage(labels.viewDetails)}
         </Button>
-        <Button onClick={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
-      </div>
-    </div>,
-    document.body,
+        <Button onPress={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
+      </AlertBanner>
+    </Flexbox>
   );
 }
 

src/app/(main)/boards/BoardsPage.tsx

@@ -0,0 +1,3 @@
+export default function BoardsPage() {
+  return <h1>hi.</h1>;
+}

src/app/(main)/boards/page.tsx

@@ -0,0 +1,10 @@
+import BoardsPage from './BoardsPage';
+import { Metadata } from 'next';
+
+export default function () {
+  return <BoardsPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Boards',
+};

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

@@ -1,22 +0,0 @@
-.layout {
-  display: grid;
-  grid-template-rows: max-content 1fr;
-  grid-template-columns: 1fr;
-  overflow: hidden;
-}
-
-.nav {
-  height: 60px;
-  width: 100vw;
-  grid-column: 1;
-  grid-row: 1 / 2;
-}
-
-.body {
-  grid-column: 1;
-  grid-row: 2 / 3;
-  min-height: 0;
-  height: calc(100vh - 60px);
-  height: calc(100dvh - 60px);
-  overflow-y: auto;
-}

src/app/(main)/layout.tsx

@@ -1,22 +1,8 @@
 import { Metadata } from 'next';
 import App from './App';
-import NavBar from './NavBar';
-import Page from '@/components/layout/Page';
-import styles from './layout.module.css';
 
 export default async function ({ children }) {
-  return (
-    <App>
-      <main className={styles.layout}>
-        <nav className={styles.nav}>
-          <NavBar />
-        </nav>
-        <section className={styles.body}>
-          <Page>{children}</Page>
-        </section>
-      </main>
-    </App>
-  );
+  return <App>{children}</App>;
 }
 
 export const metadata: Metadata = {

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

@@ -1,7 +1,7 @@
 import WebsiteDetailsPage from './WebsiteDetailsPage';
 import { Metadata } from 'next';
 
-export default async function WebsitePage({ params }: { params: { websiteId: string } }) {
+export default async function WebsitePage({ params }: { params: Promise<{ websiteId: string }> }) {
   const { websiteId } = await params;
 
   return <WebsiteDetailsPage websiteId={websiteId} />;

src/app/Providers.tsx

@@ -1,11 +1,13 @@
 'use client';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactBasicsProvider } from 'react-basics';
+import { ZenProvider } from '@umami/react-zen';
 import ErrorBoundary from '@/components/common/ErrorBoundary';
 import { useLocale } from '@/components/hooks';
 import 'chartjs-adapter-date-fns';
 import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { RouterProvider } from 'react-aria-components';
 
 const client = new QueryClient({
   defaultOptions: {
@@ -32,14 +34,18 @@ function MessagesProvider({ children }) {
 }
 
 export function Providers({ children }) {
+  const router = useRouter();
+
   return (
-    <MessagesProvider>
-      <QueryClientProvider client={client}>
-        <ReactBasicsProvider>
-          <ErrorBoundary>{children}</ErrorBoundary>
-        </ReactBasicsProvider>
-      </QueryClientProvider>
-    </MessagesProvider>
+    <ZenProvider>
+      <RouterProvider navigate={router.push}>
+        <MessagesProvider>
+          <QueryClientProvider client={client}>
+            <ErrorBoundary>{children}</ErrorBoundary>
+          </QueryClientProvider>
+        </MessagesProvider>
+      </RouterProvider>
+    </ZenProvider>
   );
 }
 

src/app/layout.tsx

@@ -4,8 +4,8 @@ import '@fontsource/inter/300.css';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/700.css';
-import 'react-basics/dist/styles.css';
-import '@/styles/index.css';
+import '@umami/react-zen/styles.css';
+import '@/styles/global.css';
 import '@/styles/variables.css';
 
 export default function ({ children }) {

src/components/common/Pager.tsx

@@ -4,16 +4,16 @@ import { useMessages } from '@/components/hooks';
 import styles from './Pager.module.css';
 
 export interface PagerProps {
-  page: number;
-  pageSize: number;
-  count: number;
+  page: string | number;
+  pageSize: string | number;
+  count: string | number;
   onPageChange: (nextPage: number) => void;
   className?: string;
 }
 
 export function Pager({ page, pageSize, count, onPageChange, className }: PagerProps) {
   const { formatMessage, labels } = useMessages();
-  const maxPage = pageSize && count ? Math.ceil(count / pageSize) : 0;
+  const maxPage = pageSize && count ? Math.ceil(+count / +pageSize) : 0;
   const lastPage = page === maxPage;
   const firstPage = page === 1;
 
@@ -22,7 +22,7 @@ export function Pager({ page, pageSize, count, onPageChange, className }: PagerP
   }
 
   const handlePageChange = (value: number) => {
-    const nextPage = page + value;
+    const nextPage = +page + +value;
 
     if (nextPage > 0 && nextPage <= maxPage) {
       onPageChange(nextPage);

src/components/input/LanguageButton.tsx

@@ -1,52 +1,42 @@
-import { Icon, Button, PopupTrigger, Popup } from 'react-basics';
-import classNames from 'classnames';
+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 styles from './LanguageButton.module.css';
 
 export function LanguageButton() {
-  const { locale, saveLocale, dir } = useLocale();
+  const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
-  function handleSelect(value: string, close: () => void, e: MouseEvent) {
-    e.stopPropagation();
+  function handleSelect(value: string) {
     saveLocale(value);
-    close();
   }
 
   return (
-    <PopupTrigger>
+    <MenuTrigger key="language">
       <Button variant="quiet">
         <Icon>
           <Icons.Globe />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        {(close: () => void) => {
-          return (
-            <div className={styles.menu}>
-              {items.map(({ value, label }) => {
-                return (
-                  <div
-                    key={value}
-                    className={classNames(styles.item, { [styles.selected]: value === locale })}
-                    onClick={(e: any) => handleSelect(value, close, e)}
+      <Popover placement="bottom end">
+        <Dialog variant="menu">
+          <Grid columns="repeat(3, minmax(200px, 1fr))" overflow="hidden">
+            {items.map(({ value, label }) => {
+              return (
+                <Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
+                  <Text
+                    weight={value === locale ? 'bold' : 'normal'}
+                    color={value === locale ? 'primary' : 'muted'}
                   >
-                    <span lang={value}>{label}</span>
-                    {value === locale && (
-                      <Icon className={styles.icon}>
-                        <Icons.Check />
-                      </Icon>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          );
-        }}
-      </Popup>
-    </PopupTrigger>
+                    {label}
+                  </Text>
+                </Button>
+              );
+            })}
+          </Grid>
+        </Dialog>
+      </Popover>
+    </MenuTrigger>
   );
 }
 

src/components/input/ProfileButton.tsx

@@ -1,58 +1,63 @@
 import { Key } from 'react';
-import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
+import {
+  Icon,
+  Button,
+  MenuTrigger,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  MenuSection,
+  Text,
+} from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import Icons from '@/components/icons';
-import { useMessages, useLogin, useLocale } from '@/components/hooks';
-import { CURRENT_VERSION } from '@/lib/constants';
-import styles from './ProfileButton.module.css';
+import { useMessages, useLogin } from '@/components/hooks';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const router = useRouter();
-  const { dir } = useLocale();
   const cloudMode = !!process.env.cloudMode;
 
-  const handleSelect = (key: Key, close: () => void) => {
+  const handleSelect = (key: Key) => {
     if (key === 'profile') {
       router.push('/profile');
     }
     if (key === 'logout') {
       router.push('/logout');
     }
-    close();
   };
 
   return (
-    <PopupTrigger>
+    <MenuTrigger>
       <Button data-test="button-profile" variant="quiet">
         <Icon>
           <Icons.Profile />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        {(close: () => void) => (
-          <Menu onSelect={key => handleSelect(key, close)} className={styles.menu}>
-            <Text className={styles.name}>{user.username}</Text>
-            <Item key="profile" className={styles.item} divider={true}>
+      <Popover placement="bottom end">
+        <Menu autoFocus="last" onAction={handleSelect}>
+          <MenuSection title={user.username}>
+            <MenuSeparator />
+            <MenuItem id="profile">
               <Icon>
                 <Icons.User />
               </Icon>
               <Text>{formatMessage(labels.profile)}</Text>
-            </Item>
+            </MenuItem>
             {!cloudMode && (
-              <Item data-test="item-logout" key="logout" className={styles.item}>
+              <MenuItem data-test="item-logout" id="logout">
                 <Icon>
                   <Icons.Logout />
                 </Icon>
                 <Text>{formatMessage(labels.logout)}</Text>
-              </Item>
+              </MenuItem>
             )}
-            <div className={styles.version}>{`v${CURRENT_VERSION}`}</div>
-          </Menu>
-        )}
-      </Popup>
-    </PopupTrigger>
+          </MenuSection>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
   );
 }
 

src/components/input/TeamsButton.tsx

@@ -1,28 +1,45 @@
-import { Key } from 'react';
-import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
-import classNames from 'classnames';
+import { useState } from 'react';
+import type { Selection } from 'react-aria-components';
+import { useRouter } from 'next/navigation';
+import {
+  Text,
+  Icon,
+  Button,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  MenuSection,
+  MenuSeparator,
+  Popover,
+  Row,
+  Box,
+} from '@umami/react-zen';
 import Icons from '@/components/icons';
 import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
-import styles from './TeamsButton.module.css';
 
 export function TeamsButton({
   className,
   showText = true,
-  onChange,
 }: {
   className?: string;
   showText?: boolean;
-  onChange?: (value: string) => void;
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
   const { result } = useTeams(user.id);
   const { teamId } = useTeamUrl();
+  const router = useRouter();
   const team = result?.data?.find(({ id }) => id === teamId);
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([teamId || user.id]));
 
-  const handleSelect = (close: () => void, id: Key) => {
-    onChange?.((id !== user.id ? id : '') as string);
-    close();
+  const handleSelect = (keys: Set<string>) => {
+    if (keys.size > 0) {
+      const [id] = [...keys];
+
+      router.push(id === user.id ? '/dashboard' : `/teams/${id}/dashboard`);
+
+      setSelectedKeys(keys);
+    }
   };
 
   if (!result?.count) {
@@ -30,41 +47,47 @@ export function TeamsButton({
   }
 
   return (
-    <PopupTrigger>
-      <Button className={classNames(styles.button, className)} variant="quiet">
-        <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
-        {showText && <Text>{teamId ? team?.name : user.username}</Text>}
-        <Icon>
-          <Icons.ChevronDown />
-        </Icon>
+    <MenuTrigger>
+      <Button className={className} variant="quiet">
+        <Row alignItems="center" gap="3">
+          <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
+          {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
+          <Icon>
+            <Icons.ChevronDown />
+          </Icon>
+        </Row>
       </Button>
-      <Popup alignment="end">
-        {(close: () => void) => (
-          <Menu className={styles.menu} variant="popup" onSelect={handleSelect.bind(null, close)}>
-            <div className={styles.heading}>{formatMessage(labels.myAccount)}</div>
-            <Item key={user.id} className={classNames({ [styles.selected]: !teamId })}>
-              <Flexbox gap={10} alignItems="center">
+      <Popover placement="bottom end">
+        <Box minWidth={300}>
+          <Menu
+            selectionMode="single"
+            selectedKeys={selectedKeys}
+            autoFocus="last"
+            onSelectionChange={keys => handleSelect(keys as Set<string>)}
+          >
+            <MenuSection title={formatMessage(labels.myAccount)}>
+              <MenuItem id={user.id}>
                 <Icon>
                   <Icons.User />
                 </Icon>
-                <Text>{user.username}</Text>
-              </Flexbox>
-            </Item>
-            <div className={styles.heading}>{formatMessage(labels.team)}</div>
-            {result?.data?.map(({ id, name }) => (
-              <Item key={id} className={classNames({ [styles.selected]: id === teamId })}>
-                <Flexbox gap={10} alignItems="center">
-                  <Icon>
+                <Text wrap="nowrap">{user.username}</Text>
+              </MenuItem>
+            </MenuSection>
+            <MenuSeparator />
+            <MenuSection title={formatMessage(labels.teams)}>
+              {result?.data?.map(({ id, name }) => (
+                <MenuItem key={id} id={id}>
+                  <Icon size="sm">
                     <Icons.Users />
                   </Icon>
-                  <Text>{name}</Text>
-                </Flexbox>
-              </Item>
-            ))}
+                  <Text wrap="nowrap">{name}</Text>
+                </MenuItem>
+              ))}
+            </MenuSection>
           </Menu>
-        )}
-      </Popup>
-    </PopupTrigger>
+        </Box>
+      </Popover>
+    </MenuTrigger>
   );
 }
 

src/components/input/ThemeButton.module.css

@@ -1,14 +0,0 @@
-.button {
-  width: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.button > div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-}

src/components/input/ThemeButton.tsx

@@ -1,38 +0,0 @@
-import { useTransition, animated } from '@react-spring/web';
-import { Button, Icon } from 'react-basics';
-import { useTheme } from '@/components/hooks';
-import Icons from '@/components/icons';
-import styles from './ThemeButton.module.css';
-
-export function ThemeButton() {
-  const { theme, saveTheme } = useTheme();
-
-  const transitions = useTransition(theme, {
-    initial: { opacity: 1 },
-    from: {
-      opacity: 0,
-      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
-    },
-    enter: { opacity: 1, transform: 'translateY(0px) scale(1.0)' },
-    leave: {
-      opacity: 0,
-      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
-    },
-  });
-
-  function handleClick() {
-    saveTheme(theme === 'light' ? 'dark' : 'light');
-  }
-
-  return (
-    <Button variant="quiet" className={styles.button} onClick={handleClick}>
-      {transitions((style, item) => (
-        <animated.div key={item} style={style}>
-          <Icon>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
-        </animated.div>
-      ))}
-    </Button>
-  );
-}
-
-export default ThemeButton;

src/components/layout/Page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { ReactNode } from 'react';
 import classNames from 'classnames';
-import { Banner, Loading } from 'react-basics';
+import { AlertBanner, Loading } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import styles from './Page.module.css';
 
@@ -19,7 +19,7 @@ export function Page({
   const { formatMessage, messages } = useMessages();
 
   if (error) {
-    return <Banner variant="error">{formatMessage(messages.error)}</Banner>;
+    return <AlertBanner title={formatMessage(messages.error)} variant="error" />;
   }
 
   if (isLoading) {

src/styles/global.css

@@ -0,0 +1,48 @@
+html,
+body {
+  font-family: var(--font-family), sans-serif;
+  color: var(--font-color);
+  font-size: var(--font-size);
+  background-color: var(--background-color);
+}
+
+a,
+a:active,
+a:hover {
+  color: var(--font-color);
+  text-decoration: none;
+}
+
+svg {
+  width: 16px;
+  height: 16px;
+  shape-rendering: geometricPrecision;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+  background: var(--background-color);
+}
+
+::-webkit-scrollbar-track {
+  border: 7px solid rgba(0, 0, 0, 0);
+  background-color: var(--border-color);
+  background-clip: padding-box;
+}
+
+body::-webkit-scrollbar-track,
+main::-webkit-scrollbar-track {
+  background-color: var(--border-color);
+}
+
+::-webkit-scrollbar-thumb {
+  border: 7px solid rgba(0, 0, 0, 0);
+  background-color: var(--font-color);
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-color: var(--font-color);
+  background-clip: padding-box;
+}

src/styles/index.css

@@ -1,106 +0,0 @@
-html,
-body {
-  font-family: Inter, sans-serif;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 1.5rem;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  color: var(--font-color100);
-  background: var(--base50);
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-  line-height: 30px;
-  padding: 0;
-  margin: 0;
-}
-
-a,
-a:active,
-a:visited {
-  color: var(--primary400);
-  text-decoration: none;
-}
-
-p {
-  line-height: 1.8rem;
-}
-
-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-svg {
-  shape-rendering: geometricPrecision;
-}
-
-#__next {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-
-::-webkit-scrollbar {
-  width: 15px;
-  background: var(--base50);
-}
-
-::-webkit-scrollbar-track {
-  border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--base300);
-  background-clip: padding-box;
-}
-
-body::-webkit-scrollbar-track,
-main::-webkit-scrollbar-track {
-  background-color: var(--base50);
-}
-
-::-webkit-scrollbar-thumb {
-  border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--base600);
-  background-clip: padding-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  border: 4px solid rgba(0, 0, 0, 0);
-  background-color: var(--base800);
-  background-clip: padding-box;
-}
-
-:root {
-  --dark50: #111111;
-  --dark75: #191919;
-  --dark100: #222222;
-  --dark150: #2a2a2a;
-  --dark200: #313131;
-  --dark300: #3a3a3a;
-  --dark400: #484848;
-  --dark500: #606060;
-  --dark600: #6e6e6e;
-  --dark700: #7b7b7b;
-  --dark800: #b4b4b4;
-  --dark900: #eeeeee;
-}

src/styles/variables.css

@@ -1,13 +1,3 @@
 html body {
-  --primary400: var(--blue800);
-  --primary500: var(--blue900);
-  --primary600: var(--blue1000);
-  --primary700: var(--blue1100);
-}
-
-[data-theme='dark'] {
-  --primary400: var(--blue600);
-  --primary500: var(--blue700);
-  --primary600: var(--blue800);
-  --primary700: var(--blue900);
+  --primary-color: var(--accent-color-blue);
 }