From 2b6a048ccd4f949d382cd3f4fce07f5eb5e493c1 Mon Sep 17 00:00:00 2001
From: Wanjohi <71614375+wanjohiryan@users.noreply.github.com>
Date: Sun, 1 Sep 2024 02:13:16 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Use=20a=20lower=20contras?=
 =?UTF-8?q?t=20color=20for=20as=20background=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/www/src/root.tsx                   |  2 +-
 apps/www/src/routes/changelog/index.tsx | 14 +++++++-------
 apps/www/src/routes/contact/index.tsx   |  8 ++++----
 apps/www/src/routes/index.tsx           | 24 +++++++++++-------------
 packages/ui/src/card.tsx                | 20 +++++++++++++++-----
 packages/ui/src/github-banner.tsx       |  4 ++--
 packages/ui/src/home-nav-bar.tsx        |  2 +-
 packages/ui/src/nav-bar.tsx             |  2 +-
 packages/ui/src/react/hero-section.tsx  |  2 +-
 9 files changed, 43 insertions(+), 35 deletions(-)
diff --git a/apps/www/src/root.tsx b/apps/www/src/root.tsx
index 7a5d4689..7a1fde46 100644
--- a/apps/www/src/root.tsx
+++ b/apps/www/src/root.tsx
@@ -34,7 +34,7 @@ export default component$(() => {
           <RouterHead />
         </head>
         <body
-          class="bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
+          class="bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
           lang="en">
           <RouterOutlet />
           {/* {!isDev && <ServiceWorkerRegister />} */}
diff --git a/apps/www/src/routes/changelog/index.tsx b/apps/www/src/routes/changelog/index.tsx
index a231e0aa..c0bf2634 100644
--- a/apps/www/src/routes/changelog/index.tsx
+++ b/apps/www/src/routes/changelog/index.tsx
@@ -27,7 +27,7 @@ export default component$(() => {
                         </div>
                         <div class="pt-2 pb-4 pr-2 pl-4 md:pl-8 h-max gap-4 flex flex-col relative before:absolute before:bottom-2 before:top-0 before:left-[7px] before:w-0.5 before:bg-gradient-to-b before:rounded-[2px] before:from-primary-500 before:to-transparent" >
                             <div class="flex flex-row flex-wrap gap-2.5">
-                                <div class="aspect-auto h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="aspect-auto h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <div class="text-base backdrop-blur-sm font-title font-medium text-white z-[2] w-full h-full text-center p-4 justify-center items-center flex flex-col">
                                         <p class="text-2xl">Fresh new look, Intel & AMD GPU support and we finally launched 🥳</p>
                                     </div>
@@ -35,7 +35,7 @@ export default component$(() => {
                                         <img draggable={false} src="/changelog/v0.0.3/header.avif" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
                                     </div>
                                 </div>
-                                <div class="aspect-square h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="aspect-square h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <div class="text-lg font-title font-medium text-white z-[2] w-full h-full text-center p-4  justify-end flex flex-col">
                                         <p class="m-4 backdrop-blur-sm" >Fresh new logo and branding 💅🏾</p>
                                     </div>
@@ -43,22 +43,22 @@ export default component$(() => {
                                         <img draggable={false} src="/changelog/v0.0.3/new-website-design.avif" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
                                     </div>
                                 </div>
-                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <div class="justify-center items-center flex w-full">
                                         <p class="text-xl font-title text-center font-medium">Updated our <Link class="underline" href="/terms">Terms of Service</Link> <br class="hidden md:block" /> and our <Link class="underline" href="/privacy">Privacy Policy</Link></p>
                                     </div>
                                 </div>
-                                <div class="h-max md:aspect-square aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="h-max md:aspect-square aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <div class="justify-center items-center flex w-full">
                                         <p class="text-xl font-title text-center font-medium">Added support for Intel & AMD GPUs. Courtesy of{" "}<Link class="underline" href="https://github.com/DatCaptainHorse">@DatHorse</Link></p>
                                     </div>
                                 </div>
-                                <div class="h-max aspect-square rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="h-max aspect-square rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <div class="absolute inset-0 z-0">
                                         <img draggable={false} src="/changelog/v0.0.3/gameplay.avifs" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
                                     </div>
                                 </div>
-                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <div class="justify-center items-center flex w-full">
                                         <p class="text-lg font-title text-center font-medium">+ Lots of quality of life improvements! 🤞🏽</p>
                                     </div>
@@ -75,7 +75,7 @@ export default component$(() => {
                         </div>
                         <div class="pt-2 pb-4 pr-2 pl-4 md:pl-8 h-max relative before:absolute before:bottom-2 before:top-0 before:left-[7px] before:w-0.5 before:bg-gradient-to-b before:rounded-[2px] before:from-primary-500 before:to-transparent" >
                             <div class="flex flex-row flex-wrap gap-2.5">
-                                <div class="h-max justify-center aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
+                                <div class="h-max justify-center aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
                                     <p class="text-lg font-title text-center font-medium">Nestri has been long overdue for a changelog. <br class="hidden md:block" /> Welcome to our changelog!</p>
                                 </div>
                             </div>
diff --git a/apps/www/src/routes/contact/index.tsx b/apps/www/src/routes/contact/index.tsx
index 07d243a3..2244e1d9 100644
--- a/apps/www/src/routes/contact/index.tsx
+++ b/apps/www/src/routes/contact/index.tsx
@@ -103,19 +103,19 @@ export default component$(() => {
                             {feedback.map((item, index) => (
                                 <div key={`emoji-${index}`} class="flex relative">
                                     <input type="radio" class="hidden peer" name="feedback-emoji" value={item.rating} id={`emoji-${index + 1}`} />
-                                    <label for={`emoji-${index + 1}`} class="peer-checked:bg-gray-300/70 dark:peer-checked:bg-gray-700/70 border-gray-300 dark:border-gray-700 peer-checked:ring-gray-400 dark:peer-checked:ring-gray-600 peer-checked:ring-offset-gray-50 dark:peer-checked:ring-offset-gray-950 peer-checked:ring-2 peer-checked:ring-offset-2 border cursor-pointer bg-gray-200/70 dark:bg-gray-800/70 rounded-full p-3">
+                                    <label for={`emoji-${index + 1}`} class="peer-checked:bg-gray-300/70 dark:peer-checked:bg-gray-700/70 border-gray-300 dark:border-gray-700 peer-checked:ring-gray-400 dark:peer-checked:ring-gray-600 peer-checked:ring-offset-gray-50 dark:peer-checked:ring-offset-gray-950 peer-checked:ring-2 peer-checked:ring-offset-2 border cursor-pointer bg-gray-200 dark:bg-gray-800 rounded-full p-3">
                                         <item.icon />
                                     </label>
                                 </div>
                             ))}
                         </div>
-                        <div class="bg-gray-200/70 dark:bg-gray-800/70 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/50 dark:focus-within:bg-gray-700/50 border-gray-300 dark:border-gray-700 ">
+                        <div class="bg-gray-200 dark:bg-gray-800 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/70 dark:focus-within:bg-gray-700/70 border-gray-300 dark:border-gray-700 ">
                             <input type="text" class="w-full h-full bg-transparent rounded-lg p-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-gray-400 dark:focus-within:ring-gray-600 focus-within:ring-offset-2 focus-visible:outline-none focus-within:ring-offset-gray-50 dark:focus-within:ring-offset-gray-950 placeholder:text-gray-500/70" placeholder="Full Name" />
                         </div>
-                        <div class="bg-gray-200/70 dark:bg-gray-800/70 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/50 dark:focus-within:bg-gray-700/50 border-gray-300 dark:border-gray-700 ">
+                        <div class="bg-gray-200 dark:bg-gray-800 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/70 dark:focus-within:bg-gray-700/70 border-gray-300 dark:border-gray-700 ">
                             <input type="email" class="w-full h-full bg-transparent rounded-lg p-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-gray-400 dark:focus-within:ring-gray-600 focus-within:ring-offset-2 focus-visible:outline-none focus-within:ring-offset-gray-50 dark:focus-within:ring-offset-gray-950 placeholder:text-gray-500/70" placeholder="Email Address" />
                         </div>
-                        <div class="bg-gray-200/70 dark:bg-gray-800/70 flex rounded-lg w-full relative h-max flex-none border focus-within:bg-gray-300/50 dark:focus-within:bg-gray-700/50 border-gray-300 dark:border-gray-700 ">
+                        <div class="bg-gray-200 dark:bg-gray-800 flex rounded-lg w-full relative h-max flex-none border focus-within:bg-gray-300/70 dark:focus-within:bg-gray-700/70 border-gray-300 dark:border-gray-700 ">
                             <textarea class="resize-y overflow-y-auto whitespace-break-spaces [form-sizing:content] min-h-[193px] w-full h-full bg-transparent rounded-lg p-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-gray-400 dark:focus-within:ring-gray-600 focus-within:ring-offset-2 focus-visible:outline-none focus-within:ring-offset-gray-50 dark:focus-within:ring-offset-gray-950 placeholder:text-gray-500/70" placeholder="Your message" />
                         </div>
                         <button class={cn(buttonVariants.solid({ size: "md", intent: "neutral" }), "w-full")} type="submit" >
diff --git a/apps/www/src/routes/index.tsx b/apps/www/src/routes/index.tsx
index 2fde4dea..08af6c70 100644
--- a/apps/www/src/routes/index.tsx
+++ b/apps/www/src/routes/index.tsx
@@ -90,19 +90,17 @@ export default component$(() => {
     <>
       <NavBar />
       <HeroSection client:load>
-        <button class="w-full max-w-xl rounded-xl flex items-center justify-between hover:bg-gray-300/70 dark:hover:bg-gray-700/70 transition-colors gap-2 px-4 py-3 h-[45px] border border-gray-300 dark:border-gray-700 mx-autotext-gray-500/70 bg-gray-200/70 dark:bg-gray-800/70">
+        <button class="w-full max-w-xl rounded-xl flex items-center justify-between hover:bg-gray-200 dark:hover:bg-gray-800 transition-all gap-2 px-4 py-3 h-[45px] ring-2 ring-gray-300 dark:ring-gray-700 mx-auto text-gray-900/70 dark:text-gray-100/70 bg-white dark:bg-black">
           <span class="flex items-center gap-3 h-max justify-center overflow-hidden overflow-ellipsis whitespace-nowrap">
             <svg xmlns="http://www.w3.org/2000/svg" class="size-[18] flex-shrink-0" height="18" width="18" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><circle cx="11.5" cy="11.5" r="9.5" /><path stroke-linecap="round" d="M18.5 18.5L22 22" /></g></svg>
             Search for a game to play...
           </span>
           <span class="flex items-center gap-2">
             <div class="flex items-center gap-2 text-base font-title font-bold">
-              <kbd class="border-neutral-300 dark:border-neutral-700 border px-2 py-1 rounded-md">
-                {/* ⌘ */}
+              <kbd class="ring-2 ring-gray-300 dark:ring-gray-700 px-2 py-1 rounded-md">
                 <svg xmlns="http://www.w3.org/2000/svg" class="size-5 flex-shrink-0" width="20" height="20" viewBox="0 0 256 256"><path fill="currentColor" d="M180 144h-20v-32h20a36 36 0 1 0-36-36v20h-32V76a36 36 0 1 0-36 36h20v32H76a36 36 0 1 0 36 36v-20h32v20a36 36 0 1 0 36-36m-20-68a20 20 0 1 1 20 20h-20ZM56 76a20 20 0 0 1 40 0v20H76a20 20 0 0 1-20-20m40 104a20 20 0 1 1-20-20h20Zm16-68h32v32h-32Zm68 88a20 20 0 0 1-20-20v-20h20a20 20 0 0 1 0 40" /></svg>
-                {/* <svg xmlns="http://www.w3.org/2000/svg" class="size-5 flex-shrink-0" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 21q-1.45 0-2.475-1.025T3 17.5t1.025-2.475T6.5 14H8v-4H6.5q-1.45 0-2.475-1.025T3 6.5t1.025-2.475T6.5 3t2.475 1.025T10 6.5V8h4V6.5q0-1.45 1.025-2.475T17.5 3t2.475 1.025T21 6.5t-1.025 2.475T17.5 10H16v4h1.5q1.45 0 2.475 1.025T21 17.5t-1.025 2.475T17.5 21t-2.475-1.025T14 17.5V16h-4v1.5q0 1.45-1.025 2.475T6.5 21m0-2q.625 0 1.063-.437T8 17.5V16H6.5q-.625 0-1.062.438T5 17.5t.438 1.063T6.5 19m11 0q.625 0 1.063-.437T19 17.5t-.437-1.062T17.5 16H16v1.5q0 .625.438 1.063T17.5 19M10 14h4v-4h-4zM6.5 8H8V6.5q0-.625-.437-1.062T6.5 5t-1.062.438T5 6.5t.438 1.063T6.5 8M16 8h1.5q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5z"/></svg> */}
               </kbd>
-              <span class="px-2 py-0.5 rounded-md border border-neutral-300 dark:border-neutral-700">
+              <span class="px-2 py-0.5 rounded-md ring-2 ring-gray-300 dark:ring-gray-700">
                 K
               </span>
             </div>
@@ -128,7 +126,7 @@ export default component$(() => {
                   zIndex: 1 + index,
                   transform: game.rotate ? `rotate(${game.rotate}deg)` : undefined,
                 }}
-                class={"aspect-[2/3] bg-gray-100 dark:bg-gray-900 rounded-md overflow-hidden block hover:!rotate-0 hover:scale-[1.17] hover:!z-10 ring-1 shadow-lg shadow-gray-300 dark:shadow-gray-700 ring-gray-300 dark:ring-gray-700 transition-all duration-200"}>
+                class={"aspect-[2/3] bg-white dark:bg-black rounded-md overflow-hidden block hover:!rotate-0 hover:scale-[1.17] hover:!z-10 shadow-lg shadow-gray-300 dark:shadow-gray-700 ring-2 ring-gray-300 dark:ring-gray-700 transition-all duration-200"}>
                 {game.image ? <BasicImageLoader width={600} height={900} src={game.image} alt={game.title} /> :
                   <div class="w-full text-gray-900 dark:text-gray-100 h-full flex flex-col px-3 text-center gap-3 items-center justify-center">
                     <p>Can't find your game here?</p>
@@ -214,17 +212,17 @@ export default component$(() => {
           <div class="w-full mx-auto max-w-xl flex items-center flex-col lg:flex-row gap-6 justify-center">
             <div class="flex cursor-default items-end group">
               <div class="flex [transform:perspective(700px)] w-[61px] [transform-style:preserve-3d] relative">
-                <p class="font-bold text-[200px] text-gray-50 dark:text-gray-950 group-hover:text-primary-200 dark:group-hover:text-primary-800 group-hover:-translate-x-2 transition-all duration-200 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px] leading-[1em]">
+                <p class="font-bold text-[200px] text-white dark:text-black group-hover:text-primary-200 dark:group-hover:text-primary-800 group-hover:-translate-x-2 transition-all duration-200 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px] leading-[1em]">
                   1
                 </p>
               </div>
-              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
+              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-2 ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-white dark:bg-black rounded-2xl overflow-hidden">
                 <div class="flex items-center justify-center" >
                   <div class="z-[4] flex relative items-center justify-center size-[66px] transition-all duration-200 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-500 dark:group-hover:bg-primary-800 group-hover:bg-primary-200 shadow-lg shadow-gray-300 dark:shadow-gray-700" >
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" class="size-10 flex-shrink-0 group-hover:hidden" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M6.286 19C3.919 19 2 17.104 2 14.765s1.919-4.236 4.286-4.236q.427.001.83.08m7.265-2.582a5.8 5.8 0 0 1 1.905-.321c.654 0 1.283.109 1.87.309m-11.04 2.594a5.6 5.6 0 0 1-.354-1.962C6.762 5.528 9.32 3 12.476 3c2.94 0 5.361 2.194 5.68 5.015m-11.04 2.594a4.3 4.3 0 0 1 1.55.634m9.49-3.228C20.392 8.78 22 10.881 22 13.353c0 2.707-1.927 4.97-4.5 5.52" opacity=".5" /><path stroke-linejoin="round" d="M12 22v-6m0 6l2-2m-2 2l-2-2" /></g></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" class="size-10 flex-shrink-0 transition-all duration-200 group-hover:block hidden text-primary-500" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M6.286 19C3.919 19 2 17.104 2 14.765s1.919-4.236 4.286-4.236q.427.001.83.08m7.265-2.582a5.8 5.8 0 0 1 1.905-.321c.654 0 1.283.109 1.87.309m-11.04 2.594a5.6 5.6 0 0 1-.354-1.962C6.762 5.528 9.32 3 12.476 3c2.94 0 5.361 2.194 5.68 5.015m-11.04 2.594a4.3 4.3 0 0 1 1.55.634m9.49-3.228C20.392 8.78 22 10.881 22 13.353c0 2.707-1.927 4.97-4.5 5.52" opacity=".5" /><path stroke-linejoin="round" d="m10 19.8l1.143 1.2L14 18" /></g></svg>
                   </div>
-                  <div class="-mx-3 group-hover:-mx-2 transition-all duration-200 size-[90px] rounded-full bg-gray-100 dark:bg-gray-900 shadow-lg shadow-gray-300 dark:shadow-gray-700 z-10 relative flex items-center justify-center">
+                  <div class="-mx-3 group-hover:-mx-2 ring-1 ring-gray-300 dark:ring-gray-700 transition-all duration-200 size-[90px] rounded-full bg-gray-100 dark:bg-gray-900 shadow-lg shadow-gray-300 dark:shadow-gray-700 z-10 relative flex items-center justify-center">
                     <svg
                       width="48.672001"
                       height="36.804001"
@@ -253,11 +251,11 @@ export default component$(() => {
             </div>
             <div class="flex cursor-default group items-end">
               <div class="flex [transform:perspective(700px)] w-[80px] [transform-style:preserve-3d] relative">
-                <p class="font-bold text-[200px] dark:text-gray-950 group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 relative text-gray-50 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
+                <p class="font-bold text-[200px] text-white dark:text-black group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 relative [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
                   2
                 </p>
               </div>
-              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
+              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-2 ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-white dark:bg-black rounded-2xl overflow-hidden">
                 <div class="flex flex-col gap-2 w-full items-center justify-center">
                   <p class="text-neutral-900/70 dark:text-neutral-100/70 max-w-[80%] text-center mx-auto text-2xl font-title">
                     <strong>Create</strong>&nbsp;or join a Nestri Party
@@ -309,11 +307,11 @@ export default component$(() => {
             </div>
             <div class="flex cursor-none group items-end">
               <div class="flex [transform:perspective(700px)] w-[80px] [transform-style:preserve-3d] relative">
-                <p class="relative font-bold text-[200px] dark:text-gray-950 group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 text-gray-50 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
+                <p class="relative font-bold text-[200px] text-white dark:text-black group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
                   3
                 </p>
               </div>
-              <div class="z-[1] relative group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
+              <div class="z-[1] relative group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-2 ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-white dark:bg-black rounded-2xl overflow-hidden">
                 <div class="absolute top-0 left-0 bottom-0 right-0 w-full h-full z-[3]">
                   <Cursor client:load class="absolute left-4 top-4" text="Wanjohi" />
                   <Cursor client:load color="#3a9a00" flip class="absolute right-2 top-8" text="Jd" />
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index 330be8fd..689e4456 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -41,11 +41,21 @@ export const Card = component$(({ game }: Props) => {
         g = Math.floor(g / count);
         b = Math.floor(b / count);
 
-        // Ensure the color is light enough
-        const minBrightness = 100;
-        r = Math.max(r, minBrightness);
-        g = Math.max(g, minBrightness);
-        b = Math.max(b, minBrightness);
+        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        if (isDarkMode) {
+            // Darken the color for dark mode
+            r = Math.floor(r * 0.8);
+            g = Math.floor(g * 0.8);
+            b = Math.floor(b * 0.8);
+        } else {
+            // 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})`;
     });
diff --git a/packages/ui/src/github-banner.tsx b/packages/ui/src/github-banner.tsx
index e098fc37..69b02bd7 100644
--- a/packages/ui/src/github-banner.tsx
+++ b/packages/ui/src/github-banner.tsx
@@ -15,7 +15,7 @@ export const GithubBanner = component$(() => {
         >
             <section class="w-full flex flex-col items-center justify-center">
                 <div class="w-full max-w-xl mx-auto">
-                    <div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-1 ring-neutral-400 dark:ring-neutral-600 rounded-xl">
+                    <div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-2 ring-gray-300 dark:ring-gray-700 rounded-xl">
                         <div>
                             <div class="gap-2 w-full flex flex-col">
                                 <div class="flex md:items-center justify-start gap-2 md:flex-row flex-col dark:text-gray-400/70 text-gray-600/70">
@@ -38,7 +38,7 @@ export const GithubBanner = component$(() => {
                             </div>
                         </div>
                         <div class="flex items-center md:flex-col justify-center gap-2 w-max">
-                            <Link class="select-none relative justify-center items-center w-full flex z-[2] px-3 ring-1 ring-neutral-400 dark:ring-neutral-600 rounded-md h-8 min-w-max bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200" rel="noopener noreferrer" href="https://github.com/nestriness/nestri" target="_blank">
+                            <Link class="select-none relative justify-center items-center w-full flex z-[2] px-3 ring-2 ring-gray-300 dark:ring-gray-700 rounded-md h-8 min-w-max bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200" rel="noopener noreferrer" href="https://github.com/nestriness/nestri" target="_blank">
                                 <span class="text-sm dark:text-white text-black w-full">
                                     <div class="flex justify-around items-center w-full h-max">
                                         Self-Host&nbsp;
diff --git a/packages/ui/src/home-nav-bar.tsx b/packages/ui/src/home-nav-bar.tsx
index 11578ba6..d89f885b 100644
--- a/packages/ui/src/home-nav-bar.tsx
+++ b/packages/ui/src/home-nav-bar.tsx
@@ -12,7 +12,7 @@ export const HomeNavBar = component$(() => {
     );
 
     return (
-        <nav class={cn("sticky justify-between top-0 z-50 px-2 sm:px-6 text-xs sm:text-sm leading-[1] text-gray-950/70 dark:text-gray-50/70 h-[66px] dark:bg-gray-950/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full flex items-center", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-200 dark:shadow-gray-800")} >
+        <nav class={cn("sticky justify-between top-0 z-50 px-2 sm:px-6 text-xs sm:text-sm leading-[1] text-gray-950/70 dark:text-gray-50/70 h-[66px] dark:bg-gray-900/70 bg-gray-100/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full flex items-center", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-300 dark:shadow-gray-700")} >
             <div class="w-6 h-6 flex-shrink-0 md:mr-2">
                 <svg
                     class="h-full w-full"
diff --git a/packages/ui/src/nav-bar.tsx b/packages/ui/src/nav-bar.tsx
index 84fc1024..14092aef 100644
--- a/packages/ui/src/nav-bar.tsx
+++ b/packages/ui/src/nav-bar.tsx
@@ -29,7 +29,7 @@ export const NavBar = component$(() => {
     );
 
     return (
-        <nav class={cn("sticky top-0 z-50 px-4 text-sm font-extrabold bg-gray-50/70 dark:bg-gray-950/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-200 dark:shadow-gray-800")} >
+        <nav class={cn("sticky top-0 z-50 px-4 text-sm font-extrabold bg-gray-100/70 dark:bg-gray-900/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-300 dark:shadow-gray-700")} >
             <div class="mx-auto flex max-w-xl items-center border-b-2 dark:border-gray-50/50 border-gray-950/50" >
                 <Link class="outline-none" href="/" >
                     <h1 class="text-lg font-title" >
diff --git a/packages/ui/src/react/hero-section.tsx b/packages/ui/src/react/hero-section.tsx
index c02a5497..f80abd0a 100644
--- a/packages/ui/src/react/hero-section.tsx
+++ b/packages/ui/src/react/hero-section.tsx
@@ -24,7 +24,7 @@ export function ReactHeroSection({ children }: Props) {
     return (
         <>
             <section className="px-4" >
-                <header className="overflow-hidden mx-auto max-w-xl pt-20 pb-1">
+                <header className="mx-auto max-w-xl pt-20 pb-1">
                     <motion.img
                         initial={{
                             opacity: 0,
