mirrors/spliit
1
0
Fork 0
mirror of https://github.com/spliit-app/spliit.git synced 2026-02-24 00:16:13 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dark mode

Browse Source
This commit is contained in:
Sebastien Castiel
2023-12-07 18:35:09 -05:00
parent 61201c2864
commit 4bc03002e1
9 changed files with 422 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/globals.css
View File

@@ -33,7 +33,7 @@
--card-foreground: 0 0% 95%;
--popover: 0 0% 9%;
--popover-foreground: 0 0% 95%;
--primary: 142.1 70.6% 45.3%;
--primary: 161 90% 45%;
--primary-foreground: 144.9 80.4% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;

4
src/app/groups/[groupId]/balances-list.tsx
View File

@@ -35,8 +35,8 @@ export function BalancesList({ balances, participants, currency }: Props) {
className={cn(
'absolute top-1 h-7 z-10',
isLeft
? 'bg-green-200 left-0 rounded-r-lg border border-green-300'
: 'bg-red-200 right-0 rounded-l-lg border border-red-300',
? 'bg-green-200 dark:bg-green-800 left-0 rounded-r-lg border border-green-300 dark:border-green-700'
: 'bg-red-200 dark:bg-red-800 right-0 rounded-l-lg border border-red-300 dark:border-red-700',
)}
style={{
width: (Math.abs(balance) / maxBalance) * 100 + '%',

60
src/app/layout.tsx
View File

@@ -1,4 +1,6 @@
import { ProgressBar } from '@/components/progress-bar'
import { ThemeProvider } from '@/components/theme-provider'
import { ThemeToggle } from '@/components/theme-toggle'
import { Button } from '@/components/ui/button'
import { env } from '@/lib/env'
import type { Metadata } from 'next'
@@ -39,30 +41,40 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="bg-slate-50">
<ProgressBar />
<header className="fixed top-0 left-0 right-0 flex justify-between bg-white bg-opacity-50 p-2 border-b backdrop-blur-sm">
<Link className="flex items-center gap-2" href="/">
<h1>
<Image
src="/logo-with-text.png"
className="m-1"
width={(35 * 522) / 180}
height={35}
alt="Spliit"
/>
</h1>
</Link>
<ul role="nav" className="flex items-center text-sm">
<li>
<Button variant="link" asChild className="-my-3">
<Link href="/groups">Groups</Link>
</Button>
</li>
</ul>
</header>
<div className="max-w-screen-md mx-auto p-4 pt-20">{children}</div>
<html lang="en" suppressHydrationWarning>
<body className="light:bg-slate-50">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<ProgressBar />
<header className="fixed top-0 left-0 right-0 flex justify-between bg-white dark:bg-slate-800 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
<Link className="flex items-center gap-2" href="/">
<h1>
<Image
src="/logo-with-text.png"
className="m-1"
width={(35 * 522) / 180}
height={35}
alt="Spliit"
/>
</h1>
</Link>
<ul role="nav" className="flex items-center text-sm">
<li>
<Button variant="link" asChild className="-my-3">
<Link href="/groups">Groups</Link>
</Button>
</li>
<li>
<ThemeToggle />
</li>
</ul>
</header>
<div className="max-w-screen-md mx-auto p-4 pt-20">{children}</div>
</ThemeProvider>
</body>
</html>
)