feat: add primary and secondary color selection

manankarnik · Feb 12, 2024 · 882f781 · 882f781
1 parent 158d95d
commit 882f781
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 47 deletions.
diff --git a/prisma/migrations/20240212165650_update_user/migration.sql 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
@@ -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
@@ -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
@@ -1,2 +1,2 @@
-<div class="z-[-10] fixed top-0 opacity-20 w-full h-screen from-primary to-50% bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]"></div>
-<div class="z-[-10] fixed top-0 opacity-20 w-full h-screen from-primary to-50% bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))]"></div>
+<div class="z-[-10] fixed top-0 opacity-20 w-full h-screen opacity-10 from-primary-color to-50% bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]"></div>
+<div class="z-[-10] fixed top-0 opacity-20 w-full h-screen opacity-10 from-primary-color to-50% bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))]"></div>
diff --git a/src/lib/components/profile-popover.svelte b/src/lib/components/profile-popover.svelte
@@ -1,10 +1,49 @@
 <script>
   import { signOut } from "@auth/sveltekit/client";
+  import { browser } from "$app/environment";
+  import { page } from "$app/stores";
   import * as Popover from "$lib/components/ui/popover";
   import * as Avatar from "$lib/components/ui/avatar";
+  import * as Select from "$lib/components/ui/select";
   import { Button } from "$lib/components/ui/button";
   import { User } from "lucide-svelte";
+  import { mode } from "mode-watcher";
+  import colors from "tailwindcss/colors";
+
   export let session;
+
+  const tiers = ["primary", "secondary"];
+  const theme = [$page.data.primary, $page.data.secondary].map((color) => {
+    return { value: color, label: color.charAt(0).toUpperCase() + color.slice(1), disabled: false };
+  });
+  const tailwindColors = [
+    "red",
+    "orange",
+    "amber",
+    "yellow",
+    "lime",
+    "green",
+    "emerald",
+    "teal",
+    "cyan",
+    "sky",
+    "blue",
+    "indigo",
+    "violet",
+    "purple",
+    "fuchsia",
+    "pink",
+    "rose"
+  ];
+
+  $: if (browser) {
+    document
+      .querySelector(":root")
+      .style.setProperty("--primary-color", colors[theme[0].value][$mode == "dark" ? 600 : 500]);
+    document
+      .querySelector(":root")
+      .style.setProperty("--secondary-color", colors[theme[1].value][$mode == "dark" ? 600 : 500]);
+  }
 </script>
 
 <Popover.Root>
@@ -27,6 +66,36 @@
       <strong>{session.user?.name ?? "User"}</strong>
     </div>
     <hr />
+    {#each tiers as tier}
+      <div class="py-2">
+        <h4 class="text-sm font-semibold">{tier.charAt(0).toUpperCase() + tier.slice(1)}</h4>
+        <div class="my-2 flex items-center justify-center gap-4">
+          <div class={"h-8 w-8 rounded-full" + ` bg-${theme[tiers.indexOf(tier)].value}-500`}></div>
+          <Select.Root
+            onSelectedChange={(color) => {
+              fetch("/theme", {
+                method: "POST",
+                body: JSON.stringify({ tier, color: color.value, userId: $page.data.userId })
+              });
+            }}
+            bind:selected={theme[tiers.indexOf(tier)]}
+            preventScroll={false}
+          >
+            <Select.Trigger class="w-[180px]">
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              {#each tailwindColors as color}
+                <Select.Item value={color}
+                  >{color.charAt(0).toUpperCase() + color.slice(1)}</Select.Item
+                >
+              {/each}
+            </Select.Content>
+          </Select.Root>
+        </div>
+      </div>
+    {/each}
+    <hr />
     <Button variant="destructive-outline" class="w-full" on:click={() => signOut()}>
       Sign out
     </Button>

diff --git 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
@@ -63,7 +63,7 @@
       <Dialog.Title>Delete Asset</Dialog.Title>
       <Dialog.Description>
         Are you sure you want to <span class="font-bold text-destructive">DELETE</span> the asset
-        <span class="font-bold text-primary">{currentAsset.title}</span>?
+        <span class="font-bold text-primary-color">{currentAsset.title}</span>?
       </Dialog.Description>
     </Dialog.Header>
     <div class="flex justify-end gap-4">

diff --git a/src/routes/theme/+server.ts 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
@@ -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) / <alpha-value>)",
         input: "hsl(var(--input) / <alpha-value>)",
         ring: "hsl(var(--ring) / <alpha-value>)",