connect wallet: UI and text adjustments (#844)

Author: MananTank

.changeset/long-ties-visit.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+connect wallet UI and text adjustments

packages/react/src/components/Modal.tsx

@@ -117,6 +117,7 @@ const DialogContent = styled.div<{ theme?: Theme }>`
   padding-bottom: ${spacing.xl};
   animation: ${modalAnimationDesktop} 200ms ease;
   box-shadow: ${shadow.lg};
+  line-height: 1;
 
   &:focus {
     outline: none;

packages/react/src/wallet/ConnectWallet/Connect.tsx

@@ -179,7 +179,7 @@ export const ConnectModal = () => {
     >
       <Modal
         style={{
-          maxWidth: "450px",
+          maxWidth: "480px",
         }}
         open={hideModal ? false : isWalletModalOpen}
         setOpen={(value) => {

packages/react/src/wallet/ConnectWallet/Details.tsx

@@ -112,7 +112,7 @@ export const ConnectedWalletDetails: React.FC<{
         ) : (
           <Skeleton height={fontSize.sm} width="82px" />
         )}
-        <Spacer y="xxs" />
+        <Spacer y="xs" />
         <WalletAddress>{shortenString(address || "")}</WalletAddress>
       </ColFlex>
 
@@ -367,7 +367,7 @@ const dropdownContentFade = keyframes`
 `;
 
 const DropDownContent = styled(DropdownMenu.Content)<{ theme?: Theme }>`
-  width: 340px;
+  width: 360px;
   box-sizing: border-box;
   max-width: 100%;
   border-radius: ${radius.lg};
@@ -377,16 +377,17 @@ const DropDownContent = styled(DropdownMenu.Content)<{ theme?: Theme }>`
   border: 1px solid ${(props) => props.theme.border.base};
   background-color: ${(props) => props.theme.bg.base};
   z-index: 1000000;
+  line-height: 1;
 `;
 
 const WalletInfoButton = styled.button<{ theme?: Theme }>`
   all: unset;
   background: ${(props) => props.theme.bg.base};
   border: 1px solid ${(props) => props.theme.border.base};
-  padding: ${spacing.sm} ${spacing.md};
+  padding: ${spacing.sm} ${spacing.sm};
   border-radius: ${radius.lg};
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: ${spacing.md};
   box-sizing: border-box;
@@ -461,6 +462,7 @@ const MenuButton = styled.button<{ theme?: Theme }>`
   color: ${(props) => props.theme.text.neutral} !important;
   gap: ${spacing.sm};
   -webkit-tap-highlight-color: transparent;
+  line-height: 1.3;
 
   &:not([disabled]):hover {
     transition: box-shadow 250ms ease, border-color 250ms ease;

packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx

@@ -183,7 +183,7 @@ const NetworkList: React.FC<{
                   style={{
                     display: "flex",
                     flexDirection: "column",
-                    gap: spacing.xxs,
+                    gap: spacing.xs,
                   }}
                 >
                   {chainName}

packages/react/src/wallet/ConnectWallet/screens/GetStartedScreen.tsx

@@ -140,7 +140,7 @@ export const GetStartedScreen: React.FC<{
               width: "100%",
             }}
           >
-            I{`'`}ve finished setting up my {props.walletName} mobile wallet
+            I{`'`}ve finished setting up my {props.walletName} on mobile
           </HelperLink>
         </>
       )}

packages/react/src/wallet/ConnectWallet/screens/ScanScreen.tsx

@@ -18,6 +18,9 @@ export const ScanScreen: React.FC<{
   walletName: string;
   walletIconURL: string;
 }> = (props) => {
+  const walletName = props.walletName.toLowerCase().includes("wallet")
+    ? props.walletName
+    : `${props.walletName} wallet`;
   return (
     <>
       <BackButton
@@ -47,12 +50,12 @@ export const ScanScreen: React.FC<{
 
         <Spacer y="xl" />
 
-        <ModalTitle>Scan with {props.walletName} wallet</ModalTitle>
+        <ModalTitle>Scan with {walletName} </ModalTitle>
         <Spacer y="md" />
 
         <ModalDescription>
           Scan this QR code with your phone <br />
-          camera or {props.walletName} wallet to connect
+          camera or {walletName} to connect
         </ModalDescription>
 
         <Spacer y="md" />
@@ -69,7 +72,7 @@ export const ScanScreen: React.FC<{
         <Spacer y="xl" />
 
         <LinkButton onClick={props.onGetStarted}>
-          {`Don't`} have {props.walletName} Wallet?
+          {`Don't`} have {walletName}?
         </LinkButton>
       </div>
     </>