header, footer and background refactor for dark theme

babylonlabs-io · Nov 23, 2024 · 1fab0d8 · 1fab0d8
1 parent 54477d6
commit 1fab0d8
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 57 deletions.
diff --git a/public/footer-rectangle-dark.svg b/public/footer-rectangle-dark.svg
diff --git a/public/footer-rectangle.svg → public/footer-rectangle-light.svg b/public/footer-rectangle.svg → public/footer-rectangle-light.svg
diff --git a/src/app/assets/babylon-logo.svg b/src/app/assets/babylon-logo.svg
diff --git a/src/app/assets/logo.svg b/src/app/assets/logo.svg
diff --git 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
@@ -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
@@ -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
@@ -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)",
       },
     },
   },