admin/zapishis-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps/web: add dark mode

Browse Source
This commit is contained in:
vchikalkin 2024-12-26 17:24:35 +03:00
parent 30455c3285
commit d8704aa4b5
6 changed files with 60 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/app/(main)/profile/page.tsx
View File

@ -15,7 +15,7 @@ export default async function ProfilePage() {
const photoUrl = user?.photoUrl ?? 'https://github.com/shadcn.png';
return (
<div className="container mx-auto h-screen max-w-md p-4">
<div className="mx-auto h-screen max-w-md">
<Card>
<CardHeader className="flex flex-row items-center space-x-4 pb-2">
<Avatar className="size-12">
@ -36,7 +36,8 @@ export default async function ProfilePage() {
{user?.role === 'client' && (
<form action={becomeMaster}>
<Button
className="w-full bg-gradient-to-r from-purple-500 to-purple-700 text-white hover:from-purple-600 hover:to-purple-800"
className="w-full bg-gradient-to-r from-purple-500 to-purple-700 text-white hover:from-purple-600 hover:to-purple-800
dark:from-purple-700 dark:to-purple-900 dark:hover:from-purple-800 dark:hover:to-purple-950"
type="submit"
>
Стать мастером

9
apps/web/app/layout.tsx
View File

@ -1,7 +1,8 @@
import { AuthProvider } from '@/providers';
import { ThemeProvider } from '@/providers/theme-provider';
import { I18nProvider } from '@/utils/i18n/provider';
import { type Metadata } from 'next';
import '@repo/ui/globals.css';
import { type Metadata } from 'next';
import { getLocale } from 'next-intl/server';
import { type PropsWithChildren } from 'react';
@ -14,9 +15,11 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
return (
<html lang={locale}>
<body className="bg-[#f7f7f7]">
<body className="bg-secondary">
<I18nProvider>
<AuthProvider>{children}</AuthProvider>
<ThemeProvider>
<AuthProvider>{children}</AuthProvider>
</ThemeProvider>
</I18nProvider>
</body>
</html>

2
apps/web/components/profile/profile-field.tsx
View File

@ -35,7 +35,7 @@ export function ProfileField({
<div className="space-y-2">
<Label htmlFor={id}>{label}</Label>
<Input
className="outline-none focus:ring-0 focus:ring-offset-0"
className="bg-secondary outline-none focus:ring-0 focus:ring-offset-0"
disabled={disabled || isPending}
id={id}
onChange={handleChange}

1
apps/web/package.json
View File

@ -21,6 +21,7 @@
"next": "catalog:",
"next-auth": "^4.24.11",
"next-intl": "catalog:",
"next-themes": "^0.4.4",
"react": "catalog:",
"react-dom": "catalog:",
"zod": "catalog:"

35
apps/web/providers/theme-provider.tsx Normal file
View File

@ -0,0 +1,35 @@
'use client';
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
import { type ComponentProps, useEffect, useState } from 'react';
/**
* mouted - fix for Next.js 15 Hydration Failed
*/
export function ThemeProvider({
children,
...props
}: Readonly<ComponentProps<typeof NextThemesProvider>>) {
const [mounted, setMounted] = useState(false);
useTheme();
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
// eslint-disable-next-line react/jsx-no-useless-fragment
return <></>;
}
return (
<NextThemesProvider
{...props}
attribute="class"
defaultTheme="system"
disableTransitionOnChange
enableSystem
>
{children}
</NextThemesProvider>
);
}

14
pnpm-lock.yaml generated
View File

@ -234,6 +234,9 @@ importers:
next-intl:
specifier: 'catalog:'
version: 3.26.0(next@15.1.0(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
next-themes:
specifier: ^0.4.4
version: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react:
specifier: 'catalog:'
version: 19.0.0
@ -4535,6 +4538,12 @@ packages:
next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
next-themes@0.4.4:
resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
peerDependencies:
react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
next@15.1.0:
resolution: {integrity: sha512-QKhzt6Y8rgLNlj30izdMbxAwjHMFANnLwDwZ+WQh5sMhyt4lEBqDK9QpvWHtIM4rINKPoJ8aiRZKg5ULSybVHw==}
engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@ -10893,6 +10902,11 @@ snapshots:
react: 19.0.0
use-intl: 3.26.0(react@19.0.0)
next-themes@0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
next@15.1.0(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
'@next/env': 15.1.0