diff options
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/globals.css | 2 | ||||
| -rw-r--r-- | src/app/groups/[groupId]/balances-list.tsx | 4 | ||||
| -rw-r--r-- | src/app/layout.tsx | 60 |
3 files changed, 39 insertions, 27 deletions
diff --git a/src/app/globals.css b/src/app/globals.css index a3d838f..bb707bc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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%; diff --git a/src/app/groups/[groupId]/balances-list.tsx b/src/app/groups/[groupId]/balances-list.tsx index 0e321bb..5e7b81b 100644 --- a/src/app/groups/[groupId]/balances-list.tsx +++ b/src/app/groups/[groupId]/balances-list.tsx @@ -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 + '%', diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 799f8c5..8943688 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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> ) |