From 5064c40c43b37d3319df7ea4a8fee1d2640b1b32 Mon Sep 17 00:00:00 2001
From: grezle <4310551+grezle@users.noreply.github.com>
Date: Fri, 28 Jul 2023 00:55:54 +0100
Subject: [PATCH] fix(bridge, converter, faucet, ui): consistent spacings and
 stylings

---
 apps/bridge/src/components/ConnectWallet.tsx  | 20 ++++++++++++-------
 apps/bridge/src/components/account/Tabs.tsx   |  2 +-
 apps/converter/src/app/layout.tsx             |  2 +-
 .../src/components/ConnectWallet.tsx          | 19 +++++++++++-------
 apps/converter/src/components/Nav.tsx         |  5 +++--
 .../converter/src/components/account/Tabs.tsx |  2 +-
 .../src/components/converter/Convert.tsx      |  5 +----
 .../src/components/converter/From.tsx         |  2 +-
 apps/faucet/src/components/ConnectWallet.tsx  | 19 ++++++++++++------
 packages/ui/src/navigation/Header.tsx         |  2 +-
 packages/ui/src/navigation/NavigationLite.tsx |  6 ++++--
 11 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/apps/bridge/src/components/ConnectWallet.tsx b/apps/bridge/src/components/ConnectWallet.tsx
