Updated menus, chart tooltips, styles.

src/app/(main)/MenuBar.tsx

@@ -5,6 +5,7 @@ import { TeamsButton } from '@/components/input/TeamsButton';
 import type { RowProps } from '@umami/react-zen/Row';
 import useGlobalState from '@/components/hooks/useGlobalState';
 import { Lucide } from '@/components/icons';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function MenuBar(props: RowProps) {
   const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed');
@@ -20,15 +21,19 @@ export function MenuBar(props: RowProps) {
       backgroundColor="2"
       border="bottom"
     >
-      <Row>
+      <Row alignItems="center">
         <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
           <Icon>
             <Lucide.PanelLeft />
           </Icon>
         </Button>
         <TeamsButton />
+        <Icon>
+          <Lucide.Slash />
+        </Icon>
+        <WebsiteSelect />
       </Row>
-      <Row justifyContent="flex-end">
+      <Row alignItems="center" justifyContent="flex-end">
         <ThemeButton />
         <LanguageButton />
         <ProfileButton />

src/app/(main)/settings/profile/ProfilePage.tsx

@@ -2,15 +2,15 @@
 import { ProfileSettings } from './ProfileSettings';
 import { useMessages } from '@/components/hooks';
 import { SectionHeader } from '@/components/common/SectionHeader';
+import { Column } from '@umami/react-zen';
 
 export function ProfilePage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <Column gap>
       <SectionHeader title={formatMessage(labels.profile)} />
-
       <ProfileSettings />
-    </>
+    </Column>
   );
 }

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

@@ -28,12 +28,11 @@ export function TeamSettingsLayout({ children }: { children: ReactNode }) {
     },
   ].filter(n => n);
 
-  const value = items.find(({ url }) => pathname.endsWith(url))?.id;
+  const value = items.find(({ url }) => pathname.includes(url))?.id;
 
   return (
     <Column gap="6">
       <PageHeader title={formatMessage(labels.teamSettings)} />
-
       <Column gap="6">
         <Grid columns="200px 1fr">
           <Column marginTop="6">

src/app/share/[...shareId]/Footer.module.css

@@ -1,12 +0,0 @@
-.footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  font-size: var(--font-size-sm);
-  height: 100px;
-}
-
-.footer a {
-  color: var(--font-color100);
-}

src/app/share/[...shareId]/Footer.tsx

@@ -1,12 +1,12 @@
+import { Row, Text } from '@umami/react-zen';
 import { CURRENT_VERSION, HOMEPAGE_URL } from '@/lib/constants';
-import styles from './Footer.module.css';
 
 export function Footer() {
   return (
-    <footer className={styles.footer}>
-      <a href={HOMEPAGE_URL}>
-        <b>umami</b> {`v${CURRENT_VERSION}`}
+    <Row as="footer">
+      <a href={HOMEPAGE_URL} target="_blank">
+        <Text weight="bold">umami</Text> {`v${CURRENT_VERSION}`}
       </a>
-    </footer>
+    </Row>
   );
 }

src/app/share/[...shareId]/Header.module.css

@@ -1,31 +0,0 @@
-.header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100px;
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  font-size: var(--font-size-lg);
-  font-weight: 700;
-  color: var(--font-color100) !important;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-@media only screen and (max-width: 992px) {
-  .header .buttons {
-    flex: 1;
-  }
-}

src/app/share/[...shareId]/Header.tsx

@@ -1,27 +1,25 @@
-import { ThemeButton } from '@umami/react-zen';
-import { Icon, Text } from '@umami/react-zen';
+import { Row, Icon, Text, ThemeButton } from '@umami/react-zen';
 import Link from 'next/link';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { SettingsButton } from '@/components/input/SettingsButton';
 import { Icons } from '@/components/icons';
-import styles from './Header.module.css';
 
 export function Header() {
   return (
-    <header className={styles.header}>
-      <div>
-        <Link href="https://umami.is" target="_blank" className={styles.title}>
+    <Row as="header">
+      <Row gap>
+        <Link href="https://umami.is" target="_blank">
           <Icon size="lg">
             <Icons.Logo />
           </Icon>
           <Text>umami</Text>
         </Link>
-      </div>
-      <div className={styles.buttons}>
+      </Row>
+      <Row alignItems="center" gap>
         <ThemeButton />
         <LanguageButton />
         <SettingsButton />
-      </div>
-    </header>
+      </Row>
+    </Row>
   );
 }

src/app/share/[...shareId]/SharePage.module.css

@@ -1,5 +0,0 @@
-.container {
-  flex: 1;
-  min-height: calc(100vh - 200px);
-  min-height: calc(100dvh - 200px);
-}

src/app/share/[...shareId]/SharePage.tsx

@@ -1,11 +1,10 @@
 'use client';
-import { WebsiteDetailsPage } from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
+import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
+import { WebsiteDetailsPage } from '@/app/(main)/websites/[websiteId]/WebsiteDetailsPage';
 import { useShareTokenQuery } from '@/components/hooks';
 import { Page } from '@/components/common/Page';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import styles from './SharePage.module.css';
-import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 
 export function SharePage({ shareId }) {
   const { shareToken, isLoading } = useShareTokenQuery(shareId);
@@ -15,14 +14,12 @@ export function SharePage({ shareId }) {
   }
 
   return (
-    <div className={styles.container}>
-      <Page>
-        <Header />
-        <WebsiteProvider websiteId={shareToken.websiteId}>
-          <WebsiteDetailsPage websiteId={shareToken.websiteId} />
-        </WebsiteProvider>
-        <Footer />
-      </Page>
-    </div>
+    <Page>
+      <Header />
+      <WebsiteProvider websiteId={shareToken.websiteId}>
+        <WebsiteDetailsPage websiteId={shareToken.websiteId} />
+      </WebsiteProvider>
+      <Footer />
+    </Page>
   );
 }