Tong/refine UI 1 (#374)

* header, footer and background refactor for light theme * header, footer and background refactor for dark theme * patch logo * restyle error page * replace footer background image with css pseduo element * remove dark selector * use twjoin * use default tailwind value * Update src/app/components/Header/Header.tsx Co-authored-by: David Totrashvili <[email protected]> --------- Co-authored-by: David Totrashvili <[email protected]>
babylonlabs-io · Nov 24, 2024 · 49adef5 · 49adef5
1 parent ac95659
commit 49adef5
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 108 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,4 @@
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/out/
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx
@@ -41,7 +41,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
   const ref = useRef(null);
   useOnClickOutside(ref, handleClickOutside);
 
-  const { coinName, networkName } = getNetworkConfig();
+  const { coinName } = getNetworkConfig();
   const { isApiNormal, isGeoBlocked, apiMessage } = useHealthCheck();
 
   // Renders the Tooltip describing the reason
@@ -146,7 +146,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
         disabled={Boolean(address) || !isApiNormal}
       >
         <PiWalletBold size={20} className="flex md:hidden" />
-        <span className="hidden md:flex">Connect to {networkName} network</span>
+        <span className="hidden md:flex">Connect Wallets</span>
       </button>
       {!isApiNormal && renderApiNotAvailableTooltip()}
     </div>

diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import {
   BsDiscord,
   BsGithub,
@@ -10,6 +11,8 @@ import { GoHome } from "react-icons/go";
 import { IoMdBook } from "react-icons/io";
 import { MdAlternateEmail, MdForum } from "react-icons/md";
 
+import babylonIcon from "@/app/assets/logo-white.svg";
+
 const iconLinks = [
   {
     name: "Website",
@@ -65,44 +68,50 @@ const iconLinks = [
 
 export const Footer: React.FC = () => {
   return (
-    <div className="container mx-auto flex flex-col items-center">
-      <div className="w-24">
-        <div className="divider my-1" />
-      </div>
-      <div className="flex justify-center gap-8 p-2">
-        <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>
-      </div>
-      <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"
-          >
+    <div className="hidden relative md:flex h-[238px] text-white bg-primary-main before:absolute before:h-3 before:w-2/3 before:bg-primary-main before:left-1/4 before:-top-2">
+      <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"
+              >
+                <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={url}
+              href="https://babylonlabs.io/privacy-policy"
               target="_blank"
               rel="noopener noreferrer"
               className="transition-colors hover:text-primary"
             >
-              <Icon title={name} />
-            </a>
+              Privacy Policy
+            </a>{" "}
+            - 2024 Babylon Labs. All rights reserved.
           </div>
-        ))}
+        </div>
+        <div>
+          <Image src={babylonIcon} alt="babylon" />
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -1,10 +1,12 @@
+import { twJoin } from "tailwind-merge";
+
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider";
 import { useAppState } from "@/app/state";
 import { shouldDisplayTestingMsg } from "@/config";
 
-import { ConnectSmall } from "../Connect/ConnectSmall";
 import { ConnectedSmall } from "../Connect/ConnectedSmall";
+import { ConnectSmall } from "../Connect/ConnectSmall";
 import { Logo } from "../Logo/Logo";
 import { TestingInfo } from "../TestingInfo/TestingInfo";
 import { ThemeToggle } from "../ThemeToggle/ThemeToggle";
@@ -16,8 +18,8 @@ export const Header = () => {
 
   return (
     <nav>
-      <div className="bg-base-300 shadow-sm">
-        <div className="container mx-auto flex w-full items-center justify-between gap-4 p-6 pb-4 md:pb-6">
+      <section className="bg-primary-main h-[300px] -mb-[188px]">
+        <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between">
           <Logo />
           <div className="flex flex-1">
             {shouldDisplayTestingMsg() && (
@@ -26,26 +28,32 @@ export const Header = () => {
               </div>
             )}
           </div>
-          <ConnectSmall
-            loading={loading}
-            onConnect={open}
-            address={address}
-            btcWalletBalanceSat={totalBalance}
-            onDisconnect={disconnect}
-          />
-          <ThemeToggle />
-        </div>
-        <div
-          className={`${address && "justify-end p-6 pt-0"}container mx-auto flex w-full items-center gap-4 md:hidden md:p-0`}
-        >
-          <ConnectedSmall
-            loading={loading}
-            address={address}
-            btcWalletBalanceSat={totalBalance}
-            onDisconnect={disconnect}
-          />
+          <div className="flex items-center gap-4">
+            <ConnectSmall
+              loading={loading}
+              onConnect={open}
+              address={address}
+              btcWalletBalanceSat={totalBalance}
+              onDisconnect={disconnect}
+            />
+            <ThemeToggle />
+          </div>
+          <div
+            className={twJoin(
+              address && "justify-end p-6 pt-0",
+              "container mx-auto flex w-full items-center gap-4 md:hidden md:p-0",
+            )}
+          >
+            <ConnectedSmall
+              loading={loading}
+              address={address}
+              btcWalletBalanceSat={totalBalance}
+              onDisconnect={disconnect}
+            />
+          </div>
         </div>
-      </div>
+      </section>
+
       {shouldDisplayTestingMsg() && (
         <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden">
           <TestingInfo />

diff --git a/src/app/components/Header/SimplifiedHeader.tsx b/src/app/components/Header/SimplifiedHeader.tsx
@@ -6,8 +6,8 @@ import { TestingInfo } from "../TestingInfo/TestingInfo";
 export const SimplifiedHeader = () => {
   return (
     <nav>
-      <div className="bg-base-300 shadow-sm">
-        <div className="container mx-auto flex w-full items-center justify-between gap-4 p-6 pb-4 md:pb-6">
+      <section className="bg-primary-main h-[300px] mb-[-188px]">
+        <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between">
           <Logo />
           <div className="flex flex-1">
             {shouldDisplayTestingMsg() && (
@@ -17,12 +17,12 @@ export const SimplifiedHeader = () => {
             )}
           </div>
         </div>
-      </div>
-      {shouldDisplayTestingMsg() && (
-        <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden">
-          <TestingInfo />
-        </div>
-      )}
+        {shouldDisplayTestingMsg() && (
+          <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden">
+            <TestingInfo />
+          </div>
+        )}
+      </section>
     </nav>
   );
 };
diff --git a/src/app/components/Logo/Logo.tsx b/src/app/components/Logo/Logo.tsx
@@ -1,31 +1,13 @@
-import { useTheme } from "next-themes";
 import Image from "next/image";
-import { useEffect, useState } from "react";
 
-import darkLogo from "@/app/assets/logo-black.svg";
-import lightLogo from "@/app/assets/logo-white.svg";
+import logo from "@/app/assets/logo-white.svg";
 
 interface LogoProps {}
 
 export const Logo: React.FC<LogoProps> = () => {
-  const [mounted, setMounted] = useState(false);
-  const { resolvedTheme } = useTheme();
-  const lightSelected = resolvedTheme === "light";
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // uses placeholder of babylon logo with primary color
-  // since before theme is resolved, we don't know which logo to show
-  if (!mounted) {
-    return <div className="h-[40px] w-[159px]" />;
-  }
-
   return (
     <div className="flex">
-      <Image src={lightSelected ? darkLogo : lightLogo} alt="Babylon" />
+      <Image src={logo} alt="Babylon" />
     </div>
   );
 };
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -37,6 +37,7 @@ export default function GlobalError({
             network === Network.MAINNET
               ? "main-app-mainnet"
               : "main-app-testnet",
+            "bg-primary-contrast",
           )}
         >
           <GenericError />

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -86,26 +86,6 @@ input[type="number"] {
   width: 1px !important;
 }
 
-[data-theme="dark"] .main-app-mainnet {
-  background: rgb(43, 43, 43) url("./assets/bg-pattern.svg") left top/auto
-    repeat;
-}
-
-[data-theme="light"] .main-app-mainnet {
-  background: rgb(236, 236, 236) url("./assets/bg-pattern.svg") left top/auto
-    repeat;
-}
-
-[data-theme="dark"] .main-app-testnet {
-  background: rgb(43, 43, 43) url("./assets/testnet-bg-pattern.svg") left
-    top/auto repeat;
-}
-
-[data-theme="light"] .main-app-testnet {
-  background: rgb(236, 236, 236) url("./assets/testnet-bg-pattern.svg") left
-    top/auto repeat;
-}
-
 [data-theme="dark"] .react-responsive-modal-modal {
   background-color: #1e1e1e;
   color: #fff;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,6 +34,7 @@ export default function RootLayout({
               network === Network.MAINNET
                 ? "main-app-mainnet"
                 : "main-app-testnet",
+              "bg-primary-contrast",
             )}
           >
             {children}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,7 +13,13 @@ const config: Config = {
     screens: screenBreakPoints,
     extend: {
       colors: {
-        primary: "#FF7C2A",
+        primary: {
+          DEFAULT: "#000000DE",
+          main: "#042F40",
+          dark: "#12495E",
+          light: "#387085",
+          contrast: "#F5F7F2",
+        },
         secondary: "#0DB7BF",
         "base-400": "hsl(var(--base-400) / <alpha-value>)",
       },