watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 22:27:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Replace numeric prop values with named react-zen values.

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-02-05 23:41:10 -08:00
parent f66a508892
commit 7cafc3e61d
23 changed files with 65 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/MobileNav.tsx
View file

@ -38,7 +38,7 @@ export function MobileNav() {
];
return (
<Grid columns="auto 1fr" flexGrow={1} backgroundColor="3" borderRadius>
<Grid columns="auto 1fr" flexGrow={1} backgroundColor="surface-sunken" borderRadius>
<MobileMenuButton>
{({ close }) => {
return (

7
src/app/(main)/TopNav.tsx
View file

@ -16,7 +16,12 @@ export function TopNav() {
style={{ position: 'sticky', top: 0 }}
zIndex={1}
>
<Row alignItems="center" justifyContent="flex-end" backgroundColor="2" borderRadius>
<Row
alignItems="center"
justifyContent="flex-end"
backgroundColor="surface-raised"
borderRadius
>
<ThemeButton />
<LanguageButton />
<ProfileButton />

2
src/app/(main)/boards/[boardId]/BoardHeader.tsx
View file

@ -93,7 +93,7 @@ function BoardEditHeader() {
autoComplete="off"
style={{ fontSize: '2rem', fontWeight: 700, width: '100%' }}
>
<Heading size="4">{board?.name}</Heading>
<Heading size="xl">{board?.name}</Heading>
</TextField>
</Row>
<Row>

6
src/app/(main)/links/[linkId]/LinkPanels.tsx
View file

@ -20,7 +20,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
<Grid gap="3">
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.sources)}</Heading>
<Heading size="base">{formatMessage(labels.sources)}</Heading>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@ -35,7 +35,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
</Tabs>
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.environment)}</Heading>
<Heading size="base">{formatMessage(labels.environment)}</Heading>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@ -59,7 +59,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
<WorldMap websiteId={linkId} />
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.location)}</Heading>
<Heading size="base">{formatMessage(labels.location)}</Heading>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>

6
src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
View file

@ -20,7 +20,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
<Grid gap="3">
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.sources)}</Heading>
<Heading size="base">{formatMessage(labels.sources)}</Heading>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@ -35,7 +35,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
</Tabs>
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.environment)}</Heading>
<Heading size="base">{formatMessage(labels.environment)}</Heading>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@ -59,7 +59,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
<WorldMap websiteId={pixelId} />
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.location)}</Heading>
<Heading size="base">{formatMessage(labels.location)}</Heading>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>

2
src/app/(main)/teams/[teamId]/TeamSettings.tsx
View file

