style: adjust primary color

src/app.css

@@ -55,7 +55,7 @@
   --card-foreground: oklch(89.24% 0.079 263.24);
   --popover: oklch(20.3% 0.05 282.86);
   --popover-foreground: oklch(89.24% 0.079 263.24);
-  --primary: oklch(81.45% 0.159 300.53);
+  --primary: oklch(72.08% 0.196 356.34);
   --primary-foreground: oklch(20.22% 0.048 282.86);
   --secondary: oklch(42.99% 0.031 270.49);
   --secondary-foreground: oklch(89.24% 0.079 263.24);
@@ -67,8 +67,8 @@
   --destructive-foreground: oklch(20.22% 0.048 282.86);
   --border: oklch(27.7% 0.041 276.87);
   --input: oklch(27.7% 0.041 276.87);
-  --ring: oklch(81.45% 0.159 300.53);
+  --ring: oklch(72.08% 0.196 356.34);
-  --chart-1: oklch(81.45% 0.159 300.53);
+  --chart-1: oklch(72.08% 0.196 356.34);
   --chart-2: oklch(77.19% 0.121 223.01);
   --chart-3: oklch(79.1% 0.119 150.21);
   --chart-4: oklch(79.74% 0.167 57.97);
@@ -76,12 +76,12 @@
   --sidebar: oklch(13.29% 0.036 282.86);
   --sidebar-background: oklch(13.29% 0.036 282.86);
   --sidebar-foreground: oklch(89.24% 0.079 263.24);
-  --sidebar-primary: oklch(81.45% 0.159 300.53);
+  --sidebar-primary: oklch(72.08% 0.196 356.34);
   --sidebar-primary-foreground: oklch(20.22% 0.048 282.86);
   --sidebar-accent: oklch(75.21% 0.121 293.01);
   --sidebar-accent-foreground: oklch(20.22% 0.048 282.86);
   --sidebar-border: oklch(35.13% 0.03 273.31);
-  --sidebar-ring: oklch(81.45% 0.159 300.53);
+  --sidebar-ring: oklch(72.08% 0.196 356.34);
 }
 
 @theme inline {
@@ -108,20 +108,18 @@
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
-  --color-primary-50: #fefdff;
+  --color-primary-50: #ffe5f1;
-  --color-primary-100: #faf6fe;
+  --color-primary-100: #ffcce2;
-  --color-primary-200: #f2e9fc;
+  --color-primary-200: #ff99c5;
-  --color-primary-300: #e9dbfa;
+  --color-primary-300: #ff66a8;
-  --color-primary-400: #e1cef9;
+  --color-primary-400: #ff338b;
-  --color-primary-500: #d9c0f7;
+  --color-primary-500: #ff006e;
-  --color-primary-600: #c6a0f3;
+  --color-primary-600: #cc0058;
-  --color-primary-700: #b381ef;
+  --color-primary-700: #990042;
-  --color-primary-800: #a061eb;
+  --color-primary-800: #66002c;
-  --color-primary-900: #8d41e7;
+  --color-primary-900: #330016;
-  --color-primary-950: #8331e5;
+  --color-primary-950: #24000f;
   --color-primary-foreground: var(--primary-foreground);
-  --color-primary-50: #fefdff;
-  --color-primary-100: #faf6fe;
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);

src/lib/components/ui/animated-bg/AnimatedBg.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   //TODO: maybe dynamic background images fetched from ezpp?
 
-  const COUNT = 120;
+  const COUNT = 60;
 
   function rand(min: number, max: number) {
     return Math.random() * (max - min) + min;
   }
 
