From 4cf985da202812b698440af72e84c718b91f9fa5 Mon Sep 17 00:00:00 2001 From: lw Date: Sat, 25 May 2024 14:24:33 +0700 Subject: [PATCH] [UI] Update style for token manager screen --- .../src/Popup/Settings/GeneralSetting.tsx | 4 ++ .../Popup/Settings/Tokens/ManageTokens.tsx | 53 ++++++++++++------- .../components/TokenItem/TokenToggleItem.tsx | 12 +++-- .../src/contexts/ThemeContext.tsx | 25 +++++++++ packages/extension-koni-ui/src/themes.ts | 1 + 5 files changed, 73 insertions(+), 22 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx b/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx index b2446a8b4f..a3ca91179e 100644 --- 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)(({ 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 index f97a342f98..8f96600fd0 100644 --- 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 { gridGap={'14px'} list={assetItems} minColumnWidth={'172px'} - mode={'boxed'} onClickActionBtn={openFilterModal} renderItem={renderTokenItem} renderWhenEmpty={renderEmpty} @@ -168,30 +167,50 @@ function Component ({ className = '' }: Props): React.ReactElement { ); } -const ManageTokens = styled(Component)(({ theme: { token } }: Props) => { +const ManageTokens = styled(Component)(({ 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)(({ 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 index eb7c38b1f5..a061a2609c 100644 --- a/packages/extension-koni-ui/src/components/TokenItem/TokenToggleItem.tsx +++ b/packages/extension-koni-ui/src/components/TokenItem/TokenToggleItem.tsx @@ -42,19 +42,21 @@ const Component: React.FC = (props: Props) => { subName={''} subNetworkKey={tokenInfo.originChain} symbol={tokenInfo.slug.toLowerCase()} - withDivider={true} + withDivider={false} /> ); }; const TokenToggleItem = styled(Component)(({ 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 } }, @@ -62,6 +64,10 @@ const TokenToggleItem = styled(Component)(({ theme: { token } }: Props) = 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 index 6ca6c6030f..7d3feccd5a 100644 --- 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(({ 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(({ 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 index d77c8ab08d..cb023235c7 100644 --- a/packages/extension-koni-ui/src/themes.ts +++ b/packages/extension-koni-ui/src/themes.ts @@ -100,6 +100,7 @@ const defaultToken: Partial = { colorText: '#1F1F23', colorBgBorder: '#1F1F23', colorBgDivider: 'rgba(31, 31, 35, 0.12)', + colorBgInput: '#fff', borderRadius: 8, colorTextDark1: '#1F1F23', colorTextDark2: 'rgba(31, 31, 35, 0.85)',