index 37e3f544..399dbb68 100644
--- a/apps/bridge/src/components/ConnectWallet.tsx
+++ b/apps/bridge/src/components/ConnectWallet.tsx
@@ -157,14 +157,14 @@ function ConnectWallet() {
 
   // return connect/disconnect component
   return (
-    <div className="flex flex-row gap-4">
+    <div className="flex flex-row gap-4 w-full">
       {isChainID && client.isConnected && client.address ? (
-        <Link href="/account/desposit" scroll shallow>
+        <Link href="/account/desposit" className="w-full" scroll shallow>
           <Button
             type="button"
             variant="walletLabel"
             size="regular"
-            className="flex flex-row items-center text-xs h-full text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 w-fit cursor-pointer"
+            className="flex flex-row items-center text-xs h-full text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 justify-center w-full"
           >
             <Avatar walletAddress="address" />
             <div className="flex items-center justify-center gap-2">
@@ -229,12 +229,18 @@ function ConnectWallet() {
             )}
           </>
         ) : !isChainID ? (
-          <div className="flex flex-row items-center gap-4 justify-end">
-            <div className="flex flex-row items-center gap-2 text-status-error h-fit rounded-lg text-xs backdrop-blur-[50px] bg-white/10 w-fit px-4 py-2 whitespace-nowrap">
+          <div className="grid grid-cols-2 items-center gap-4 w-full">
+            <div className="flex flex-row items-center gap-2 text-status-error h-full rounded-lg text-xs backdrop-blur-[50px] bg-white/10 justify-center px-4 py-2 whitespace-nowrap">
               <BiError className="text-sm" />
-              <p className="text-sm">Unsupported chain</p>
+              <p className="text-sm whitespace-normal text-center">
+                Unsupported chain
+              </p>
             </div>
-            <Button variant="walletConnect" onClick={() => changeNetwork()}>
+            <Button
+              variant="walletConnect"
+              onClick={() => changeNetwork()}
+              className="xl:whitespace-nowrap h-full"
+            >
               Switch to {CHAINS[chainId].chainName}
             </Button>
           </div>
diff --git a/apps/bridge/src/components/account/Tabs.tsx b/apps/bridge/src/components/account/Tabs.tsx
index 168e09f9..d0847a91 100644
--- a/apps/bridge/src/components/account/Tabs.tsx
+++ b/apps/bridge/src/components/account/Tabs.tsx
@@ -78,7 +78,7 @@ export default function Tabs() {
 
   return (
     (view === Views.Account && (
-      <SimpleCard className="max-w-5xl w-full grid gap-8 relative px-8">
+      <SimpleCard className="max-w-5xl w-full grid gap-8 relative px-8 mt-6">
         <span className="flex justify-between align-middle">
           <Typography
             variant="transactionTableHeading"
diff --git a/apps/converter/src/app/layout.tsx b/apps/converter/src/app/layout.tsx
index 62b34784..54d3f5ab 100644
--- a/apps/converter/src/app/layout.tsx
+++ b/apps/converter/src/app/layout.tsx
@@ -41,7 +41,7 @@ export default function RootLayout({
                 className={isComingSoon ? "blur-md" : ""}
               />
             }
-            header={<Nav className="mb-0 m-0" hideConnectBtn={isComingSoon} />}
+            header={<Nav hideConnectBtn={isComingSoon} />}
             className="min-h-screen justify-between"
           >
             <PageContainer className="grow">{children}</PageContainer>
diff --git a/apps/converter/src/components/ConnectWallet.tsx b/apps/converter/src/components/ConnectWallet.tsx
index 523cded3..88a39769 100644
--- a/apps/converter/src/components/ConnectWallet.tsx
+++ b/apps/converter/src/components/ConnectWallet.tsx
@@ -102,7 +102,6 @@ function ConnectWallet() {
     },
   });
 
-  // record change of account
   // record change of account
   const changeAccount = async () => {
     setClient({
@@ -162,14 +161,14 @@ function ConnectWallet() {
 
   // return connect/disconnect component
   return (
-    <div className="flex flex-row gap-4">
+    <div className="flex flex-row gap-4 w-full">
       {isChainID && client.isConnected && client.address ? (
         <Link href="/account/migrate" scroll shallow>
           <Button
             type="button"
             size="regular"
             variant="walletLabel"
-            className="flex items-center text-xs text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 w-fit h-[36px]"
+            className="flex items-center text-xs text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 justify-center w-full h-full"
           >
             <Avatar walletAddress="address" />
             <div className="flex items-center justify-center gap-2">
@@ -234,12 +233,18 @@ function ConnectWallet() {
             )}
           </>
         ) : !isChainID ? (
-          <div className="flex flex-row items-center gap-4 justify-end">
-            <div className="flex flex-row items-center gap-2 text-status-error h-fit rounded-lg text-xs backdrop-blur-[50px] bg-white/10 w-fit px-4 py-2 whitespace-nowrap">
+          <div className="grid grid-cols-2 items-center gap-4 w-full">
+            <div className="flex flex-row items-center gap-2 text-status-error h-full rounded-lg text-xs backdrop-blur-[50px] bg-white/10 justify-center px-4 py-2 whitespace-nowrap">
               <BiError className="text-sm" />
-              <p className="text-sm">Unsupported chain</p>
+              <p className="text-sm whitespace-normal text-center">
+                Unsupported chain
+              </p>
             </div>
-            <Button variant="walletConnect" onClick={() => changeNetwork()}>
+            <Button
+              variant="walletConnect"
+              onClick={() => changeNetwork()}
+              className="xl:whitespace-nowrap h-full"
+            >
               Switch to {CHAINS[chainId].chainName}
             </Button>
           </div>
diff --git a/apps/converter/src/components/Nav.tsx b/apps/converter/src/components/Nav.tsx
index e1d0565b..6c8fe99c 100644
--- a/apps/converter/src/components/Nav.tsx
+++ b/apps/converter/src/components/Nav.tsx
@@ -5,11 +5,12 @@ import ConnectWallet from "@components/ConnectWallet";
 import { L1_CHAIN_ID, L2_CHAIN_ID } from "@config/constants";
 
 type NavProps = {
-  className: string;
   hideConnectBtn: boolean;
+  // eslint-disable-next-line react/require-default-props
+  className?: string | undefined;
 };
 
-function Nav({ className, hideConnectBtn }: NavProps) {
+function Nav({ hideConnectBtn, className = "" }: NavProps) {
   return (
     <Header
       navLite
diff --git a/apps/converter/src/components/account/Tabs.tsx b/apps/converter/src/components/account/Tabs.tsx
index 46a2d25e..0c93f987 100644
--- a/apps/converter/src/components/account/Tabs.tsx
+++ b/apps/converter/src/components/account/Tabs.tsx
@@ -51,7 +51,7 @@ export default function Tabs() {
 
   return (
     (view === Views.Account && (
-      <SimpleCard className="max-w-5xl w-full grid gap-8 relative px-8">
+      <SimpleCard className="max-w-5xl w-full grid gap-8 relative px-8 mt-6">
         <span className="flex justify-between align-middle">
           <Typography
             variant="transactionTableHeading"
diff --git a/apps/converter/src/components/converter/Convert.tsx b/apps/converter/src/components/converter/Convert.tsx
index 06435463..6bd47267 100644
--- a/apps/converter/src/components/converter/Convert.tsx
+++ b/apps/converter/src/components/converter/Convert.tsx
@@ -54,10 +54,7 @@ export default function Convert() {
 
   return (
     <>
-      <Typography
-        variant="appPageHeading"
-        className="text-center mt-4 text-[42px]"
-      >
+      <Typography variant="appPageHeading" className="text-center text-[42px]">
         Migrator
       </Typography>
       <Typography variant="body" className="text-center mt-6 mb-2">
diff --git a/apps/converter/src/components/converter/From.tsx b/apps/converter/src/components/converter/From.tsx
index 36964a01..ae1b878f 100644
--- a/apps/converter/src/components/converter/From.tsx
+++ b/apps/converter/src/components/converter/From.tsx
@@ -36,7 +36,7 @@ export default function TokenSelect() {
   }, []);
 
   return (
-    <div className="z-10">
+    <div className="z-1">
       {/* <BalanceLabel
         direction="Convert"
         logo={
diff --git a/apps/faucet/src/components/ConnectWallet.tsx b/apps/faucet/src/components/ConnectWallet.tsx
index b7f5ab92..833b1bec 100644
--- a/apps/faucet/src/components/ConnectWallet.tsx
+++ b/apps/faucet/src/components/ConnectWallet.tsx
@@ -143,10 +143,11 @@ function ConnectWallet() {
 
   // return connect/disconnect component
   return (
-    <div className="flex flex-row gap-4">
+    <div className="flex flex-row gap-4 w-full">
       {isChainID && client.isConnected && client.address ? (
         <Link
           href="https://bridge.testnet.mantle.xyz/account/desposit"
+          className="w-full"
           scroll
           shallow
         >
@@ -154,7 +155,7 @@ function ConnectWallet() {
             type="button"
             variant="walletLabel"
             size="regular"
-            className="flex flex-row items-center text-xs h-full text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 w-fit cursor-pointer"
+            className="flex flex-row items-center text-xs h-full text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 w-full justify-center"
           >
             <Avatar walletAddress="address" />
             <div className="flex items-center justify-center gap-2">
@@ -217,12 +218,18 @@ function ConnectWallet() {
             )}
           </>
         ) : !isChainID ? (
-          <div className="flex flex-row items-center gap-4 justify-end">
-            <div className="flex flex-row items-center gap-2 text-status-error h-fit rounded-lg text-xs backdrop-blur-[50px] bg-white/10 w-fit px-4 py-2 whitespace-nowrap">
+          <div className="grid grid-cols-2 items-center gap-4 w-full">
+            <div className="flex flex-row items-center gap-2 text-status-error h-full rounded-lg text-xs backdrop-blur-[50px] bg-white/10 justify-center px-4 py-2 whitespace-nowrap">
               <BiError className="text-sm" />
-              <p className="text-sm">Unsupported chain</p>
+              <p className="text-sm whitespace-normal text-center">
+                Unsupported chain
+              </p>
             </div>
-            <Button variant="walletConnect" onClick={() => changeNetwork()}>
+            <Button
+              variant="walletConnect"
+              onClick={() => changeNetwork()}
+              className="xl:whitespace-nowrap h-full"
+            >
               Switch to {CHAINS[chainId].chainName}
             </Button>
           </div>
diff --git a/packages/ui/src/navigation/Header.tsx b/packages/ui/src/navigation/Header.tsx
index 4e30dfee..eac35d32 100644
--- a/packages/ui/src/navigation/Header.tsx
+++ b/packages/ui/src/navigation/Header.tsx
@@ -28,7 +28,7 @@ export const Header = ({
     className={
       sticky
         ? cn('sticky top-0', ` ${className || ``}`)
-        : cn('mb-20', ` ${className || ``}`)
+        : cn('mb-12', ` ${className || ``}`)
     }
   >
     {navLite ? (
diff --git a/packages/ui/src/navigation/NavigationLite.tsx b/packages/ui/src/navigation/NavigationLite.tsx
index 5c9ddd71..049db2f6 100644
--- a/packages/ui/src/navigation/NavigationLite.tsx
+++ b/packages/ui/src/navigation/NavigationLite.tsx
@@ -119,7 +119,7 @@ export const NavigationLite = ({
         </div>
 
         <div className="flex justify-end gap-10">
-          <div className="grid hidden md:block">{walletConnect}</div>
+          <div className="grid hidden lg:block">{walletConnect}</div>
           <div className="grid lg:hidden">
             <button
               type="button"
@@ -178,7 +178,9 @@ export const NavigationLite = ({
                     <div style={{ borderBottom: '1px solid #2E524E' }} />
                   </span>
                 ))}
-                <div className="nav-mobile-wallet">{walletConnect}</div>
+                <div className="nav-mobile-wallet w-full flex">
+                  {walletConnect}
+                </div>
               </div>
             </div>
           </div>