diff --git a/packages/extension-koni-ui/src/Popup/Settings/AddressBook/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/AddressBook/index.tsx index 00f2a68350..8095e39666 100644 --- 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)(({ 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 index 21fce191f8..7cbe4ba814 100644 --- 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) => { 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) => { )} autoFocusSearch={false} - displayRow={true} enableSearchInput={true} groupBy='group' groupSeparator={groupSeparator} @@ -259,7 +259,6 @@ const Component: React.FC = (props: Props) => { ref={sectionRef} renderItem={renderItem} renderWhenEmpty={renderEmpty} - rowGap='var(--row-gap)' searchFunction={searchFunction} searchMinCharactersCount={2} searchPlaceholder={t('Account name')} @@ -280,33 +279,95 @@ const Component: React.FC = (props: Props) => { ); }; -const AddressBookModal = styled(Component)(({ theme: { token } }: Props) => { +const AddressBookModal = styled(Component)(({ 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 } }; });