styles(frontend): dark mode

refs #18
elimu-ai · Jun 30, 2024 · f6b0008 · f6b0008
1 parent db09898
commit f6b0008
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>