-  const streaks = Array.from({ length: COUNT }).map(() => {
+  const streaks = Array.from({ length: COUNT }).map((_, i) => {
     const depth = rand(0, 2);
 
     const scale = 0.6 + depth * 0.8;
@@ -19,8 +19,8 @@
     return {
       width: rand(180, 320) * scale,
       height: rand(16, 32) * scale,
-      x: rand(-80, 100),
+      x: (i / COUNT) * 200 - 50,
-      y: rand(-80, 100),
+      y: ((i * 137.5) % 100) - 20,
       opacity: 0.25 + depth * 0.65,
       duration,
       delay: rand(0, duration),

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
   bind:ref
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     inset && 'pl-8',
     className
   )}

src/lib/components/ui/select/select-item.svelte

@@ -17,7 +17,7 @@
   bind:ref
   {value}
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[highlighted]:bg-primary-300 data-[highlighted]:text-primary-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     className
   )}
   {...restProps}

src/routes/+layout.svelte

@@ -33,6 +33,7 @@
 
   import '@fontsource/sora';
   import '@fontsource/space-mono';
+  import AnimatedBg from '@/components/ui/animated-bg/AnimatedBg.svelte';
 
   let { children } = $props();
 
@@ -178,5 +179,8 @@
 </AlertDialog.Root>
 
 <main>
+  <div class="opacity-30">
+    <AnimatedBg />
+  </div>
   {@render children()}
 </main>

src/screens/Launch.svelte

@@ -24,7 +24,7 @@
   } from '@/global';
   import {
     LoaderCircle,
-    Music2,
+    Music,
     Wifi,
     WifiOff,
     Drum,
@@ -871,9 +871,6 @@
 </AlertDialog.Root>
 
 <div class="grid grid-cols-[0.085fr_1fr] h-[100vh] relative">
-  <div class="absolute top-0 left-0 w-full h-[100vh] opacity-30 z-0">
-    <AnimatedBg />
-  </div>
   <div
     class="p-3 border-r border-r-theme-900 flex flex-col items-center gap-2 z-10 bg-black/40 backdrop-blur-sm"
   >
@@ -882,17 +879,17 @@
     </div>
     <Badge class="text-[0.5rem] py-0 px-2">{$launcherVersion || 'dev'}</Badge>
     <Button
-      class="flex size-12 items-center gap-2 {selectedView === 'home'
+      class="flex size-12 items-center gap-2 border {selectedView === 'home'
-        ? 'bg-pink-300/50'
+        ? 'bg-pink-300/50 border-pink-300/50'
-        : 'bg-black/20'} hover:bg-pink-300/50 rounded-[0.85rem] p-3 mt-3"
+        : 'bg-black/20 border-black/20'} hover:bg-pink-300/50 hover:border-pink-300/50 rounded-[0.85rem] p-3 mt-3"
       onclick={() => (selectedView = 'home')}
     >
       <House class="text-theme-200 !size-5" />
     </Button>
     <Button
-      class="flex size-12 items-center gap-2 {selectedView === 'settings'
+      class="flex size-12 items-center gap-2 border {selectedView === 'settings'
-        ? 'bg-pink-300/50'
+        ? 'bg-pink-300/50 border-pink-300/50'
-        : 'bg-black/20'} hover:bg-pink-300/50 rounded-[0.85rem] p-3 mt-3"
+        : 'bg-black/20 border-black/20'} hover:bg-pink-300/50 hover:border-pink-300/50 rounded-[0.85rem] p-3 mt-3"
       onclick={() => (selectedView = 'settings')}
     >
       <Settings class="text-theme-200 !size-5" />
@@ -945,14 +942,14 @@
     {#if selectedView === 'home'}
       <div
         class="flex flex-col-reverse h-full"
-        in:fly={{ duration: 400, delay: 400, y: 10, opacity: 0 }}
+        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
-        out:fly={{ duration: 400, y: -10, opacity: 0 }}
+        out:fly={{ duration: 400, y: -5, opacity: 0 }}
       >
         <div class="relative z-10 px-8 py-4 flex items-center justify-between">
           <div class="flex items-center gap-4">
             {#if $osuInstallationPath !== ''}
               <div class="flex items-center gap-2">
-                <Music2 class="size-3.5 text-blue-400" />
+                <Music class="size-3.5 text-blue-400" />
                 <span class="text-[11px] text-white/70 font-medium">
                   {#if !$beatmapSets && $beatmapSets !== 0}
                     <LoaderCircle class="animate-spin" size={12} />
@@ -1067,8 +1064,8 @@
         {#if $currentUserInfo}
           <div
             class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md border border-black/40 flex flex-col items-center p-3"
-            in:fly={{ duration: 400, y: 10, opacity: 0 }}
+            in:fly={{ duration: 400, y: 5, opacity: 0 }}
-            out:fly={{ duration: 400, y: -10, opacity: 0 }}
+            out:fly={{ duration: 400, y: -5, opacity: 0 }}
           >
             <Select.Root
               type="single"
@@ -1220,8 +1217,8 @@
     {:else if selectedView === 'settings'}
       <div
         class="h-[100vh] w-full flex flex-col items-center justify-center"
-        in:fly={{ duration: 400, delay: 400, y: 10, opacity: 0 }}
+        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
-        out:fly={{ duration: 400, y: -10, opacity: 0 }}
+        out:fly={{ duration: 400, y: -5, opacity: 0 }}
       >
         <div class="p-8 w-full">
           <div class="bg-black/40 backdrop-blur-sm py-8 px-6 rounded-lg">
@@ -1422,8 +1419,8 @@
     {:else if selectedView === 'login'}
       <div
         class="h-[100vh] w-full flex flex-col items-center justify-center"
-        in:fly={{ duration: 400, delay: 400, y: 10, opacity: 0 }}
+        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
-        out:fly={{ duration: 400, y: -10, opacity: 0 }}
+        out:fly={{ duration: 400, y: -5, opacity: 0 }}
       >
         <div class="p-8 px-52 w-full">
           <form onsubmit={performLogin} class="bg-black/40 backdrop-blur-sm rounded-lg p-8">