style: update text color for better visibility in StorageAndPlan component

style: enhance global scrollbar styling

src/components/dashboard/Settings.tsx

@@ -28,13 +28,16 @@ const StorageAndPlan = component$(() => {
                     <svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6v2a6 6 0 01-12 0V8a6 6 0 016-6zm0 2a4 4 0 00-4 4v2a4 4 0 008 0V8a4 4 0 00-4-4z"/></svg>
                     <p class="text-white/80">current plan: <span class="text-stereo font-semibold">pro+</span></p>
                 </div>
+
                 <div class="flex items-center gap-2">
                     <svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v10H4V5zm2 2v6h8V7H6z"/></svg>
                     <p class="text-white/80">storage used: <span class="font-semibold text-white">3.8</span> / <span class="text-white/50">15 GB</span></p>
                 </div>
+
                 <div class="w-full h-2 bg-white/10 rounded-full overflow-hidden mt-1 mb-2">
                     <div class="h-full bg-stereo rounded-full w-[calc(3.8/15*100%)]" />
                 </div>
+
                 <p class="text-sm text-white/40">upgrade your plan for more features</p>
             </div>
 
@@ -84,7 +87,7 @@ const StorageAndPlan = component$(() => {
 
                     <div class="flex flex-col gap-2">
                         <div class="flex flex-col">
-                            <p class="text-sm text-white/70">title</p>
+                            <p class="text-sm text-white/50">title</p>
                             <input
                                 type="text"
                                 class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
@@ -95,7 +98,7 @@ const StorageAndPlan = component$(() => {
                         </div>
 
                         <div class="flex flex-col">
-                            <p class="text-sm text-white/70">description</p>
+                            <p class="text-sm text-white/50">description</p>
                             <textarea
                                 class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
                                 placeholder="enter a description..."
@@ -106,7 +109,7 @@ const StorageAndPlan = component$(() => {
                         </div>
 
                         <div class="flex flex-col">
-                            <p class="text-sm text-white/70">color</p>
+                            <p class="text-sm text-white/50">color</p>
                             <input
                                 type="color"
                                 class="bg-black/40 rounded-lg w-full"

src/global.css

@@ -1,7 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+
 @import "tailwindcss";
+@plugin 'tailwind-scrollbar' {
+  nocompatible: true;
+}
 
 @theme {
   --font-sans: 'DM Sans', sans-serif;
   --color-stereo: #ff264e;
+}
+
+* {
+  @apply scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-white/30 scrollbar-track-white/10;
 }