feat(ts-sdk:dapp-kit): Improve connect-modal style

.changeset/mighty-pans-suffer.md

@@ -0,0 +1,5 @@
+---
+'@iota/dapp-kit': minor
+---
+
+Improved the connect-modal style so its easier to read and interact in small screens

sdk/dapp-kit/src/components/connect-modal/views/ConnectionStatus.tsx

@@ -43,7 +43,7 @@ export function ConnectionStatus({
                 <div className={styles.retryButtonContainer}>
                     <Button
                         type="button"
-                        variant="outline"
+                        variant="primary"
                         onClick={() => onRetryConnection(selectedWallet)}
                     >
                         Retry Connection

sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.css.ts

@@ -17,6 +17,8 @@ export const content = style({
     flexGrow: 1,
     gap: 20,
     padding: 40,
+    paddingBottom: 60,
+    overflow: 'auto',
 });
 
 export const installButtonContainer = style({

sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.tsx

@@ -24,7 +24,7 @@ export function GettingStarted() {
                     extension.
                 </InfoSection>
                 <div className={styles.installButtonContainer}>
-                    <Button variant="outline" asChild>
+                    <Button variant="primary" asChild>
                         <a
                             href="https://chrome.google.com/webstore/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija"
                             target="_blank"

sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.css.ts

@@ -3,9 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { style } from '@vanilla-extract/css';
+import { themeVars } from '../../../themes/themeContract.js';
 
 export const container = style({
     display: 'flex',
     flexDirection: 'column',
     gap: 4,
 });
+
+export const icon = style({
+    color: themeVars.colors.body,
+});

sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.tsx

@@ -33,7 +33,7 @@ export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }:
             ) : (
                 <WalletListItem
                     name="IOTA Wallet"
-                    icon={<IotaIcon />}
+                    icon={<IotaIcon className={styles.icon} />}
                     onClick={onPlaceholderClick}
                     isSelected
                 />

sdk/dapp-kit/src/themes/darkTheme.ts

@@ -18,8 +18,8 @@ export const darkTheme: ThemeVars = {
         iconButton: 'transparent',
         dropdownMenu: '#0f141c',
         dropdownMenuSeparator: '#bed8ff14',
-        walletItemSelected: '#171D26',
-        walletItemHover: 'rgba(190, 216, 255, 0.12)',
+        walletItemSelected: 'rgba(190, 216, 255, 0.12)',
+        walletItemHover: 'rgba(190, 216, 255, 0.06)',
         scrollThumb: '#3c4656',
     },
     borderColors: {