From f6b0008f766376de060ef300711354566fd9883d Mon Sep 17 00:00:00 2001
From: jo-elimu <1451036+jo-elimu@users.noreply.github.com>
Date: Sun, 30 Jun 2024 13:14:21 +0700
Subject: [PATCH] styles(frontend): dark mode

refs #18
---
 frontend/src/components/Footer.tsx               | 2 +-
 frontend/src/components/Header.tsx               | 2 +-
 frontend/src/components/Sponsorships.tsx         | 2 +-
 frontend/src/pages/index.tsx                     | 2 +-
 frontend/src/pages/sponsorships/[queueIndex].tsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index a1ab009..0deff0b 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
     console.debug("Footer");
     return (
-        <footer className="p-8 flex justify-center w-full border-purple-950 border-t-2">
+        <footer className="p-8 flex justify-center w-full border-purple-100 dark:border-purple-950 border-t-2">
             Made with 💜 by&nbsp;<a href="https://elimu.ai" className="text-purple-600">elimu.ai</a>, 
             powered by&nbsp;<a href="https://nouns.wtf" className="text-purple-600">Nouns ⌐◨-◨</a>
         </footer>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index fb63529..a779477 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -5,7 +5,7 @@ export default function Header() {
     console.debug("Header");
     return (
         <>
-            <header className="p-8 text-4xl flex justify-center w-full border-purple-950 border-b-2">
+            <header className="p-8 text-4xl flex justify-center w-full border-purple-50 dark:border-purple-950 border-b-2">
                 <Link href="/">
                     <Image className='mx-auto' src="/logo.svg" alt="Logo" width={160} height={160} />
                 </Link>
diff --git a/frontend/src/components/Sponsorships.tsx b/frontend/src/components/Sponsorships.tsx
index 2340c69..8ffa4c3 100644
--- a/frontend/src/components/Sponsorships.tsx
+++ b/frontend/src/components/Sponsorships.tsx
@@ -33,7 +33,7 @@ export default function Sponsorships() {
         <>
             {Array(queueCount).fill(1).map((el, i) =>
                 <Link key={i} href={`/sponsorships/${i}`}>
-                    <div className="p-4 text-2xl bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:bg-purple-900 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
+                    <div className="p-4 text-2xl bg-purple-200 dark:bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
                         <SponsorshipSummary queueIndex={i} />
                     </div>
                 </Link>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index f1834d7..79f50d0 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -25,7 +25,7 @@ export default function Home() {
           Sponsor the education of one individual child
         </div>
 
-        <div id="steps" className="mt-16 p-8 flex flex-col space-y-8 border-4 border-purple-950 rounded-lg">
+        <div id="steps" className="mt-16 p-8 flex flex-col space-y-8 border-4 border-purple-50 dark:border-purple-950 rounded-lg">
           <div className="flex flex-col items-center text-center">
             <h2 className="text-2xl">Step 1 - Sponsor sends 0.02 ETH</h2>
             <Image src="/step1.avif" alt="Step 1" className="rounded-lg mt-4" width={160} height={0} />
diff --git a/frontend/src/pages/sponsorships/[queueIndex].tsx b/frontend/src/pages/sponsorships/[queueIndex].tsx
index 6250912..79e3773 100644
--- a/frontend/src/pages/sponsorships/[queueIndex].tsx
+++ b/frontend/src/pages/sponsorships/[queueIndex].tsx
@@ -24,7 +24,7 @@ export default function SponsorshipDetails() {
           Sponsorship Details
         </h1>
 
-        <div className="mt-8 p-4 text-2xl bg-zinc-900 rounded-lg">
+        <div className="mt-8 p-4 text-2xl bg-zinc-50 dark:bg-zinc-900 rounded-lg">
           <SponsorshipSummary queueIndex={queueIndex} />
         </div>
       </main>