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

* feat: Improve `connect-modal` style * chore: Fix lint error * chore: add changeset * refactor: Style the IOTA logo
iotaledger · Jan 21, 2025 · f0c83a2 · f0c83a2
1 parent 60a78f3
commit f0c83a2
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 5 deletions.
diff --git a/.changeset/mighty-pans-suffer.md b/.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
diff --git a/sdk/dapp-kit/src/components/connect-modal/views/ConnectionStatus.tsx b/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

diff --git a/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.css.ts b/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({

diff --git a/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.tsx b/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"

diff --git a/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.css.ts b/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,
+});
diff --git a/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.tsx b/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
                 />

diff --git a/sdk/dapp-kit/src/themes/darkTheme.ts b/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: {