From 3f53ff6ee552b288f056a4643ceeaf75a98f4a33 Mon Sep 17 00:00:00 2001
From: Jay <lygm1062@gmail.com>
Date: Fri, 5 Apr 2024 15:06:04 +0800
Subject: [PATCH] refactor: update width of header and footer (#685)

---
 src/app/globals.css       |   4 +-
 src/components/footer.tsx |  93 ++++++++++++++---------------
 src/components/header.tsx | 120 ++++++++++++++++++--------------------
 3 files changed, 104 insertions(+), 113 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index aa7b9b82..9a42eca7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -41,10 +41,10 @@ body {
     @apply h-[64px];
   }
   .app-footer {
-    @apply h-[58px];
+    @apply h-[48px];
   }
   .app-main {
-    min-height: calc(100vh - 64px - 58px);
+    min-height: calc(100vh - 64px - 48px);
     @apply mt-[64px];
   }
 
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 7c8dc44c..902927dd 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -24,69 +24,64 @@ export default function Footer() {
   }, []);
 
   return (
-    <div className="app-footer w-full">
-      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-medium">
-        {/* Copyright */}
-        <span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
+    <div className="app-footer flex w-full items-center justify-center px-medium lg:justify-between lg:px-5">
+      <span className="text-xs font-semibold text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
 
-        <div className="mx-3 h-4 w-[1px] bg-white/30 lg:mx-5 lg:bg-transparent" />
+      <div className="hidden items-center gap-5 lg:flex">
+        <Link
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="/records"
+        >
+          Explorer
+        </Link>
+        <a
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="https://xtoken.helixbridge.app/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          xToken
+        </a>
+        <a
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="https://docs.helixbridge.app/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Docs
+        </a>
 
-        <div className="flex shrink-0 items-center gap-medium lg:gap-5">
-          <Link
-            className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-            href="/records"
-          >
-            Explorer
-          </Link>
+        {mainnetOrTestnet && (
           <a
-            className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-            href="https://xtoken.helixbridge.app/"
+            className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+            href={mainnetOrTestnet.link}
             rel="noopener noreferrer"
             target="_blank"
           >
-            xToken
+            {mainnetOrTestnet.label}
           </a>
-          <a
-            className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-            href="https://docs.helixbridge.app/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Docs
-          </a>
-
-          {mainnetOrTestnet && (
-            <a
-              className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-              href={mainnetOrTestnet.link}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              {mainnetOrTestnet.label}
-            </a>
-          )}
+        )}
 
-          <div className="hidden h-4 w-[1px] bg-white/30 lg:block" />
+        <div className="h-3 w-[1px] bg-white/30" />
 
-          <SocialLink href="https://github.com/helix-bridge">
-            <Image width={18} height={18} alt="Github" src="/images/social/github.svg" />
-          </SocialLink>
-          <SocialLink href="https://twitter.com/helixbridges">
-            <Image width={18} height={18} alt="Twitter" src="/images/social/twitter.svg" />
-          </SocialLink>
-          <SocialLink href="https://discord.gg/6XyyNGugdE">
-            <Image width={22} height={22} alt="Discord" src="/images/social/discord.svg" />
-          </SocialLink>
-          <SocialLink href="mailto:hello@helixbridge.app">
-            <Image width={18} height={18} alt="Email" src="/images/social/email.svg" />
-          </SocialLink>
-        </div>
+        <Social href="https://github.com/helix-bridge">
+          <Image width={16} height={16} alt="Github" src="/images/social/github.svg" />
+        </Social>
+        <Social href="https://twitter.com/helixbridges">
+          <Image width={16} height={16} alt="Twitter" src="/images/social/twitter.svg" />
+        </Social>
+        <Social href="https://discord.gg/6XyyNGugdE">
+          <Image width={20} height={20} alt="Discord" src="/images/social/discord.svg" />
+        </Social>
+        <Social href="mailto:hello@helixbridge.app">
+          <Image width={16} height={16} alt="Email" src="/images/social/email.svg" />
+        </Social>
       </div>
     </div>
   );
 }
 
