[UI] Update style for Address book modal

Koniverse · May 30, 2024 · ebfbdb1 · ebfbdb1
1 parent 12f288b
commit ebfbdb1
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 14 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
@@ -336,6 +336,10 @@ const ManageAddressBook = styled(Component)<Props>(({ theme: { extendToken, toke
       fontSize: token.fontSizeHeading6,
       lineHeight: token.lineHeightHeading6,
       color: token.colorTextBase
+    },
+
+    '.address-book-group-counter': {
+      color: token.colorTextDark3
     }
   };
 });

diff --git a/packages/extension-koni-ui/src/components/Modal/AddressBook/AddressBookModal.tsx b/packages/extension-koni-ui/src/components/Modal/AddressBook/AddressBookModal.tsx
@@ -175,6 +175,7 @@ const Component: React.FC<Props> = (props: Props) => {
         addressPreLength={isRecent ? 9 : 4}
         addressSufLength={isRecent ? 9 : 4}
         avatarSize={24}
+        className={'account-item'}
         fallbackName={false}
         isSelected={selected}
         key={`${item.address}_${item.group}`}
@@ -250,7 +251,6 @@ const Component: React.FC<Props> = (props: Props) => {
             </Badge>
           )}
           autoFocusSearch={false}
-          displayRow={true}
           enableSearchInput={true}
           groupBy='group'
           groupSeparator={groupSeparator}
@@ -259,7 +259,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')}
@@ -280,33 +279,95 @@ const Component: React.FC<Props> = (props: Props) => {
   );
 };
 
-const AddressBookModal = styled(Component)<Props>(({ theme: { token } }: Props) => {
+const AddressBookModal = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return {
     '--row-gap': `${token.sizeXS}px`,
 
+    '.ant-sw-list-section': {
+      flex: 1
+    },
+
+    '.empty-list': {
+      backgroundColor: extendToken.colorBgSecondary1,
+      padding: '40px 20px',
+      borderRadius: 20
+    },
+
     '.ant-sw-modal-body': {
       display: 'flex',
       paddingLeft: 0,
       paddingRight: 0
     },
 
-    '.ant-sw-list-section': {
-      flex: 1
+    '.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
     },
 
-    '.address-book-group-separator': {
-      fontWeight: token.fontWeightStrong,
-      fontSize: 11,
-      lineHeight: '20px',
-      textTransform: 'uppercase',
+    '.account-item + .___list-separator': {
+      marginTop: token.marginXS
+    },
 
-      '.address-book-group-label': {
-        color: token.colorTextBase
+    '.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
       },
 
-      '.address-book-group-counter': {
-        color: token.colorTextTertiary
+      '.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'
+      }
+    },
+
+    '.address-book-group-counter': {
+      color: token.colorTextDark3
     }
   };
 });