Updated ios android ui

Author: lionellbriones

packages/adapters/wallet-connect-v1-adapter/src/config.ts

@@ -4,7 +4,7 @@ export const WALLET_CONNECT_EXTENSION_ADAPTERS: IWalletConnectExtensionAdapter[]
   {
     name: "Rainbow",
     chains: [CHAIN_NAMESPACES.EIP155],
-    logo: "",
+    logo: "https://images.web3auth.io/login-rainbow.svg",
     mobile: {
       native: "rainbow:",
       universal: "https://rnbwapp.com",

packages/ui/css/web3auth.css

@@ -503,21 +503,48 @@
 }
 
 #w3a-modal .w3a-wallet-connect__container {
-    padding: 10px;
     background: #ffffff;
     border-radius: 10px;
     color: var(--text-color1);
     font-size: 10px;
     width: fit-content;
     margin: auto;
+    min-width: 250px;
+    padding: 16px 12px;
 }
 
-.w3a-wallet-connect-qr {
-    width: 200px;
+#w3a-modal .w3a-wallet-connect__container-desktop,
+#w3a-modal .w3a-wallet-connect__container-android {
+    margin: auto;
+}
+
+#w3a-modal .w3a-wallet-connect__container-ios {
+    display: flex;
+    grid-gap: 30px 20px;
+    padding: 0 0 28px;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+}
+
+#w3a-modal .w3a-wallet-connect-qr {
     margin: 16px 16px;
     padding: inherit;
 }
 
+#w3a-modal .w3a-wallet-connect__container-android a {
+    text-decoration: none;
+}
+
+#w3a-modal .w3a-wallet-connect__container-android .w3a-button {
+    background-color: rgb(64, 153, 255) !important;
+    color: #ffffff !important;
+    height: auto;
+    font-size: 14px;
+    padding: 8px 16px;
+    width: auto;
+    margin: auto;
+}
+
 #w3a-modal .w3a-wallet-connect__logo > img {
     text-align: center;
     width: 115px;

packages/ui/src/components/WalletConnect.tsx

@@ -81,34 +81,42 @@ function WalletConnect(props: WalletConnectProps) {
   // TODO: show only wcAdapters of current chain
   return (
     <div className="w3ajs-wallet-connect w3a-wallet-connect">
-      <i className="w3a-wallet-connect__logo">{walletConnectIcon}</i>
-      <div className="w3ajs-wallet-connect__container w3a-wallet-connect__container">
+      <div
+        className={`w3ajs-wallet-connect__container w3a-wallet-connect__container${
+          deviceDetails.os === OS_MAP.Android ? " w3a-wallet-connect__container--android" : ""
+        }`}
+      >
+        <div className="w3a-wallet-connect__logo">{walletConnectIcon}</div>
         {deviceDetails.platform === PLATFORMS_MAP.desktop ? (
-          <>
+          <div className="w3a-wallet-connect__container-desktop">
             <div>Scan QR code with a WalletConnect-compatible wallet</div>
             <div className="w3ajs-wallet-connect-qr w3a-wallet-connect-qr">
               <QRCode size={200} value={walletConnectUri} />
             </div>
-          </>
+          </div>
         ) : (
           <>
             {links.map((link) => {
               // TODO: render logo and on click,
               // https://github.com/WalletConnect/walletconnect-monorepo/blob/54f3ca0b1cd1ac24e8992a5a812fdfad01769abb/packages/helpers/browser-utils/src/registry.ts#L24
               // format and show
               return deviceDetails.os === OS_MAP.iOS ? (
-                <a key={link.name} href={link.href} rel="noopener noreferrer" target="_blank">
-                  <button type="button" className="w3a-button w3a-button--icon">
-                    {link.logo}
-                  </button>
-                  <p className="w3a-adapter-item__label">{link.name}</p>
-                </a>
+                <div className="w3a-wallet-connect__container-ios">
+                  <a key={link.name} href={link.href} rel="noopener noreferrer" target="_blank">
+                    <button type="button" className="w3a-button w3a-button--icon">
+                      <img src={link.logo} height="auto" width="auto" alt={`login-${link.name}`} />
+                    </button>
+                    <p className="w3a-adapter-item__label">{link.name}</p>
+                  </a>
+                </div>
               ) : (
-                <a key={link.name} href={link.href} rel="noopener noreferrer" target="_blank">
-                  <button type="button" className="w3a-button w3a-button--icon">
-                    Connect
-                  </button>
-                </a>
+                <div className="w3a-wallet-connect__container-android">
+                  <a key={link.name} href={link.href} rel="noopener noreferrer" target="_blank">
+                    <button type="button" className="w3a-button">
+                      Connect
+                    </button>
+                  </a>
+                </div>
               );
             })}
           </>