[UI] Update CustomizeModal

Koniverse · May 29, 2024 · 72f6984 · 72f6984
1 parent 9958d9a
commit 72f6984
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 32 deletions.
diff --git a/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModal.tsx b/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModal.tsx
@@ -40,26 +40,28 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     >
       <div className={'__group-label'}>{t('Balance')}</div>
       <div className={'__group-content'}>
-        <SettingItem
-          className={'__setting-item'}
-          leftItemIcon={
-            <BackgroundIcon
-              backgroundColor={token['green-6']}
-              iconColor={token.colorBgBase}
-              phosphorIcon={Wallet}
-              size='sm'
-              type='phosphor'
-              weight='fill'
-            />
-          }
-          name={t('Show zero balance')}
-          rightItem={
-            <Switch
-              checked={isShowZeroBalance}
-              onClick={onChangeZeroBalance}
-              style={{ marginRight: 8 }}
-            />}
-        />
+        <div className='setting-group-container'>
+          <SettingItem
+            className={'__setting-item setting-group-item'}
+            leftItemIcon={
+              <BackgroundIcon
+                backgroundColor={token['green-6']}
+                iconColor={token.colorBgBase}
+                phosphorIcon={Wallet}
+                size='sm'
+                type='phosphor'
+                weight='fill'
+              />
+            }
+            name={t('Show zero balance')}
+            rightItem={
+              <Switch
+                checked={isShowZeroBalance}
+                onClick={onChangeZeroBalance}
+                style={{ marginRight: 8 }}
+              />}
+          />
+        </div>
       </div>
 
       <div className={'__group-label'}>{t('Networks')}</div>
@@ -86,18 +88,18 @@ export const CustomizeModal = styled(Component)<Props>(({ theme: { token } }: Pr
     },
 
     '.__group-label': {
-      paddingLeft: token.padding,
-      paddingRight: token.padding,
-      color: token.colorTextDark3,
-      textTransform: 'uppercase',
-      fontSize: token.fontSizeSM,
-      lineHeight: token.lineHeightSM,
+      paddingLeft: 20,
+      paddingRight: 20,
+      fontWeight: token.headingFontWeight,
+      color: token.colorTextDark1,
+      fontSize: token.fontSizeLG,
+      lineHeight: token.lineHeightLG,
       marginBottom: token.marginXS
     },
 
     '.__group-content': {
-      paddingLeft: token.padding,
-      paddingRight: token.padding,
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS,
       marginBottom: token.marginXS
     },
 

diff --git a/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModalContent.tsx b/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModalContent.tsx
@@ -50,23 +50,23 @@ const Component: React.FC<Props> = (props: Props) => {
     <SwList.Section
       autoFocusSearch={false}
       className={CN(className)}
-      displayRow
       enableSearchInput
       list={chainInfoList}
       renderItem={renderChainItem}
       renderWhenEmpty={renderEmpty}
-      rowGap={'8px'}
       searchFunction={chainSearchFunc}
       searchMinCharactersCount={2}
       searchPlaceholder={t<string>('Network name')}
     />
   );
 };
 
-const CustomizeModalContent = styled(Component)<Props>(({ theme: { token } }: Props) => {
+const CustomizeModalContent = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return {
     '.ant-sw-list-search-input': {
-      paddingBottom: token.paddingXS
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS,
+      paddingBottom: token.padding
     },
 
     '.ant-network-item-content': {
@@ -81,6 +81,21 @@ const CustomizeModalContent = styled(Component)<Props>(({ theme: { token } }: Pr
       paddingRight: token.paddingXS
     },
 
+    '.network_item__container + .network_item__container': {
+      marginTop: token.marginXXS
+    },
+
+    '.ant-sw-list-wrapper': {
+      paddingLeft: token.paddingXS,
+      paddingRight: token.paddingXS
+    },
+
+    '.ant-sw-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      padding: token.paddingXS,
+      borderRadius: 20
+    },
+
     '.manage_chain__empty_container': {
       marginTop: 20,
       display: 'flex',