@ -41,7 +41,7 @@ export function TeamSettings({ teamId }: { teamId: string }) {
</Panel>
<Panel>
<Row alignItems="center" justifyContent="space-between">
<Heading size="2">{formatMessage(labels.members)}</Heading>
<Heading size="base">{formatMessage(labels.members)}</Heading>
{isAdmin && <TeamsMemberAddButton teamId={teamId} />}
</Row>
<TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />

10
src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx
View file

@ -33,7 +33,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
<Grid columns="1fr auto" gap>
<Column gap>
<Row>
<Text size="4" weight="bold">
<Text size="lg" weight="bold">
{name}
</Text>
</Row>
@ -66,21 +66,21 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
<Column alignItems="center" position="relative">
<Row
borderRadius="full"
backgroundColor="3"
backgroundColor="surface-sunken"
width="40px"
height="40px"
justifyContent="center"
alignItems="center"
style={{ zIndex: 1 }}
>
<Text weight="bold" size="3">
<Text weight="bold" size="base">
{index + 1}
</Text>
</Row>
{index > 0 && (
<Box
position="absolute"
backgroundColor="3"
backgroundColor="surface-sunken"
width="2px"
height="120px"
top="-100%"
@ -121,7 +121,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
style={{ width: '100%' }}
/>
<Row minWidth="90px" justifyContent="end">
<Text weight="bold" size="7">
<Text weight="bold" size="4xl">
{Math.round(remaining * 100)}%
</Text>
</Row>

4
src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx
View file

@ -42,7 +42,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
<Grid columns="1fr auto" gap>
<Column gap>
<Row>
<Text size="4" weight="bold">
<Text size="lg" weight="bold">
{name}
</Text>
</Row>
@ -92,7 +92,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
maxValue={data?.total || 1}
style={{ width: '100%' }}
/>
<Text weight="bold" size="7">
<Text weight="bold" size="4xl">
{data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
</Text>
</Row>

2
src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx
View file

@ -131,7 +131,7 @@ const Cell = ({ children }: { children: ReactNode }) => {
alignItems="center"
width="100px"
height="100px"
backgroundColor="2"
backgroundColor="surface-raised"
borderRadius
>
{children}

10
src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
View file

@ -21,7 +21,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
<Grid gap="3">
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.pages)}</Heading>
<Heading size="base">{formatMessage(labels.pages)}</Heading>
<Tabs>
<TabList>
<Tab id="path">{formatMessage(labels.path)}</Tab>
@ -40,7 +40,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
</Tabs>
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.sources)}</Heading>
<Heading size="base">{formatMessage(labels.sources)}</Heading>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@ -62,7 +62,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.environment)}</Heading>
<Heading size="base">{formatMessage(labels.environment)}</Heading>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@ -82,7 +82,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.location)}</Heading>
<Heading size="base">{formatMessage(labels.location)}</Heading>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
@ -108,7 +108,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.traffic)}</Heading>
<Heading size="base">{formatMessage(labels.traffic)}</Heading>
<Row border="bottom" marginBottom="4" />
<WeeklyTraffic websiteId={websiteId} />
</Panel>

4
src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
View file

@ -169,7 +169,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
<Grid columns={{ xs: '1fr', lg: '1fr 1fr' }} gap="6" height="100%">
<Column gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="2">{formatMessage(labels.previous)}</Heading>
<Heading size="base">{formatMessage(labels.previous)}</Heading>
<DateDisplay startDate={startDate} endDate={endDate} />
</Row>
<MetricsTable
@ -183,7 +183,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
</Column>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="2"> {formatMessage(labels.current)}</Heading>
<Heading size="base"> {formatMessage(labels.current)}</Heading>
<DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
</Row>
<MetricsTable

2
src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
View file

