[UI] Update style for Address book

Koniverse · May 30, 2024 · 12f288b · 12f288b
1 parent 19b7f6a
commit 12f288b
Showing 1 changed file with 76 additions and 4 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Settings/AddressBook/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/AddressBook/index.tsx
@@ -170,6 +170,7 @@ const Component: React.FC<Props> = (props: Props) => {
           addressPreLength={8}
           addressSufLength={8}
           avatarSize={24}
+          className={'account-item'}
           key={item.address}
           onClick={onSelectItem(item)}
         />
@@ -181,6 +182,7 @@ const Component: React.FC<Props> = (props: Props) => {
         accountName={item.name}
         address={address}
         avatarSize={24}
+        className={'account-item'}
         key={item.address}
         onClick={onSelectItem(item)}
       />
@@ -211,7 +213,6 @@ const Component: React.FC<Props> = (props: Props) => {
             </Badge>
           )}
           autoFocusSearch={false}
-          displayRow={true}
           enableSearchInput={true}
           groupBy='group'
           groupSeparator={groupSeparator}
@@ -220,7 +221,6 @@ const Component: React.FC<Props> = (props: Props) => {
           ref={sectionRef}
           renderItem={renderItem}
           renderWhenEmpty={renderEmpty}
-          rowGap='var(--row-gap)'
           searchFunction={searchFunction}
           searchMinCharactersCount={2}
           searchPlaceholder={t<string>('Account name')}
@@ -243,17 +243,89 @@ const Component: React.FC<Props> = (props: Props) => {
   );
 };
 
-const ManageAddressBook = styled(Component)<Props>(({ theme: { token } }: Props) => {
+const ManageAddressBook = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return {
     '--row-gap': `${token.sizeXS}px`,
 
+    '.empty-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      padding: '40px 20px',
+      borderRadius: 20
+    },
+
     '.ant-sw-screen-layout-body': {
-      paddingTop: token.padding,
       height: '100%',
       display: 'flex',
       flexDirection: 'column'
     },
 
+    '.ant-sw-list-search-input': {
+      paddingRight: token.paddingXS,
+      paddingLeft: token.paddingXS
+    },
+
+    '.ant-sw-list': {
+      paddingRight: token.paddingXS,
+      paddingLeft: token.paddingXS
+    },
+
+    '.___list-separator': {
+      fontSize: token.fontSizeLG,
+      lineHeight: token.lineHeightLG,
+      paddingLeft: token.paddingSM,
+      paddingRight: token.paddingSM,
+      marginBottom: token.marginXS
+    },
+
+    '.___list-separator + .account-item': {
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20
+    },
+
+    '.account-item + .___list-separator': {
+      marginTop: token.marginXS
+    },
+
+    '.ant-sw-list > .account-item': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      borderBottomLeftRadius: 20,
+      borderBottomRightRadius: 20,
+      position: 'relative',
+
+      '.ant-account-item': {
+        minHeight: 68,
+        paddingTop: token.paddingXS,
+        paddingBottom: token.paddingXS,
+        backgroundColor: 'transparent',
+        paddingLeft: 20
+      },
+
+      '.ant-web3-block-left-item': {
+        paddingRight: token.paddingSM
+      }
+    },
+
+    '.ant-sw-list > .account-item + .account-item': {
+      marginTop: -token.marginXXS,
+
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        display: 'block',
+        height: 15,
+        left: 0,
+        right: 0,
+        top: -15,
+        backgroundColor: extendToken.colorBgSecondary1
+      },
+
+      '.ant-account-item': {
+        minHeight: 60,
+        paddingTop: 0,
+        backgroundColor: 'transparent'
+      }
+    },
+
     '.ant-sw-list-section': {
       flex: 1,
       marginBottom: token.margin