-function SocialLink({ children, href }: PropsWithChildren<{ href: string }>) {
+function Social({ children, href }: PropsWithChildren<{ href: string }>) {
   return (
     <a
       target="_blank"
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 56451702..8498c22e 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -32,73 +32,69 @@ export default function Header() {
 
   return (
     <>
-      <div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
-        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-medium">
-          {/* Left */}
-          <div className="flex items-center gap-5">
-            {/* Logo */}
-            <div className="flex items-center gap-medium">
-              <Link href="/">
-                <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
-              </Link>
-              {!isProduction() && (
-                <div className="inline-flex items-center justify-center rounded-small bg-primary px-1 py-[1px]">
-                  <span className="text-xs font-bold text-black">testnet</span>
-                </div>
-              )}
-            </div>
-
-            {/* Navigations */}
-            <div className="hidden items-center gap-medium lg:flex">
-              {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
-                external ? (
-                  <a
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href={href}
-                    key={label}
-                    className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
-                      pathname === href ? "text-primary underline" : "text-white"
-                    }`}
-                  >
-                    {label}
-                  </a>
-                ) : soon || disabled ? (
-                  <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
-                    <span className="rounded-[0.625rem] px-medium py-small text-sm font-bold text-white/50">
-                      {label}
-                    </span>
-                  </Tooltip>
-                ) : (
-                  <Link
-                    key={label}
-                    href={href}
-                    className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
-                      pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
-                    }`}
-                  >
-                    {label}
-                  </Link>
-                ),
-              )}
-            </div>
+      <div className="app-header fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-b-white/25 bg-app-bg px-medium lg:border-b-transparent lg:px-5">
+        {/* Left */}
+        <div className="flex items-center gap-5">
+          {/* Logo */}
+          <div className="flex items-center gap-medium">
+            <Link href="/">
+              <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
+            </Link>
+            {!isProduction() && (
+              <div className="inline-flex items-center justify-center rounded-small bg-primary px-1 py-[1px]">
+                <span className="text-xs font-bold text-black">testnet</span>
+              </div>
+            )}
           </div>
 
-          {/* Right */}
+          {/* Navigations */}
           <div className="hidden items-center gap-medium lg:flex">
-            <HistoryNav />
-            <User prefixLength={14} suffixLength={10} />
-            <ChainSwitch />
+            {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
+              external ? (
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={href}
+                  key={label}
+                  className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
+                    pathname === href ? "text-primary underline" : "text-white"
+                  }`}
+                >
+                  {label}
+                </a>
+              ) : soon || disabled ? (
+                <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
+                  <span className="rounded-[0.625rem] px-medium py-small text-sm font-bold text-white/50">{label}</span>
+                </Tooltip>
+              ) : (
+                <Link
+                  key={label}
+                  href={href}
+                  className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
+                    pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
+                  }`}
+                >
+                  {label}
+                </Link>
+              ),
+            )}
           </div>
-          <Image
-            width={24}
-            height={24}
-            alt="Menu"
-            src="/images/menu.svg"
-            className="inline transition-transform active:translate-y-1 lg:hidden"
-            onClick={setIsOpenTrue}
-          />
         </div>
+
+        {/* Right */}
+        <div className="hidden items-center gap-medium lg:flex">
+          <HistoryNav />
+          <User prefixLength={14} suffixLength={10} />
+          <ChainSwitch />
+        </div>
+        <Image
+          width={24}
+          height={24}
+          alt="Menu"
+          src="/images/menu.svg"
+          className="inline transition-transform active:translate-y-1 lg:hidden"
+          onClick={setIsOpenTrue}
+        />
       </div>
 
       <Drawer maskClosable isOpen={isOpen} onClose={setIsOpenFalse}>