Merge pull request #11 from WalletConnect/feat/customization

feat: customization

Author: skibitsky

Packages/com.walletconnect.web3modal/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2024-07-08
+
+### Added
+
+- Advanced customization capabilities
+
+### Fixed
+
+- Empty wallet search query not showing any wallets
+
 ## [0.3.2] - 2024-06-26
 
 ### Added

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/CardSelect/CardSelect.uss

@@ -9,20 +9,20 @@
     padding: 8px 8px 10px;
     align-items: center;
     border-radius: var(--wui-border-radius-xs);
-    border-width: 1px;
-    border-color: rgba(0, 0, 0, 0);
+    border-width: var(--wui-card-select-border-width);
+    border-color: var(--wui-card-select-border-color);
     transition-property: background-color;
     transition-duration: 100ms;
 
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-card-select-bg-color);
 }
 
 #card-select:active #card-select__container {
     border-color: var(--wui-color-accent-100);
 }
 
 #card-select__container:hover {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-card-select-bg-color-hover);
 }
 
 #card-select__container:disabled {
@@ -82,9 +82,9 @@
 #card-select__icon-image-border {
     width: 55;
     height: 55;
-    border-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--wui-card-select-image-border-color);
     border-radius: var(--wui-border-radius-3xs);
-    border-width: 1px;
+    border-width: var(--wui-card-select-image-border-width);
 }
 
 #card-select__status-icon-container {

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/Modal/Modal.uss

@@ -2,16 +2,17 @@
     width: 100%;
     height: 0;
     border-radius: var(--wui-border-radius-l);
-    border-color: var(--wui-gray-glass-005);
-    background-color: var(--wui-color-modal-bg);
+    border-color: var(--wui-modal-border-color);
+    border-width: var(--wui-modal-border-width);
+    background-color: var(--wui-modal-bg-color);
     overflow: hidden;
     transition-property: height;
-    transition-duration: 150ms;
+    transition-duration: 175ms;
 }
 
 .modal--type-mobile {
     position: absolute;
-    max-height: 90%;
+    max-height: var(--wui-modal-max-height-mobile);
     bottom: 0;
     left: 0;
     right: 0;
@@ -21,7 +22,7 @@
 
 .modal--type-desktop {
     align-self: center;
-    width: 360px;
+    width: var(--wui-modal-width-desktop);
 }
 
 #modal__body {

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/ModalHeader/ModalHeader.uss

@@ -2,7 +2,7 @@
     width: 100%;
     height: 63;
     border-bottom-width: 1;
-    border-color: rgba(255, 255, 255, 0.05);
+    border-color: var(--wui-modal-header-border-color);
 }
 
 #modal-header__container {
@@ -12,7 +12,7 @@
 }
 
 #modal-header__body {
-    color: rgba(228, 231, 231, 1);
+    color: var(--wui-color-fg-100);
     padding-left: 12;
     padding-right: 12;
 }

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/QrCode/QrCode.uss

@@ -1,7 +1,7 @@
 .qrcode {
     width: 100%;
     height: 100%;
-    border-radius: 36px;
+    border-radius: var(--wui-border-radius-l);
     overflow: hidden;
 }
 

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/TextInput/TextInput.uss

@@ -24,7 +24,7 @@ Image {
     padding-left: 12;
     padding-right: 12;
     align-items: center;
-    border-radius: 12;
+    border-radius: var(--wui-border-radius-xxs);
     border-width: 1;
     flex-shrink: 1;
     border-color: var(--wui-gray-glass-005);

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/WalletImage/WalletImage.uss

@@ -1,7 +1,7 @@
 .wallet-image {
     padding: 1px;
     border-width: 1px;
-    border-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-xs, 8px);
     flex-shrink: 0;
     flex-grow: 0;

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/AccountView/AccountView.uxml

@@ -12,7 +12,6 @@
                                            variant="Shade"
                 />
             </ui:VisualElement>
-
         </ui:VisualElement>
         <ui:VisualElement name="account-view__profile-balance-container">
             <ui:Label name="account-view__profile-balance-value"/>

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/DeepLinkView/DeepLinkView.uss

@@ -1,3 +1,7 @@
+Label {
+    white-space: normal;
+}
+
 #deep-link-view__wallet-icon-container {
     margin-top: 30;
     margin-bottom: 10;

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/WebAppView/WebAppView.uss

@@ -1,3 +1,7 @@
+Label {
+    white-space: normal;
+}
+
 #web-app-view__wallet-icon-container {
     margin-top: 30;
     margin-bottom: 10;