From d5fa0d0e241016e6bd89714e1d266685bc17aaa2 Mon Sep 17 00:00:00 2001
From: IsaccoSordo <isacco.sordo@gmail.com>
Date: Wed, 11 Sep 2024 16:38:47 +0200
Subject: [PATCH] fix: styling

---
 .../src/components/top-wallets/index.tsx      | 64 ++++++++++---------
 .../beacon-ui/src/components/wallet/index.tsx |  2 +-
 .../alert/components/pairing-alert/index.tsx  |  2 +-
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/beacon-ui/src/components/top-wallets/index.tsx b/packages/beacon-ui/src/components/top-wallets/index.tsx
index 88e22ab63..c8d86289c 100644
--- a/packages/beacon-ui/src/components/top-wallets/index.tsx
+++ b/packages/beacon-ui/src/components/top-wallets/index.tsx
@@ -18,26 +18,32 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
   const enableBugReport = localStorage ? localStorage.getItem(StorageKey.ENABLE_METRICS) : 'false'
 
   return (
-    <div className="top-wallets-wrapper">
-      <div className="top-wallets-info">
-        <h3>Connect Wallet</h3>
-        {enableBugReport === 'true' ? (
-          <span>
-            Do you wish to report a bug?{' '}
-            <span className="top-wallets-learn-more" onClick={props.onClickLearnMore}>
-              Click here
-            </span>
+    <Grid2 container justifyContent={'center'} alignItems={'center'} flexDirection={'column'}>
+      <h3>Connect Wallet</h3>
+      {enableBugReport === 'true' ? (
+        <span>
+          Do you wish to report a bug?{' '}
+          <span
+            style={{ color: 'blue', textDecoration: 'underline', cursor: 'pointer' }}
+            onClick={props.onClickLearnMore}
+          >
+            Click here
           </span>
-        ) : (
-          <span>
-            If you don't have a wallet, you can select a provider and create one now.{' '}
-            <span className="top-wallets-learn-more" onClick={props.onClickLearnMore}>
-              Learn more
-            </span>
-          </span>
-        )}
-      </div>
-      <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} padding={'10px'}>
+        </span>
+      ) : (
+        <span>
+          If you don't have a wallet, you can select a provider and create one now.{' '}
+          <span onClick={props.onClickLearnMore}>Learn more</span>
+        </span>
+      )}
+      <Grid2
+        container
+        justifyContent={'center'}
+        alignItems={'center'}
+        rowSpacing={1}
+        gap={0}
+        columnSpacing={1}
+      >
         {props.wallets.map((wallet) => (
           <Wallet
             key={wallet.id}
@@ -49,24 +55,20 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
           />
         ))}
         {props.otherWallets && (
-          <div className="top-wallets-other-wallets" onClick={props.otherWallets.onClick}>
-            <div className="top-wallets-other-wallets-left">
+          <Grid2 container onClick={props.otherWallets.onClick}>
+            <Grid2 container>
               <h3>Other Wallets</h3>
               <p>See other wallets you can use to connect</p>
-            </div>
-            <div className="top-wallets-other-wallets-right">
+            </Grid2>
+            <Grid2 container>
               <img src={props.otherWallets.images[0]} alt="Other Wallet 1" />
-              <img
-                className="top-wallets-other-wallets-center-wallet"
-                src={props.otherWallets.images[1]}
-                alt="Other Wallet 2"
-              />
+              <img src={props.otherWallets.images[1]} alt="Other Wallet 2" />
               <img src={props.otherWallets.images[2]} alt="Other Wallet 3" />
-            </div>
-          </div>
+            </Grid2>
+          </Grid2>
         )}
       </Grid2>
-    </div>
+    </Grid2>
   )
 }
 
diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
index a107bfae3..2441129fb 100644
--- a/packages/beacon-ui/src/components/wallet/index.tsx
+++ b/packages/beacon-ui/src/components/wallet/index.tsx
@@ -14,7 +14,7 @@ interface WalletProps {
 
 const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
   return (
-    <Grid2 size={props.small ? undefined : 6} alignSelf={'baseline'}>
+    <Grid2 size={props.small ? undefined : 6} alignSelf={'baseline'} padding={'5px'}>
       <Button
         variant="outlined"
         onClick={props.onClick}
diff --git a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
index c91c1feb4..b9ef2575e 100644
--- a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
+++ b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
@@ -422,7 +422,7 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
             wallets={isMobile ? walletList.slice(0, 3) : walletList.slice(0, 4)}
             isMobile={isMobile}
             onClickWallet={(id) => handleClickWallet(id, props)}
-            onClickLearnMore={() => {}}
+            onClickLearnMore={() => handleUpdateState('help')}
             otherWallets={
               isMobile
                 ? {