From d66248cb9733fe5aab310e62acc88290e865e9bf Mon Sep 17 00:00:00 2001
From: Wanjohi <71614375+wanjohiryan@users.noreply.github.com>
Date: Thu, 5 Sep 2024 21:30:30 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Use=20mute=20card=20color?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/src/card.tsx         | 74 +++-----------------------------
 packages/ui/src/home-nav-bar.tsx |  4 +-
 packages/ui/src/large-card.tsx   |  0
 3 files changed, 8 insertions(+), 70 deletions(-)
 create mode 100644 packages/ui/src/large-card.tsx

diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index 4973f2e2..ed7a29de 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -1,4 +1,4 @@
-import { component$, useSignal, useVisibleTask$, $ } from "@builder.io/qwik";
+import { component$ } from "@builder.io/qwik";
 
 type Props = {
     game: {
@@ -9,87 +9,25 @@ type Props = {
 
 export const Card = component$(({ game }: Props) => {
     const imageUrl = `http://localhost:8787/image/cover/${game.id}.avif`
-    const backgroundColor = useSignal<string | undefined>(undefined);
-    const imgRef = useSignal<HTMLImageElement>();
-
-    const extractColor = $((img: HTMLImageElement) => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return "rgb(200,200,200)"; // Fallback light gray
-
-        canvas.width = img.naturalWidth;
-        canvas.height = img.naturalHeight;
-        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
-
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-        let r = 0, g = 0, b = 0, count = 0;
-
-        for (let i = 0; i < imageData.length; i += 4) {
-            // Only consider brighter pixels
-            if (imageData[i] > 150 || imageData[i + 1] > 150 || imageData[i + 2] > 150) {
-                r += imageData[i];
-                g += imageData[i + 1];
-                b += imageData[i + 2];
-                count++;
-            }
-        }
-
-        if (count === 0) return "rgb(200,200,200)"; // Fallback if no bright pixels found
-
-        r = Math.floor(r / count);
-        g = Math.floor(g / count);
-        b = Math.floor(b / count);
-
-
-        // For light mode, keep the existing logic
-        const minBrightness = 100;
-        r = Math.max(r, minBrightness);
-        g = Math.max(g, minBrightness);
-        b = Math.max(b, minBrightness);
-
-
-        return `rgb(${r},${g},${b})`;
-    });
-
-    useVisibleTask$(async ({ track }) => {
-        track(() => imgRef.value);
-
-        const img = imgRef.value;
-        if (img) {
-            const processImage = async () => {
-                backgroundColor.value = await extractColor(img);
-            };
-
-            if (img.complete) {
-                await processImage();
-            } else {
-                img.onload = processImage;
-            }
-        }
-    });
 
     return (
-        <div
-            style={{
-                "--bg-color": backgroundColor.value,
-            }}
-            class="min-w-[250px] bg-[--bg-color] group cursor-pointer backdrop-blur-sm select-none w-full group rounded-3xl text-primary-950/70 duration-200 transition-colors flex flex-col">
-            <header class="flex gap-4 justify-between p-4">
+        <button
+            class="min-w-[250px] group hover:ring-primary-500 focus:ring-primary-500 outline-none cursor-pointer backdrop-blur-sm select-none w-full group rounded-[20px] duration-200 flex flex-col ring-gray-900/70 transition-all gap-2 px-4 py-3 ring-[3px] ring-neutral-300 dark:ring-gray-700 text-gray-900/70 dark:text-gray-100/70 bg-gray-300/70 dark:bg-gray-700/70">
+            <header class="flex gap-4 max-w-full justify-between p-4">
                 <div class="flex relative pr-[22px] overflow-hidden overflow-ellipsis whitespace-nowrap" >
                     <h3 class="overflow-hidden overflow-ellipsis whitespace-nowrap">{game.name}</h3>
                 </div>
             </header>
             <section class="flex justify-center items-center w-full py-7">
                 <img
-                    ref={imgRef}
                     src={imageUrl}
-                    class="rounded-2xl ring-2 aspect-[2/3] w-full max-w-[90%] ring-gray-900/70 group-hover:scale-105 duration-200 transition-transform shadow-2xl shadow-gray-900"
+                    class="rounded-2xl ring-2 aspect-[2/3] w-full max-w-[90%] ring-gray-900/70 group-hover:scale-105 group-focus:scale-105 duration-200 transition-transform shadow-2xl shadow-gray-950"
                     width={250}
                     height={200}
                     alt={game.name}
                     crossOrigin="anonymous"
                 />
             </section>
-        </div>
+        </button>
     )
 });
\ No newline at end of file
diff --git a/packages/ui/src/home-nav-bar.tsx b/packages/ui/src/home-nav-bar.tsx
index 2e2d59da..3d9151e4 100644
--- a/packages/ui/src/home-nav-bar.tsx
+++ b/packages/ui/src/home-nav-bar.tsx
@@ -29,13 +29,13 @@ export const HomeNavBar = component$(() => {
             </div>
             <div class="relative flex items-center">
                 <hr class="w-[1px] h-7 bg-neutral-700 dark:bg-neutral-300 mx-3 rotate-[16deg]" />
-                <button class="rounded-full transition-all flex items-center duration-200 px-3 h-8 gap-2 select-none cursor-pointer hover:bg-neutral-300/70 dark:hover:bg-neutral-700/70" >
+                <button class="rounded-full outline-none focus:ring-primary-500 focus:ring-2 transition-all flex items-center duration-200 px-3 h-8 gap-2 select-none cursor-pointer hover:bg-neutral-300/70 dark:hover:bg-neutral-700/70" >
                     <img src="http://localhost:8787/image/avatar/the-avengers.png" height={16} width={16} class="size-4 rounded-full" alt="Avatar" />
                     <p class="whitespace-nowrap [text-overflow:ellipsis] overflow-hidden max-w-[20ch]">The Avengers</p>
                     <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 21 21"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m7.5 8.5l3-3l3 3m-6 5l3 3l3-3" /></svg>
                 </button>
             </div>
-            <button class="ml-auto rounded-full transition-all flex items-center duration-200 px-3 h-8 gap-1 select-none cursor-pointer hover:bg-gray-300/70 dark:hover:bg-gray-700/70" >
+            <button class="ml-auto focus:ring-primary-500 focus:ring-2 outline-none rounded-full transition-all flex items-center duration-200 px-3 h-8 gap-1 select-none cursor-pointer hover:bg-gray-300/70 dark:hover:bg-gray-700/70" >
                 <img src="http://localhost:8787/image/avatar/wanjohi.png" height={16} width={16} class="size-4 rounded-full" alt="Avatar" />
                 <p class="whitespace-nowrap [text-overflow:ellipsis] overflow-hidden max-w-[20ch]">Wanjohi</p>
                 <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 21 21"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m7.5 8.5l3-3l3 3m-6 5l3 3l3-3" /></svg>
diff --git a/packages/ui/src/large-card.tsx b/packages/ui/src/large-card.tsx
new file mode 100644
index 00000000..e69de29b