diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 26ff857..81b1c2f 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1,6 +1,13 @@ @import "tailwindcss"; @import "tw-animate-css"; +@import "./styles/blue.css"; +@import "./styles/green.css"; +@import "./styles/orange.css"; +@import "./styles/red.css"; +@import "./styles/rose.css"; @import "./styles/violet.css"; +@import "./styles/yellow.css"; + @custom-variant dark (&:is(.dark *)); diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx index 17aace4..60b6e00 100644 --- a/web/src/app/layout.tsx +++ b/web/src/app/layout.tsx @@ -10,6 +10,8 @@ import { Toaster } from "@/components/ui/sonner" import { getLoginUser } from "@/api/user"; import { NuqsAdapter } from 'nuqs/adapters/next/app' import "./globals.css"; + + const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], @@ -30,12 +32,13 @@ export default async function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const token = (await cookies()).get("token")?.value || ""; const refreshToken = (await cookies()).get("refresh_token")?.value || ""; const user = await getLoginUser({ token, refreshToken }).then(res => res.data).catch(() => null); return ( - + diff --git a/web/src/app/styles/blue.css b/web/src/app/styles/blue.css index 85e9237..a1a9954 100644 --- a/web/src/app/styles/blue.css +++ b/web/src/app/styles/blue.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="blue"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.623 0.214 259.815); } -.dark { +.dark[user-color="blue"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/app/styles/green.css b/web/src/app/styles/green.css index 50a48a8..25f4f2f 100644 --- a/web/src/app/styles/green.css +++ b/web/src/app/styles/green.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="green"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.723 0.219 149.579); } -.dark { +.dark[user-color="green"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/app/styles/orange.css b/web/src/app/styles/orange.css index 2953a38..d98efce 100644 --- a/web/src/app/styles/orange.css +++ b/web/src/app/styles/orange.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="orange"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.705 0.213 47.604); } -.dark { +.dark[user-color="orange"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/app/styles/red.css b/web/src/app/styles/red.css index 2ca606b..a87d519 100644 --- a/web/src/app/styles/red.css +++ b/web/src/app/styles/red.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="red"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.637 0.237 25.331); } -.dark { +.dark[user-color="red"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/app/styles/rose.css b/web/src/app/styles/rose.css index 04b3f87..3d16b53 100644 --- a/web/src/app/styles/rose.css +++ b/web/src/app/styles/rose.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="rose"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.645 0.246 16.439); } -.dark { +.dark[user-color="rose"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/app/styles/violet.css b/web/src/app/styles/violet.css index 471c981..6e25c35 100644 --- a/web/src/app/styles/violet.css +++ b/web/src/app/styles/violet.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="violet"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.606 0.25 292.717); } -.dark { +.dark[user-color="violet"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/app/styles/yellow.css b/web/src/app/styles/yellow.css index dec73b8..6c89599 100644 --- a/web/src/app/styles/yellow.css +++ b/web/src/app/styles/yellow.css @@ -1,4 +1,4 @@ -:root { +:root[user-color="violet"] { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); @@ -33,7 +33,7 @@ --sidebar-ring: oklch(0.795 0.184 86.047); } -.dark { +.dark[user-color="violet"] { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); diff --git a/web/src/components/layout/nav/avatar-with-dropdown-menu.tsx b/web/src/components/layout/nav/avatar-with-dropdown-menu.tsx index c24b226..99a712d 100644 --- a/web/src/components/layout/nav/avatar-with-dropdown-menu.tsx +++ b/web/src/components/layout/nav/avatar-with-dropdown-menu.tsx @@ -37,20 +37,23 @@ export function AvatarWithDropdownMenu() { - {user && -
-
- {formatDisplayName(user)} - - {user.email} - -
-
- } + {user && + <> + +
+
+ {formatDisplayName(user)} + + {user.email} + +
+
+ + } {user && <> - + Profile diff --git a/web/src/types/css.d.ts b/web/src/types/css.d.ts new file mode 100644 index 0000000..a7af9f6 --- /dev/null +++ b/web/src/types/css.d.ts @@ -0,0 +1,7 @@ +declare module "*.css"; +declare module "*.scss"; +declare module "*.sass"; +declare module "*.less"; +declare module "*.styl"; +declare module "*.module.css"; +declare module "*.module.scss"; \ No newline at end of file