fix(bridge, converter, faucet, ui): consistent spacings and stylings

windranger-io · Jul 27, 2023 · 5064c40 · 5064c40
1 parent b41e0f0
commit 5064c40
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -143,18 +143,19 @@ 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
         >
           <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 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
@@ -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
@@ -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>