From 58a71599db64cf569fc16cfaceb2b2a3e91b3615 Mon Sep 17 00:00:00 2001
From: Tong Li <tongli0809@gmail.com>
Date: Sat, 23 Nov 2024 15:14:04 +1100
Subject: [PATCH] header, footer and background refactor for dark theme

---
 public/footer-rectangle-dark.svg              |  3 +
 ...ctangle.svg => footer-rectangle-light.svg} |  0
 src/app/components/Footer/Footer.tsx          | 78 ++++++++++---------
 src/app/components/Header/Header.tsx          |  4 +-
 src/app/layout.tsx                            |  2 +-
 tailwind.config.ts                            |  3 +-
 6 files changed, 48 insertions(+), 42 deletions(-)
 create mode 100644 public/footer-rectangle-dark.svg
 rename public/{footer-rectangle.svg => footer-rectangle-light.svg} (100%)

diff --git a/public/footer-rectangle-dark.svg b/public/footer-rectangle-dark.svg
new file mode 100644
index 00000000..dfdfd912
--- /dev/null
+++ b/public/footer-rectangle-dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1534" height="238" viewBox="0 0 1534 238" fill="none">
+  <path d="M0 9.85185H289.905V0H1503.76V9.85185H1534V238H0V9.85185Z" fill="#181818"/>
+</svg>
\ No newline at end of file
diff --git a/public/footer-rectangle.svg b/public/footer-rectangle-light.svg
similarity index 100%
rename from public/footer-rectangle.svg
rename to public/footer-rectangle-light.svg
diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
index 47ce836a..e7b04325 100644
--- a/src/app/components/Footer/Footer.tsx
+++ b/src/app/components/Footer/Footer.tsx
@@ -68,49 +68,51 @@ const iconLinks = [
 
 export const Footer: React.FC = () => {
   return (
-    <div className="container mx-auto flex flex-row items-center justify-around bg-footer-texture bg-cover h-[238px] text-white">
-      <div className="flex flex-col">
-        <div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2">
-          {iconLinks.map(({ name, url, Icon }) => (
-            <div
-              key={name}
-              className="flex w-4 items-center justify-center text-[22px] text-xl"
-            >
-              <a
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="transition-colors hover:text-primary"
+    <div className="hidden md:flex bg-footer-texture-light dark:bg-footer-texture-dark bg-[length:100%_100%] h-[238px] text-white">
+      <div className="container mx-auto flex flex-row items-center justify-around">
+        <div className="flex flex-col">
+          <div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2">
+            {iconLinks.map(({ name, url, Icon }) => (
+              <div
+                key={name}
+                className="flex w-4 items-center justify-center text-[22px] text-xl"
               >
-                <Icon title={name} />
-              </a>
-            </div>
-          ))}
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-colors hover:text-primary"
+                >
+                  <Icon title={name} />
+                </a>
+              </div>
+            ))}
+          </div>
+          <div>
+            <a
+              href="https://babylonlabs.io/terms-of-use"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-colors hover:text-primary"
+            >
+              Terms of Use
+            </a>{" "}
+            -{" "}
+            <a
+              href="https://babylonlabs.io/privacy-policy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-colors hover:text-primary"
+            >
+              Privacy Policy
+            </a>{" "}
+            - 2024 Babylon Labs. All rights reserved.
+          </div>
         </div>
         <div>
-          <a
-            href="https://babylonlabs.io/terms-of-use"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="transition-colors hover:text-primary"
-          >
-            Terms of Use
-          </a>{" "}
-          -{" "}
-          <a
-            href="https://babylonlabs.io/privacy-policy"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="transition-colors hover:text-primary"
-          >
-            Privacy Policy
-          </a>{" "}
-          - 2024 Babylon Labs. All rights reserved.
+          <Image src={babylonIcon} alt="babylon" />
         </div>
       </div>
-      <div>
-        <Image src={babylonIcon} alt="babylon" />
-      </div>
     </div>
   );
 };
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index 2c6d57a5..259f564f 100644
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -15,8 +15,8 @@ export const Header = () => {
 
   return (
     <nav>
-      <section className="bg-primary-main h-[300px] mb-[-188px]">
-        <div className="container h-[84px] py-[22px] mx-auto flex items-center justify-between">
+      <section className="bg-primary-main dark:bg-[#181818] h-[300px] mb-[-188px]">
+        <div className="container h-[84px] py-[22px] px-6 mx-auto flex items-center justify-between">
           <Logo />
           {/* <div className="flex flex-1">
             {shouldDisplayTestingMsg() && (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 87dd89f7..82924d27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
               network === Network.MAINNET
                 ? "main-app-mainnet"
                 : "main-app-testnet",
-              "bg-primary-contrast",
+              "bg-primary-contrast dark:bg-[#1E1E1E]",
             )}
           >
             {children}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8914803b..7b25b097 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -28,7 +28,8 @@ const config: Config = {
         stakingFinalityProvidersDesktop: "2fr 1.5fr 2fr 0.75fr 0.75fr",
       },
       backgroundImage: {
-        "footer-texture": "url(/footer-rectangle.svg)",
+        "footer-texture-light": "url(/footer-rectangle-light.svg)",
+        "footer-texture-dark": "url(/footer-rectangle-dark.svg)",
       },
     },
   },