watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +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

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"