watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Replace fontsource with next/font/google and update react-zen.
Some checks are pending
Node.js CI / build (push) Waiting to run
Details

Browse source 
- Switch from @fontsource/inter to next/font/google for font loading
- Update @umami/react-zen to v0.229.0
- Add type augmentation for react-zen missing children props
- Move global.css to app directory

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-01-19 13:02:47 -08:00
parent 6367d94552
commit 30c45f888f
8 changed files with 107 additions and 2162 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -65,7 +65,6 @@
"@date-fns/utc": "^1.2.0",
"@dicebear/collection": "^9.2.3",
"@dicebear/core": "^9.2.3",
"@fontsource/inter": "^5.2.8",
"@hello-pangea/dnd": "^17.0.0",
"@prisma/adapter-pg": "^7.2.0",
"@prisma/client": "^7.2.0",
@ -73,7 +72,7 @@
"@react-spring/web": "^10.0.3",
"@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.90.17",
"@umami/react-zen": "^0.216.0",
"@umami/react-zen": "^0.229.0",
"@umami/redis-client": "^0.30.0",
"bcryptjs": "^3.0.2",
"chalk": "^5.6.2",

2145
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

20
src/app/global.css Normal file
View file

@ -0,0 +1,20 @@
html,
body {
font-family: var(--font-family), sans-serif;
color: var(--text-base);
font-size: 14px;
background-color: var(--surface-raised);
width: 100%;
min-height: 100vh;
}
html[style*="padding-right"] {
padding-right: 0 !important;
}
a,
a:active,
a:hover {
color: var(--text-base);
text-decoration: none;
}

18
src/app/layout.tsx
View file

@ -1,13 +1,15 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Suspense } from 'react';
import { Providers } from './Providers';
import '@fontsource/inter/300.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/700.css';
import '@umami/react-zen/styles.css';
import '@/styles/global.css';
import '@/styles/variables.css';
import './global.css';
import '@umami/react-zen/styles.full.css';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function ({ children }) {
if (process.env.DISABLE_UI) {
@ -19,7 +21,7 @@ export default function ({ children }) {
}
return (
<html lang="en">
<html lang="en" className={`${inter.className} ${inter.variable}`}>
<head>
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

7
src/components/common/Panel.tsx
View file

@ -5,6 +5,7 @@ import {
Heading,
Icon,
Row,
Text,
Tooltip,
TooltipTrigger,
} from '@umami/react-zen';
@ -38,10 +39,10 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
return (
<Column
paddingY="6"
paddingX={{ xs: '3', md: '6' }}
paddingX={{ base: '3', md: '6' }}
border
borderRadius="3"
backgroundColor
borderRadius
backgroundColor="surface-base"
position="relative"
gap
{...props}

6
src/components/metrics/MetricCard.tsx
View file

@ -34,8 +34,8 @@ export const MetricCard = ({
justifyContent="center"
paddingX="6"
paddingY="4"
borderRadius="3"
backgroundColor
borderRadius
backgroundColor="surface-base"
border
>
{showLabel && (
@ -43,7 +43,7 @@ export const MetricCard = ({
{label}
</Text>
)}
<Text size="8" weight="bold" wrap="nowrap">
<Text size="4xl" weight="bold" wrap="nowrap">
<AnimatedDiv title={value?.toString()}>{props?.x?.to(x => formatValue(x))}</AnimatedDiv>
</Text>
{showChange && (

58
src/styles/global.css
View file

@ -1,58 +0,0 @@
html,
body {
font-family: var(--font-family), sans-serif;
color: var(--font-color);
font-size: var(--font-size);
background-color: var(--base-color-2);
width: 100%;
min-height: 100vh;
}
html[style*="padding-right"] {
padding-right: 0 !important;
}
a,
a:active,
a:hover {
color: var(--font-color);
text-decoration: none;
}
::-webkit-scrollbar {
width: 15px;
background: transparent;
}
::-webkit-scrollbar-track {
border: 7px solid rgba(0, 0, 0, 0);
background-color: var(--base-color-4);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb {
border: 7px solid rgba(0, 0, 0, 0);
background-color: var(--base-color-9);
border-radius: var(--border-radius-full);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
}
/* Fix autofill background color to match dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--background-color) inset !important;
transition: color 5000s ease-in-out 0s;
}

12
src/types/react-zen.d.ts vendored Normal file
View file

@ -0,0 +1,12 @@
import { ReactNode } from 'react';
import '@umami/react-zen';
declare module '@umami/react-zen' {
interface SelectProps {
children?: ReactNode;
}
interface TooltipProps {
children?: ReactNode;
}
}