style: update text color for better visibility in StorageAndPlan component

style: enhance global scrollbar styling

src/components/dashboard/Settings.tsx

@@ -3,17 +3,123 @@
 // import { isSettingsOpen, userInfo } from "~/lib/stores";
 // import { StereoUser } from "~/lib/types";
 
-import { $, component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
+import { $, component$, useComputed$, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import ky from "ky";
 import { useNanostore$ } from "~/hooks/nanostores";
-import { isSettingsOpen } from "~/lib/stores";
+import { isSettingsOpen, userInfo } from "~/lib/stores";
 
 const StorageAndPlan = component$(() => {
+    const user = useNanostore$(userInfo);
+
+    useVisibleTask$(({track}) => {
+        if (user.value) {
+            console.log(user.value.global_name);
+        }
+    });
+
+    const title = useSignal("this is a test");
+    const description = useSignal("this is a test description");
+    const color = useSignal("#FF264E");
+
     return (
-        <div>
-            <p>current plan: stereo pro+</p>
-            <p>storage used: 3.8 / 15 GB</p>
-            <p>upgrade your plan for more features</p>
+        <div class="flex flex-col gap-2">
+            <div class="flex flex-col mb-2">
+                <div class="flex items-center gap-2">
+                    <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>
+
+            <p class="text-xl">embed editor</p>
+            {user.value && (
+                <div class="flex gap-3">
+                    <div class="flex gap-3">
+                        <img
+                            class="rounded-full w-12 h-12"
+                            src={
+                                user.value.id && user.value.avatar
+                                    ? `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}.webp?size=512`
+                                    : ""
+                            }
+                        />
+                        
+                        <div class="flex flex-col gap-1">
+                            <div class="flex gap-1 items-center">
+                                <p>{user.value.global_name}</p>
+                                <p class="text-sm opacity-50">{new Date().toLocaleTimeString().split(":").slice(0, 2).join(":")}</p>
+                            </div>
+                                <div class="overflow-clip flex bg-black/25 rounded-lg">
+                                    {(title.value || description.value) ? (
+                                        <>
+                                            <div class="w-1.5" style={{ backgroundColor: color.value }} />
+                                            <div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
+                                                <div class="flex flex-col">
+                                                    { title.value && <p>{title.value}</p> }
+                                                    { description.value && <p class="text-sm opacity-50">{description.value}</p> }
+                                                </div>
+
+                                                <img
+                                                    class="rounded-sm aspect-[3/2]"
+                                                    src="https://placehold.co/300x200"
+                                                />
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <img
+                                            class="rounded-sm aspect-[3/2]"
+                                            src="https://placehold.co/300x200"
+                                        />
+                                    )}
+                                </div>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-col gap-2">
+                        <div class="flex flex-col">
+                            <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"
+                                placeholder="enter a title..."
+                                value={title.value}
+                                onInput$={(e) => title.value = (e.target as HTMLInputElement).value}
+                            />
+                        </div>
+
+                        <div class="flex flex-col">
+                            <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..."
+                                rows={3}
+                                value={description.value}
+                                onInput$={(e) => description.value = (e.target as HTMLTextAreaElement).value}
+                            />
+                        </div>
+
+                        <div class="flex flex-col">
+                            <p class="text-sm text-white/50">color</p>
+                            <input
+                                type="color"
+                                class="bg-black/40 rounded-lg w-full"
+                                value={color.value}
+                                onInput$={(e) => color.value = (e.target as HTMLInputElement).value}
+                            />
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 });
@@ -142,7 +248,8 @@ export default component$(() => {
                         ))}
                     </div>
                 </div>
-                <div class="flex flex-col flex-3/4 text-lg overflow-clip">
+                
+                <div class="flex flex-col flex-3/4 text-lg overflow-clip overflow-y-auto">
                     <h1 class="text-2xl mb-2">{categories.value[selectedCategory.value].name}</h1>
                     <SelectedComponent.value />
                 </div>

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;
 }

src/lib/stores.ts

@@ -8,6 +8,8 @@ export const userInfo = atom<StereoUser>({
     username: "user",
     blacklisted: false,
     email: "user@example.com",
+    avatar: "",
+    global_name: "User",
     created_at: Date.now().toString(),
 });
 export const isSettingsOpen = atom<boolean>(false);

src/lib/types.ts

@@ -13,7 +13,9 @@ export type StereoFile = {
 export type StereoUser = {
     id: string;
     username: string;
+    global_name: string;
     blacklisted: boolean;
     email: string;
+    avatar: string;
     created_at: string;
 }