mirror of
https://github.com/umami-software/umami.git
synced 2026-02-04 04:37:11 +01:00
Replace fontsource with next/font/google and update react-zen.
Some checks are pending
Node.js CI / build (push) Waiting to run
Some checks are pending
Node.js CI / build (push) Waiting to run
- 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
parent
6367d94552
commit
30c45f888f
8 changed files with 107 additions and 2162 deletions
|
|
@ -65,7 +65,6 @@
|
||||||
"@date-fns/utc": "^1.2.0",
|
"@date-fns/utc": "^1.2.0",
|
||||||
"@dicebear/collection": "^9.2.3",
|
"@dicebear/collection": "^9.2.3",
|
||||||
"@dicebear/core": "^9.2.3",
|
"@dicebear/core": "^9.2.3",
|
||||||
"@fontsource/inter": "^5.2.8",
|
|
||||||
"@hello-pangea/dnd": "^17.0.0",
|
"@hello-pangea/dnd": "^17.0.0",
|
||||||
"@prisma/adapter-pg": "^7.2.0",
|
"@prisma/adapter-pg": "^7.2.0",
|
||||||
"@prisma/client": "^7.2.0",
|
"@prisma/client": "^7.2.0",
|
||||||
|
|
@ -73,7 +72,7 @@
|
||||||
"@react-spring/web": "^10.0.3",
|
"@react-spring/web": "^10.0.3",
|
||||||
"@svgr/cli": "^8.1.0",
|
"@svgr/cli": "^8.1.0",
|
||||||
"@tanstack/react-query": "^5.90.17",
|
"@tanstack/react-query": "^5.90.17",
|
||||||
"@umami/react-zen": "^0.216.0",
|
"@umami/react-zen": "^0.229.0",
|
||||||
"@umami/redis-client": "^0.30.0",
|
"@umami/redis-client": "^0.30.0",
|
||||||
"bcryptjs": "^3.0.2",
|
"bcryptjs": "^3.0.2",
|
||||||
"chalk": "^5.6.2",
|
"chalk": "^5.6.2",
|
||||||
|
|
|
||||||
2145
pnpm-lock.yaml
generated
2145
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
20
src/app/global.css
Normal file
20
src/app/global.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,15 @@
|
||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
|
import { Inter } from 'next/font/google';
|
||||||
import { Suspense } from 'react';
|
import { Suspense } from 'react';
|
||||||
import { Providers } from './Providers';
|
import { Providers } from './Providers';
|
||||||
import '@fontsource/inter/300.css';
|
import './global.css';
|
||||||
import '@fontsource/inter/400.css';
|
import '@umami/react-zen/styles.full.css';
|
||||||
import '@fontsource/inter/500.css';
|
|
||||||
import '@fontsource/inter/700.css';
|
const inter = Inter({
|
||||||
import '@umami/react-zen/styles.css';
|
subsets: ['latin'],
|
||||||
import '@/styles/global.css';
|
display: 'swap',
|
||||||
import '@/styles/variables.css';
|
variable: '--font-inter',
|
||||||
|
});
|
||||||
|
|
||||||
export default function ({ children }) {
|
export default function ({ children }) {
|
||||||
if (process.env.DISABLE_UI) {
|
if (process.env.DISABLE_UI) {
|
||||||
|
|
@ -19,7 +21,7 @@ export default function ({ children }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" className={`${inter.className} ${inter.variable}`}>
|
||||||
<head>
|
<head>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import {
|
||||||
Heading,
|
Heading,
|
||||||
Icon,
|
Icon,
|
||||||
Row,
|
Row,
|
||||||
|
Text,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from '@umami/react-zen';
|
} from '@umami/react-zen';
|
||||||
|
|
@ -38,10 +39,10 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
|
||||||
return (
|
return (
|
||||||
<Column
|
<Column
|
||||||
paddingY="6"
|
paddingY="6"
|
||||||
paddingX={{ xs: '3', md: '6' }}
|
paddingX={{ base: '3', md: '6' }}
|
||||||
border
|
border
|
||||||
borderRadius="3"
|
borderRadius
|
||||||
backgroundColor
|
backgroundColor="surface-base"
|
||||||
position="relative"
|
position="relative"
|
||||||
gap
|
gap
|
||||||
{...props}
|
{...props}
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,8 @@ export const MetricCard = ({
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
paddingX="6"
|
paddingX="6"
|
||||||
paddingY="4"
|
paddingY="4"
|
||||||
borderRadius="3"
|
borderRadius
|
||||||
backgroundColor
|
backgroundColor="surface-base"
|
||||||
border
|
border
|
||||||
>
|
>
|
||||||
{showLabel && (
|
{showLabel && (
|
||||||
|
|
@ -43,7 +43,7 @@ export const MetricCard = ({
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</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>
|
<AnimatedDiv title={value?.toString()}>{props?.x?.to(x => formatValue(x))}</AnimatedDiv>
|
||||||
</Text>
|
</Text>
|
||||||
{showChange && (
|
{showChange && (
|
||||||
|
|
|
||||||
|
|
@ -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
12
src/types/react-zen.d.ts
vendored
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue