diff --git a/prisma/migrations/20240212165650_update_user/migration.sql b/prisma/migrations/20240212165650_update_user/migration.sql new file mode 100644 index 0000000..fdd56e1 --- /dev/null +++ b/prisma/migrations/20240212165650_update_user/migration.sql @@ -0,0 +1,3 @@ +-- AlterTable +ALTER TABLE "User" ADD COLUMN "primary" STRING NOT NULL DEFAULT 'fuchsia'; +ALTER TABLE "User" ADD COLUMN "secondary" STRING NOT NULL DEFAULT 'violet'; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index d485e62..a8bb7b1 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -11,12 +11,14 @@ datasource db { } model User { - id String @id @default(uuid()) - email String @unique - name String - image String? - Asset Asset[] - Like Like[] + id String @id @default(uuid()) + email String @unique + name String + image String? + primary String @default("fuchsia") + secondary String @default("violet") + Asset Asset[] + Like Like[] } model Asset { diff --git a/src/app.pcss b/src/app.pcss index 560b3ec..144c03c 100644 --- a/src/app.pcss +++ b/src/app.pcss @@ -5,47 +5,46 @@ @layer base { :root { --background: 0 0% 100%; - --foreground: 224 71.4% 4.1%; + --foreground: 240 10% 3.9%; --card: 0 0% 100%; - --card-foreground: 224 71.4% 4.1%; - --popover: 0 0% 100%; - --popover-foreground: 224 71.4% 4.1%; - --primary: 262.1 83.3% 57.8%; - --primary-foreground: 210 20% 98%; - --secondary: 220 14.3% 95.9%; - --secondary-foreground: 220.9 39.3% 11%; - --muted: 220 14.3% 95.9%; - --muted-foreground: 220 8.9% 46.1%; - --accent: 220 14.3% 95.9%; - --accent-foreground: 220.9 39.3% 11%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 20% 98%; - --border: 220 13% 91%; - --input: 220 13% 91%; - --ring: 262.1 83.3% 57.8%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%;; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; --radius: 0.5rem; } - .dark { - --background: 224 71.4% 4.1%; - --foreground: 210 20% 98%; - --card: 224 71.4% 4.1%; - --card-foreground: 210 20% 98%; - --popover: 224 71.4% 4.1%; - --popover-foreground: 210 20% 98%; - --primary: 263.4 70% 50.4%; + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; --primary-foreground: 210 20% 98%; - --secondary: 215 27.9% 16.9%; - --secondary-foreground: 210 20% 98%; - --muted: 215 27.9% 16.9%; - --muted-foreground: 217.9 10.6% 64.9%; - --accent: 215 27.9% 16.9%; - --accent-foreground: 210 20% 98%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 20% 98%; - --border: 215 27.9% 16.9%; - --input: 215 27.9% 16.9%; - --ring: 263.4 70% 50.4%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; } } @@ -64,7 +63,7 @@ @apply my-4; } .gradient-primary { - @apply from-fuchsia-800 via-indigo-800 to-violet-800 dark:from-fuchsia-500 dark:via-indigo-500 dark:to-primary; + @apply from-primary-color via-secondary-color to-primary-color; } .animate-gradient { @apply gradient-primary animate-background; diff --git a/src/lib/components/background-gradient.svelte b/src/lib/components/background-gradient.svelte index 9d06169..9c1e803 100644 --- a/src/lib/components/background-gradient.svelte +++ b/src/lib/components/background-gradient.svelte @@ -1,2 +1,2 @@ -
-
+
+
diff --git a/src/lib/components/profile-popover.svelte b/src/lib/components/profile-popover.svelte index 06b007d..5f6eec8 100644 --- a/src/lib/components/profile-popover.svelte +++ b/src/lib/components/profile-popover.svelte @@ -1,10 +1,49 @@ @@ -27,6 +66,36 @@ {session.user?.name ?? "User"}
+ {#each tiers as tier} +
+

{tier.charAt(0).toUpperCase() + tier.slice(1)}

+
+
+ { + fetch("/theme", { + method: "POST", + body: JSON.stringify({ tier, color: color.value, userId: $page.data.userId }) + }); + }} + bind:selected={theme[tiers.indexOf(tier)]} + preventScroll={false} + > + + + + + {#each tailwindColors as color} + {color.charAt(0).toUpperCase() + color.slice(1)} + {/each} + + +
+
+ {/each} +
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 8aee0d2..ed55dff 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -7,7 +7,9 @@ export const load: LayoutServerLoad = async (event) => { const user = await prisma.user.findUnique({ where: { email: session.user.email } }); return { session: session, - userId: user?.id + userId: user?.id, + primary: user?.primary, + secondary: user?.secondary }; } }; diff --git a/src/routes/manage/+page.svelte b/src/routes/manage/+page.svelte index fa4dc30..8844771 100644 --- a/src/routes/manage/+page.svelte +++ b/src/routes/manage/+page.svelte @@ -63,7 +63,7 @@ Delete Asset Are you sure you want to DELETE the asset - {currentAsset.title}? + {currentAsset.title}?
diff --git a/src/routes/theme/+server.ts b/src/routes/theme/+server.ts new file mode 100644 index 0000000..a188bab --- /dev/null +++ b/src/routes/theme/+server.ts @@ -0,0 +1,8 @@ +import prisma from "$lib/prisma"; +import { json } from "@sveltejs/kit"; + +export async function POST({ event, request }) { + const { tier, color, userId } = await request.json(); + await prisma.user.update({ where: { id: userId }, data: { [tier]: color } }); + return json({ success: true }); +} diff --git a/tailwind.config.js b/tailwind.config.js index c5de405..baa07b4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,7 @@ import { fontFamily } from "tailwindcss/defaultTheme"; const config = { darkMode: ["class"], content: ["./src/**/*.{html,js,svelte,ts}"], - safelist: ["dark"], + safelist: ["dark", { pattern: /^bg-/ }], plugins: [require("tailwind-scrollbar")({ nocompatible: true })], theme: { container: { @@ -16,6 +16,8 @@ const config = { }, extend: { colors: { + "primary-color": "var(--primary-color)", + "secondary-color": "var(--secondary-color)", border: "hsl(var(--border) / )", input: "hsl(var(--input) / )", ring: "hsl(var(--ring) / )",