Refactor ConnectOverlay component and related styles

softstack · May 3, 2024 · 4062f22 · 4062f22
1 parent 0afa36f
commit 4062f22
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 77 deletions.
diff --git a/src/components/connectOverlay/ConnectOverlay.css b/src/components/connectOverlay/ConnectOverlay.css
@@ -42,68 +42,3 @@
 .connect-overlay.out {
     animation: slideOutToBottom 0.5s ease-out forwards;
 }
-
-.connect-overlay-header {
-    text-align: left;
-    padding: 0.8em 1em;
-    display: flex;
-    justify-content: space-between;
-}
-
-.connect-overlay-header p {
-    margin: 0;
-
-    font-size: 1.1em;
-    color: #212121;
-    font-weight: 700;
-}
-
-.connect-overlay-close {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
-.horizontal-line {
-    margin: 0;
-    border-top: 1px solid #c6c6c6;
-    border-bottom: none;
-}
-
-.choose-network-header {
-    display: flex;
-    padding: 1em 1.3em;
-    justify-content: space-between;
-}
-
-.choose-network-header p {
-    color: #212121;
-    font-size: 1em;
-    font-weight: 500;
-    margin: 0;
-}
-
-.available-networks {
-    display: flex;
-    margin: 1em;
-    justify-content: space-around;
-}
-
-.select-wallet-header {
-    display: flex;
-    padding: 1em 1.3em;
-    justify-content: space-between;
-}
-
-.select-wallet-header p {
-    font-size: 1em;
-    font-weight: 500;
-    margin: 0;
-    color: #212121;
-}
-
-.available-wallets {
-    display: flex;
-    margin: 1em;
-    justify-content: space-around;
-}
diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -102,7 +102,7 @@ const ConnectOverlay: React.FC<Props> = ({
     };
 
     // Network Selection
-    const [ethereumSelected, setEthereumSelected] = useState(true);
+    const [ethereumSelected, setEthereumSelected] = useState(false);
     const [polygonSelected, setPolygonSelected] = useState(false);
     const [avalancheSelected, setAvalancheSelected] = useState(false);
 
@@ -129,13 +129,24 @@ const ConnectOverlay: React.FC<Props> = ({
 
     return (
         <div className={`connect-overlay ${slideAnimation}`}>
-            <div className="connect-overlay-header">
-                {connecting ? <p>Connecting</p> : <p>Connect Wallet</p>}
-                <div onClick={close} className="connect-overlay-close">
+            <div className="flex justify-between text-left py-3 px-4">
+                {connecting ? (
+                    <p className="m-0 text-lg font-bold text-customBlackText">
+                        Connecting
+                    </p>
+                ) : (
+                    <p className="m-0 text-lg font-bold text-customBlackText">
+                        Connect Wallet
+                    </p>
+                )}
+                <div
+                    onClick={close}
+                    className="flex items-center cursor-pointer"
+                >
                     <img src={crossIcon} alt="" />
                 </div>
             </div>
-            <hr className="horizontal-line" />
+            <hr className="m-0 border-t-1 border-solid border-customGrayLine" />
             {connecting ? (
                 <>
                     <div>
@@ -152,8 +163,10 @@ const ConnectOverlay: React.FC<Props> = ({
                 </>
             ) : (
                 <>
-                    <div className="choose-network-header">
-                        <p>Choose Network</p>
+                    <div className="flex py-4 px-5 justify-between">
+                        <p className="m-0 text-customBlackText text-base font-medium">
+                            Choose Network
+                        </p>
                         <img
                             src={
                                 networksExpanded ? upCircleIcon : downCircleIcon
@@ -163,7 +176,7 @@ const ConnectOverlay: React.FC<Props> = ({
                         />
                     </div>
                     {networksExpanded && (
-                        <div className="available-networks">
+                        <div className="flex m-4 justify-around">
                             <NetworkBadge
                                 network="Ethereum"
                                 icon={ethereumLogo}
@@ -188,8 +201,10 @@ const ConnectOverlay: React.FC<Props> = ({
                             />
                         </div>
                     )}
-                    <div className="select-wallet-header">
-                        <p>Select Wallet</p>
+                    <div className="flex py-4 px-5 justify-between">
+                        <p className="m-0 text-customBlackText text-base font-medium">
+                            Select Wallet
+                        </p>
                         <img
                             src={
                                 walletsExpanded ? upCircleIcon : downCircleIcon
@@ -199,7 +214,7 @@ const ConnectOverlay: React.FC<Props> = ({
                         />
                     </div>
                     {walletsExpanded && (
-                        <div className="available-wallets">
+                        <div className="flex m-4 justify-around">
                             <WalletBadge
                                 walletName="Metamask"
                                 icon={metamaskLogo}

diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx
@@ -16,7 +16,7 @@ const NetworkBadge: React.FC<Props> = ({
     return (
         <div
             onClick={callback}
-            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg ${
+            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg p-2 ${
                 selected ? 'bg-customBlueSelected' : ''
             }`}
         >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,7 @@ export default {
                 customGrayWallet: '#efeff4',
                 customBlackText: '#212121',
                 customBlueSelected: '#B9C1F4',
+                customGrayLine: '#c6c6c6',
             },
             gridTemplateColumns: {
                 'custom-1-3-1': '1fr 3fr 1fr',