From 92b283486e4a4cc7e56f46479f4f1efbdc281bda Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Mon, 5 May 2025 01:36:16 -0700 Subject: [PATCH] Updated menus, chart tooltips, styles. --- package.json | 2 +- pnpm-lock.yaml | 10 +-- src/app/(main)/MenuBar.tsx | 9 ++- .../(main)/settings/profile/ProfilePage.tsx | 6 +- .../[teamId]/settings/TeamSettingsLayout.tsx | 3 +- src/app/share/[...shareId]/Footer.module.css | 12 ---- src/app/share/[...shareId]/Footer.tsx | 10 +-- src/app/share/[...shareId]/Header.module.css | 31 --------- src/app/share/[...shareId]/Header.tsx | 18 +++-- .../share/[...shareId]/SharePage.module.css | 5 -- src/app/share/[...shareId]/SharePage.tsx | 21 +++--- src/assets/security.svg | 1 + src/components/charts/BarChart.tsx | 66 ++++++++++++++----- src/components/charts/BarChartTooltip.tsx | 38 ----------- src/components/charts/BubbleChart.tsx | 26 ++++---- src/components/charts/Chart.tsx | 15 +++-- src/components/charts/ChartTooltip.tsx | 23 +++++++ src/components/charts/PieChart.tsx | 26 ++++---- src/components/common/SideMenu.tsx | 4 +- src/components/input/DateFilter.tsx | 2 + src/components/metrics/Legend.module.css | 21 ------ src/components/metrics/Legend.tsx | 22 +++---- src/components/svg/Security.tsx | 16 +++++ 23 files changed, 179 insertions(+), 208 deletions(-) delete mode 100644 src/app/share/[...shareId]/Footer.module.css delete mode 100644 src/app/share/[...shareId]/Header.module.css delete mode 100644 src/app/share/[...shareId]/SharePage.module.css create mode 100644 src/assets/security.svg delete mode 100644 src/components/charts/BarChartTooltip.tsx create mode 100644 src/components/charts/ChartTooltip.tsx delete mode 100644 src/components/metrics/Legend.module.css create mode 100644 src/components/svg/Security.tsx diff --git a/package.json b/package.json index 761ba566..5e0b988d 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "@prisma/extension-read-replicas": "^0.4.1", "@react-spring/web": "^9.7.3", "@tanstack/react-query": "^5.74.11", - "@umami/react-zen": "^0.89.0", + "@umami/react-zen": "^0.90.0", "@umami/redis-client": "^0.27.0", "bcryptjs": "^2.4.3", "chalk": "^4.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79487c73..78de93d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,8 +39,8 @@ importers: specifier: ^5.74.11 version: 5.74.11(react@19.1.0) '@umami/react-zen': - specifier: ^0.89.0 - version: 0.89.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0)) + specifier: ^0.90.0 + version: 0.90.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0)) '@umami/redis-client': specifier: ^0.27.0 version: 0.27.0 @@ -2992,8 +2992,8 @@ packages: resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} engines: {node: ^16.0.0 || >=18.0.0} - '@umami/react-zen@0.89.0': - resolution: {integrity: sha512-Lcvgh6Y4DKlUUDE84WowvxvJkgI4INW6lVM32L8+XUJVxBrEBa41RF7jF6KTgD6IizAwHtSouh4gVLzzBDmlCw==} + '@umami/react-zen@0.90.0': + resolution: {integrity: sha512-Hj0/GSQPUtiRwq1ri3nX+anWp5udNQmrKZcHOH/j1B3z4KL/AW+llYyXqP9loG1N+NgEzW66P791Pac8Wo7qpw==} '@umami/redis-client@0.27.0': resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==} @@ -10784,7 +10784,7 @@ snapshots: '@typescript-eslint/types': 6.21.0 eslint-visitor-keys: 3.4.3 - '@umami/react-zen@0.89.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))': + '@umami/react-zen@0.90.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))': dependencies: '@fontsource/jetbrains-mono': 5.2.5 '@internationalized/date': 3.8.0 diff --git a/src/app/(main)/MenuBar.tsx b/src/app/(main)/MenuBar.tsx index fd6486d1..f3fbe3f1 100644 --- a/src/app/(main)/MenuBar.tsx +++ b/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" > - + + + + + - + diff --git a/src/app/(main)/settings/profile/ProfilePage.tsx b/src/app/(main)/settings/profile/ProfilePage.tsx index 46c21b0c..aaec3f58 100644 --- a/src/app/(main)/settings/profile/ProfilePage.tsx +++ b/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 ( - <> + - - + ); } diff --git a/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx b/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx index 07250a92..79266a23 100644 --- a/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx +++ b/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 ( - diff --git a/src/app/share/[...shareId]/Footer.module.css b/src/app/share/[...shareId]/Footer.module.css deleted file mode 100644 index 5dc2d584..00000000 --- a/src/app/share/[...shareId]/Footer.module.css +++ /dev/null @@ -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); -} diff --git a/src/app/share/[...shareId]/Footer.tsx b/src/app/share/[...shareId]/Footer.tsx index 495b0e3d..4683e982 100644 --- a/src/app/share/[...shareId]/Footer.tsx +++ b/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 ( - + ); } diff --git a/src/app/share/[...shareId]/Header.module.css b/src/app/share/[...shareId]/Header.module.css deleted file mode 100644 index 9fc946c7..00000000 --- a/src/app/share/[...shareId]/Header.module.css +++ /dev/null @@ -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; - } -} diff --git a/src/app/share/[...shareId]/Header.tsx b/src/app/share/[...shareId]/Header.tsx index c7a87347..2c0d90f6 100644 --- a/src/app/share/[...shareId]/Header.tsx +++ b/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 ( -
-
- + + + umami -
-
+ + -
-
+ + ); } diff --git a/src/app/share/[...shareId]/SharePage.module.css b/src/app/share/[...shareId]/SharePage.module.css deleted file mode 100644 index f6c68cf6..00000000 --- a/src/app/share/[...shareId]/SharePage.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.container { - flex: 1; - min-height: calc(100vh - 200px); - min-height: calc(100dvh - 200px); -} diff --git a/src/app/share/[...shareId]/SharePage.tsx b/src/app/share/[...shareId]/SharePage.tsx index 3e0d2c87..6d283c88 100644 --- a/src/app/share/[...shareId]/SharePage.tsx +++ b/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 ( -
- -
- - - -
- -
+ +
+ + + +