[UI] Update style for token manager screen

Koniverse · May 25, 2024 · 4cf985d · 4cf985d
1 parent 28c7286
commit 4cf985d
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx b/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx
@@ -327,6 +327,10 @@ export const GeneralSetting = styled(Component)<Props>(({ theme: { extendToken,
         backgroundColor: extendToken.colorBgSecondary1,
         borderRadius: 40,
 
+        '.ant-web3-block.ant-web3-block:hover': {
+          backgroundColor: token.colorBgSecondary
+        },
+
         '.__left-icon': {
           minWidth: 24,
           height: 24,

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Tokens/ManageTokens.tsx b/packages/extension-koni-ui/src/Popup/Settings/Tokens/ManageTokens.tsx
@@ -145,7 +145,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           gridGap={'14px'}
           list={assetItems}
           minColumnWidth={'172px'}
-          mode={'boxed'}
           onClickActionBtn={openFilterModal}
           renderItem={renderTokenItem}
           renderWhenEmpty={renderEmpty}
@@ -168,30 +167,50 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   );
 }
 
-const ManageTokens = styled(Component)<Props>(({ theme: { token } }: Props) => {
+const ManageTokens = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return ({
     '.ant-sw-screen-layout-body': {
       display: 'flex'
     },
 
-    '.ant-sw-list-wrapper.ant-sw-list-wrapper:before': {
-      zIndex: 0,
-      borderRadius: token.borderRadiusLG
+    '.ant-sw-list-section.-boxed-mode .ant-sw-list.-ignore-scrollbar': {
+      paddingRight: token.padding + 6
     },
 
-    '.ant-sw-list-section.-boxed-mode .ant-sw-list': {
-      paddingLeft: token.padding,
-      paddingTop: token.paddingXS,
-      paddingBottom: token.paddingXS
+    '.ant-sw-list-search-input': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
     },
 
-    '.ant-sw-list-section.-boxed-mode .ant-sw-list.-ignore-scrollbar': {
-      paddingRight: token.padding + 6
+    '.ant-sw-list-wrapper': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
+    },
+
+    '.ant-sw-list-section': {
+      paddingTop: token.paddingXXS
     },
 
-    '.ant-network-item.-with-divider': {
+    '.ant-sw-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      padding: token.paddingXS,
+      borderRadius: 20
+    },
+
+    '.ant-network-item + .ant-network-item': {
+      marginTop: token.marginXXS,
       position: 'relative',
-      zIndex: 1
+      zIndex: 1,
+
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        left: 64,
+        right: 48,
+        height: 1,
+        top: -token.marginXXS,
+        backgroundColor: token.colorBgDivider
+      }
     },
 
     '&__inner': {
@@ -201,17 +220,13 @@ const ManageTokens = styled(Component)<Props>(({ theme: { token } }: Props) => {
     },
 
     '.manage_tokens__container': {
-      paddingTop: token.padding,
-      paddingBottom: token.paddingSM,
+      paddingTop: token.paddingXXS,
+      paddingBottom: 24,
       flex: 1,
 
       'button + button': {
         marginLeft: token.marginXS
       }
-    },
-
-    '.manage_tokens__right_item_container': {
-      marginRight: -token.marginXXS
     }
   });
 });

diff --git a/packages/extension-koni-ui/src/components/TokenItem/TokenToggleItem.tsx b/packages/extension-koni-ui/src/components/TokenItem/TokenToggleItem.tsx
@@ -42,26 +42,32 @@ const Component: React.FC<Props> = (props: Props) => {
       subName={''}
       subNetworkKey={tokenInfo.originChain}
       symbol={tokenInfo.slug.toLowerCase()}
-      withDivider={true}
+      withDivider={false}
     />
   );
 };
 
 const TokenToggleItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
   return {
+    backgroundColor: 'transparent',
+
     '.ant-web3-block': {
       cursor: 'default',
-      padding: `${token.padding - 2}px ${token.paddingSM}px ${token.paddingXS - 2}px`,
+      padding: `${token.paddingXS}px 0 ${token.paddingXS}px ${token.paddingSM}px`,
 
       '.ant-web3-block-right-item': {
-        marginRight: `-${token.padding + 2}px`
+        marginRight: 0
       }
     },
 
     '.ant-logo': {
       marginRight: token.marginXXS
     },
 
+    '.ant-network-item-name': {
+      color: token.colorTextDark2
+    },
+
     '.-sub-logo .ant-image-img': {
       width: `${token.size}px !important`,
       height: `${token.size}px !important`

diff --git a/packages/extension-koni-ui/src/contexts/ThemeContext.tsx b/packages/extension-koni-ui/src/contexts/ThemeContext.tsx
@@ -243,6 +243,18 @@ const GlobalStyle = createGlobalStyle<ThemeProps>(({ theme }) => {
     },
 
     // input
+    '.ant-input-container.ant-input-container .ant-input-affix-wrapper': {
+      paddingLeft: token.padding
+    },
+
+    '.ant-input.ant-input::placeholder': {
+      color: token.colorTextDark4
+    },
+
+    '.ant-input-container.ant-input-container.-search .ant-input-prefix': {
+      color: token.colorTextDark1
+    },
+
     '.ant-input-container:not(.-disabled):not(.-status-warning):not(.-status-error):not(.-status-success.-display-success-status)': {
       '&:hover': {
         '--webkit-autofill-border-color': token.colorPrimary,
@@ -261,6 +273,19 @@ const GlobalStyle = createGlobalStyle<ThemeProps>(({ theme }) => {
       }
     },
 
+    '.ant-input-search.ant-input-search': {
+      backgroundColor: token.colorBgInput,
+      borderRadius: 26,
+
+      '&:before': {
+        borderRadius: 26
+      }
+    },
+
+    '.ant-sw-list-section .ant-sw-list-action-btn.ant-sw-list-action-btn': {
+      right: 8
+    },
+
     // selectModal
 
     '.ant-select-modal-input-container:not(.-disabled):not(.-status-warning):not(.-status-error):not(.-status-success.-display-success-status)': {

diff --git a/packages/extension-koni-ui/src/themes.ts b/packages/extension-koni-ui/src/themes.ts
@@ -100,6 +100,7 @@ const defaultToken: Partial<AliasToken> = {
   colorText: '#1F1F23',
   colorBgBorder: '#1F1F23',
   colorBgDivider: 'rgba(31, 31, 35, 0.12)',
+  colorBgInput: '#fff',
   borderRadius: 8,
   colorTextDark1: '#1F1F23',
   colorTextDark2: 'rgba(31, 31, 35, 0.85)',