@ -183,7 +183,7 @@ export function RealtimeLog({ data }: { data: any }) {
return (
<Column gap>
<Heading size="2">{formatMessage(labels.activity)}</Heading>
<Heading size="base">{formatMessage(labels.activity)}</Heading>
{isPhone ? (
<>
<Row>

2
src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx
View file

@ -61,7 +61,7 @@ export function SessionActivity({
return (
<Column key={eventId} gap>
{showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
{showHeader && <Heading size="sm">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
<Row alignItems="center" gap="6" height="40px">
<StatusLight color={`#${visitId?.substring(0, 6)}`}>
<Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>

4
src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
View file

@ -17,8 +17,8 @@ export function SessionData({ websiteId, sessionId }: { websiteId: string; sessi
<Label>{dataKey}</Label>
<Row alignItems="center" gap>
<Text>{stringValue}</Text>
<Box paddingY="1" paddingX="2" border borderRadius borderColor="5">
<Text color="muted" size="1">
<Box paddingY="1" paddingX="2" border borderRadius borderColor="muted">
<Text color="muted" size="xs">
{DATA_TYPES[dataType]}
</Text>
</Box>

2
src/app/login/LoginPage.tsx
View file

@ -4,7 +4,7 @@ import { LoginForm } from './LoginForm';
export function LoginPage() {
return (
<Column alignItems="center" height="100vh" backgroundColor="2" paddingTop="12">
<Column alignItems="center" height="100vh" backgroundColor="surface-raised" paddingTop="12">
<LoginForm />
</Column>
);

16
src/components/charts/ChartTooltip.tsx
View file

@ -1,4 +1,4 @@
import { Column, FloatingTooltip, Row, StatusLight } from '@umami/react-zen';
import { Column, FloatingTooltip, Row, StatusLight, Text } from '@umami/react-zen';
import type { ReactNode } from 'react';
export function ChartTooltip({
@ -12,10 +12,18 @@ export function ChartTooltip({
}) {
return (
<FloatingTooltip>
<Column gap="3" fontSize="1">
{title && <Row alignItems="center">{title}</Row>}
<Column
gap="3"
backgroundColor="surface-inverted"
color="inverted"
padding="4"
borderRadius="md"
>
{title && <Text size="sm">{title}</Text>}
<Row alignItems="center">
<StatusLight color={color}>{value}</StatusLight>
<StatusLight color={color}>
<Text size="sm">{value}</Text>
</StatusLight>
</Row>
</Column>
</FloatingTooltip>

4
src/components/common/EmptyPlaceholder.tsx
View file

@ -12,12 +12,12 @@ export function EmptyPlaceholder({ title, description, icon, children }: EmptyPl
return (
<Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
{icon && (
<Icon color="10" size="xl">
<Icon color="muted" size="xl">
{icon}
</Icon>
)}
{title && (
<Text weight="bold" size="4">
<Text weight="bold" size="lg">
{title}
</Text>
)}

2
src/components/common/SectionHeader.tsx
View file

@ -19,7 +19,7 @@ export function SectionHeader({
<Row {...props} justifyContent="space-between" alignItems="center" height="60px">
<Row gap="3" alignItems="center">
{icon && <Icon size="md">{icon}</Icon>}
{title && <Heading size="3">{title}</Heading>}
{title && <Heading size="lg">{title}</Heading>}
{description && <Text color="muted">{description}</Text>}
</Row>
<Row justifyContent="flex-end">{children}</Row>

14
src/components/input/FilterBar.tsx
View file

@ -51,7 +51,13 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
}
return (
<Row gap alignItems="center" justifyContent="space-between" padding="2" backgroundColor="3">
<Row
gap
alignItems="center"
justifyContent="space-between"
padding="2"
backgroundColor="surface-sunken"
>
<Row alignItems="center" gap="2" wrap="wrap">
{segment && !isLoading && (
<FilterItem
@ -138,11 +144,11 @@ const FilterItem = ({ name, label, operator, value, onRemove }) => {
>
<Row alignItems="center" gap="4">
<Row alignItems="center" gap="2">
<Text color="12" weight="bold">
<Text color="primary" weight="bold">
{label}
</Text>
<Text color="11">{operator}</Text>
<Text color="12" weight="bold">
<Text color="muted">{operator}</Text>
<Text color="primary" weight="bold">
{value}
</Text>
</Row>

2
src/components/metrics/ActiveUsers.tsx
View file

@ -30,7 +30,7 @@ export function ActiveUsers({
return (
<LinkButton href={`/websites/${websiteId}/realtime`} variant="quiet">
<StatusLight variant="success">
<Text size="2" weight="medium">
<Text size="sm" weight="medium">
{count} {formatMessage(labels.online)}
</Text>
</StatusLight>

2
src/components/metrics/Legend.tsx
View file

@ -23,7 +23,7 @@ export function Legend({
<Row key={text} onClick={() => onClick(item)}>
<StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
<Text
size="2"
size="sm"
color={hidden ? 'disabled' : undefined}
truncate={true}
style={{ maxWidth: '300px' }}

2
src/components/metrics/ListTable.tsx
View file

@ -133,7 +133,7 @@ const AnimatedRow = ({
justifyContent="flex-start"
position="relative"
border="left"
borderColor="8"
borderColor="strong"
color="muted"
paddingLeft="3"
>

4
src/components/metrics/WeeklyTraffic.tsx
View file

@ -49,7 +49,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
});
return (
<Row key={i} justifyContent="flex-end">
<Text color="muted" size="2">
<Text color="muted" size="sm">
{label}
</Text>
</Row>
@ -79,7 +79,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
<Row
alignItems="center"
justifyContent="center"
backgroundColor="2"
backgroundColor="surface-raised"
width="16px"
height="16px"
borderRadius="full"