[UI] Update style for token selector

Koniverse · May 29, 2024 · ca24d87 · ca24d87
1 parent cd332e4
commit ca24d87
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 23 deletions.
diff --git a/packages/extension-koni-ui/src/components/Field/TokenSelector.tsx b/packages/extension-koni-ui/src/components/Field/TokenSelector.tsx
@@ -184,7 +184,7 @@ function Component (props: Props, ref: ForwardedRef<InputRef>): React.ReactEleme
   );
 }
 
-export const TokenSelector = styled(forwardRef(Component))<Props>(({ theme: { token } }: Props) => {
+export const TokenSelector = styled(forwardRef(Component))<Props>(({ theme: { extendToken, token } }: Props) => {
   return ({
     '&.chain-selector-input .__selected-item': {
       color: token.colorText,
@@ -194,6 +194,33 @@ export const TokenSelector = styled(forwardRef(Component))<Props>(({ theme: { to
       whiteSpace: 'nowrap'
     },
 
+    '.ant-sw-list-search-input.ant-sw-list-search-input': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
+    },
+
+    '.ant-sw-list-wrapper.ant-sw-list-wrapper': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
+    },
+
+    '.ant-sw-list.ant-sw-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      borderRadius: 24,
+      paddingTop: token.paddingXXS,
+      paddingBottom: token.paddingXXS,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+
+    '.ant-select-modal-item.ant-select-modal-item': {
+      marginBottom: 0
+    },
+
+    '.ant-select-modal-item + .ant-select-modal-item': {
+      marginTop: token.marginXXS
+    },
+
     // TODO: delete this when fix component in ui-base
     '.token-item .ant-network-item-sub-name': {
       display: 'none'

diff --git a/packages/extension-koni-ui/src/components/Modal/GlobalSearchTokenModal.tsx b/packages/extension-koni-ui/src/components/Modal/GlobalSearchTokenModal.tsx
@@ -60,6 +60,7 @@ function Component ({ className = '', id, onCancel, sortedTokenSlugs, tokenBalan
 
       return (
         <TokenBalanceSelectionItem
+          className={'token-selector-item'}
           key={slug}
           tokenName={tokenName}
           {...tokenBalance}
@@ -95,12 +96,10 @@ function Component ({ className = '', id, onCancel, sortedTokenSlugs, tokenBalan
     >
       <SwList.Section
         autoFocusSearch={false}
-        displayRow
         enableSearchInput
         list={tokenBalances}
         renderItem={renderItem}
         renderWhenEmpty={renderEmpty}
-        rowGap = {'8px'}
         searchFunction={searchFunc}
         searchMinCharactersCount={2}
         searchPlaceholder={t<string>('Token name')}
@@ -109,7 +108,7 @@ function Component ({ className = '', id, onCancel, sortedTokenSlugs, tokenBalan
   );
 }
 
-export const GlobalSearchTokenModal = styled(Component)<Props>(({ theme: { token } }: Props) => {
+export const GlobalSearchTokenModal = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return ({
     '.ant-sw-modal-body': {
       paddingLeft: 0,
@@ -122,12 +121,27 @@ export const GlobalSearchTokenModal = styled(Component)<Props>(({ theme: { token
       flex: 1
     },
 
-    '.ant-sw-list-search-input': {
-      paddingBottom: token.paddingXS
+    '.ant-sw-list-search-input.ant-sw-list-search-input': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
     },
 
-    '.ant-sw-list': {
-      paddingRight: token.padding
+    '.ant-sw-list-wrapper.ant-sw-list-wrapper': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
+    },
+
+    '.ant-sw-list.ant-sw-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      borderRadius: 24,
+      paddingTop: token.paddingXXS,
+      paddingBottom: token.paddingXXS,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+
+    '.token-selector-item + .token-selector-item': {
+      marginTop: token.marginXXS
     }
   });
 });
diff --git a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/ReceiveQrModal.tsx b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/ReceiveQrModal.tsx
@@ -144,6 +144,7 @@ const Component: React.FC<Props> = ({ address, className, selectedNetwork }: Pro
             />
           }
           onClick={handleClickViewOnExplorer}
+          shape={'round'}
         >{t('View account on explorer')}</Button>
       </>
     </SwModal>
@@ -197,7 +198,7 @@ const ReceiveQrModal = styled(Component)<Props>(({ theme: { token } }: Props) =>
       '.ant-account-item-address': {
         fontSize: token.fontSize,
         lineHeight: token.lineHeight,
-        color: token.colorTextLight4,
+        color: token.colorTextDark3,
         fontWeight: token.bodyFontWeight,
         paddingRight: token.paddingXS
       }

diff --git a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/SimpleQrModal.tsx b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/SimpleQrModal.tsx
@@ -116,7 +116,7 @@ const SimpleQrModal = styled(Component)<Props>(({ theme: { token } }: Props) =>
       '.ant-account-item-address': {
         fontSize: token.fontSize,
         lineHeight: token.lineHeight,
-        color: token.colorTextLight4,
+        color: token.colorTextDark3,
         fontWeight: token.bodyFontWeight,
         paddingRight: token.paddingXS
       }

diff --git a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/TokensSelectorModal.tsx b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/TokensSelectorModal.tsx
@@ -105,14 +105,25 @@ function Component ({ address, className = '', items, onSelectItem }: Props): Re
   );
 }
 
-export const TokensSelectorModal = styled(Component)<Props>(({ theme: { token } }: Props) => {
+export const TokensSelectorModal = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return ({
-    '.ant-sw-modal-content': {
-      minHeight: 474
+    '.ant-sw-list-search-input.ant-sw-list-search-input': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
     },
 
-    '.ant-sw-list-search-input': {
-      paddingBottom: token.paddingXS
+    '.ant-sw-list-wrapper.ant-sw-list-wrapper': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
+    },
+
+    '.ant-sw-list.ant-sw-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      borderRadius: 24,
+      paddingTop: token.paddingXXS,
+      paddingBottom: token.paddingXXS,
+      paddingLeft: 0,
+      paddingRight: 0
     },
 
     '.ant-sw-modal-body': {
@@ -132,7 +143,7 @@ export const TokensSelectorModal = styled(Component)<Props>(({ theme: { token }
     },
 
     '.token-selector-item + .token-selector-item': {
-      marginTop: token.marginXS
+      marginTop: token.marginXXS
     }
   });
 });
diff --git a/packages/extension-koni-ui/src/components/TokenItem/TokenBalanceSelectionItem.tsx b/packages/extension-koni-ui/src/components/TokenItem/TokenBalanceSelectionItem.tsx
@@ -189,12 +189,7 @@ export const TokenBalanceSelectionItem = styled(Component)<Props>(({ theme: { to
       width: 40,
       display: 'flex',
       justifyContent: 'center',
-      color: token.colorTextLight4
-    },
-    '.ant-balance-item-content:hover': {
-      '.__icon-wrapper': {
-        color: token.colorTextLight2
-      }
+      color: token.colorTextDark2
     }
   });
 });
diff --git a/packages/webapp/public/assets/reset.css b/packages/webapp/public/assets/reset.css
@@ -635,7 +635,6 @@ div#popup-container {
 
 .ant-sw-modal .ant-sw-modal-content.ant-sw-modal-content {
   height: auto;
-  margin-top: 24px;
   max-height: 100%;
 }
 
@@ -871,3 +870,14 @@ div.ant-notification-notice {
   min-width: 40px;
   height: 40px;
 }
+
+/* override */
+
+.ant-network-item.ant-network-item {
+  background-color: transparent;
+}
+
+
+.ant-balance-item.ant-balance-item {
+  background-color: transparent
+}