From ca24d87f918622d011c669ea726562dab9df1c8a Mon Sep 17 00:00:00 2001 From: lw Date: Wed, 29 May 2024 09:55:53 +0700 Subject: [PATCH] [UI] Update style for token selector --- .../src/components/Field/TokenSelector.tsx | 29 ++++++++++++++++++- .../Modal/GlobalSearchTokenModal.tsx | 28 +++++++++++++----- .../Modal/ReceiveModal/ReceiveQrModal.tsx | 3 +- .../Modal/ReceiveModal/SimpleQrModal.tsx | 2 +- .../ReceiveModal/TokensSelectorModal.tsx | 23 +++++++++++---- .../TokenItem/TokenBalanceSelectionItem.tsx | 7 +---- packages/webapp/public/assets/reset.css | 12 +++++++- 7 files changed, 81 insertions(+), 23 deletions(-) diff --git a/packages/extension-koni-ui/src/components/Field/TokenSelector.tsx b/packages/extension-koni-ui/src/components/Field/TokenSelector.tsx index d11aa079c3..432eb91606 100644 --- a/packages/extension-koni-ui/src/components/Field/TokenSelector.tsx +++ b/packages/extension-koni-ui/src/components/Field/TokenSelector.tsx @@ -184,7 +184,7 @@ function Component (props: Props, ref: ForwardedRef): React.ReactEleme ); } -export const TokenSelector = styled(forwardRef(Component))(({ theme: { token } }: Props) => { +export const TokenSelector = styled(forwardRef(Component))(({ theme: { extendToken, token } }: Props) => { return ({ '&.chain-selector-input .__selected-item': { color: token.colorText, @@ -194,6 +194,33 @@ export const TokenSelector = styled(forwardRef(Component))(({ theme: { to whiteSpace: 'nowrap' }, + '.ant-sw-list-search-input.ant-sw-list-search-input': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS + }, + + '.ant-sw-list-wrapper.ant-sw-list-wrapper': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS + }, + + '.ant-sw-list.ant-sw-list': { + backgroundColor: extendToken.colorBgSecondary1, + borderRadius: 24, + paddingTop: token.paddingXXS, + paddingBottom: token.paddingXXS, + paddingLeft: 0, + paddingRight: 0 + }, + + '.ant-select-modal-item.ant-select-modal-item': { + marginBottom: 0 + }, + + '.ant-select-modal-item + .ant-select-modal-item': { + marginTop: token.marginXXS + }, + // TODO: delete this when fix component in ui-base '.token-item .ant-network-item-sub-name': { display: 'none' diff --git a/packages/extension-koni-ui/src/components/Modal/GlobalSearchTokenModal.tsx b/packages/extension-koni-ui/src/components/Modal/GlobalSearchTokenModal.tsx index bf4caf98ff..a4258d0891 100644 --- a/packages/extension-koni-ui/src/components/Modal/GlobalSearchTokenModal.tsx +++ b/packages/extension-koni-ui/src/components/Modal/GlobalSearchTokenModal.tsx @@ -60,6 +60,7 @@ function Component ({ className = '', id, onCancel, sortedTokenSlugs, tokenBalan return ( ('Token name')} @@ -109,7 +108,7 @@ function Component ({ className = '', id, onCancel, sortedTokenSlugs, tokenBalan ); } -export const GlobalSearchTokenModal = styled(Component)(({ theme: { token } }: Props) => { +export const GlobalSearchTokenModal = styled(Component)(({ theme: { extendToken, token } }: Props) => { return ({ '.ant-sw-modal-body': { paddingLeft: 0, @@ -122,12 +121,27 @@ export const GlobalSearchTokenModal = styled(Component)(({ theme: { token flex: 1 }, - '.ant-sw-list-search-input': { - paddingBottom: token.paddingXS + '.ant-sw-list-search-input.ant-sw-list-search-input': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS }, - '.ant-sw-list': { - paddingRight: token.padding + '.ant-sw-list-wrapper.ant-sw-list-wrapper': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS + }, + + '.ant-sw-list.ant-sw-list': { + backgroundColor: extendToken.colorBgSecondary1, + borderRadius: 24, + paddingTop: token.paddingXXS, + paddingBottom: token.paddingXXS, + paddingLeft: 0, + paddingRight: 0 + }, + + '.token-selector-item + .token-selector-item': { + marginTop: token.marginXXS } }); }); diff --git a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/ReceiveQrModal.tsx b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/ReceiveQrModal.tsx index 7bb298b514..62830ea2ef 100644 --- a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/ReceiveQrModal.tsx +++ b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/ReceiveQrModal.tsx @@ -144,6 +144,7 @@ const Component: React.FC = ({ address, className, selectedNetwork }: Pro /> } onClick={handleClickViewOnExplorer} + shape={'round'} >{t('View account on explorer')} @@ -197,7 +198,7 @@ const ReceiveQrModal = styled(Component)(({ theme: { token } }: Props) => '.ant-account-item-address': { fontSize: token.fontSize, lineHeight: token.lineHeight, - color: token.colorTextLight4, + color: token.colorTextDark3, fontWeight: token.bodyFontWeight, paddingRight: token.paddingXS } diff --git a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/SimpleQrModal.tsx b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/SimpleQrModal.tsx index 0754fd8120..72b58e3e96 100644 --- a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/SimpleQrModal.tsx +++ b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/SimpleQrModal.tsx @@ -116,7 +116,7 @@ const SimpleQrModal = styled(Component)(({ theme: { token } }: Props) => '.ant-account-item-address': { fontSize: token.fontSize, lineHeight: token.lineHeight, - color: token.colorTextLight4, + color: token.colorTextDark3, fontWeight: token.bodyFontWeight, paddingRight: token.paddingXS } diff --git a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/TokensSelectorModal.tsx b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/TokensSelectorModal.tsx index afc243915f..8f14123a55 100644 --- a/packages/extension-koni-ui/src/components/Modal/ReceiveModal/TokensSelectorModal.tsx +++ b/packages/extension-koni-ui/src/components/Modal/ReceiveModal/TokensSelectorModal.tsx @@ -105,14 +105,25 @@ function Component ({ address, className = '', items, onSelectItem }: Props): Re ); } -export const TokensSelectorModal = styled(Component)(({ theme: { token } }: Props) => { +export const TokensSelectorModal = styled(Component)(({ theme: { extendToken, token } }: Props) => { return ({ - '.ant-sw-modal-content': { - minHeight: 474 + '.ant-sw-list-search-input.ant-sw-list-search-input': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS }, - '.ant-sw-list-search-input': { - paddingBottom: token.paddingXS + '.ant-sw-list-wrapper.ant-sw-list-wrapper': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS + }, + + '.ant-sw-list.ant-sw-list': { + backgroundColor: extendToken.colorBgSecondary1, + borderRadius: 24, + paddingTop: token.paddingXXS, + paddingBottom: token.paddingXXS, + paddingLeft: 0, + paddingRight: 0 }, '.ant-sw-modal-body': { @@ -132,7 +143,7 @@ export const TokensSelectorModal = styled(Component)(({ theme: { token } }, '.token-selector-item + .token-selector-item': { - marginTop: token.marginXS + marginTop: token.marginXXS } }); }); diff --git a/packages/extension-koni-ui/src/components/TokenItem/TokenBalanceSelectionItem.tsx b/packages/extension-koni-ui/src/components/TokenItem/TokenBalanceSelectionItem.tsx index 99a63750ef..c9233c2994 100644 --- a/packages/extension-koni-ui/src/components/TokenItem/TokenBalanceSelectionItem.tsx +++ b/packages/extension-koni-ui/src/components/TokenItem/TokenBalanceSelectionItem.tsx @@ -189,12 +189,7 @@ export const TokenBalanceSelectionItem = styled(Component)(({ theme: { to width: 40, display: 'flex', justifyContent: 'center', - color: token.colorTextLight4 - }, - '.ant-balance-item-content:hover': { - '.__icon-wrapper': { - color: token.colorTextLight2 - } + color: token.colorTextDark2 } }); }); diff --git a/packages/webapp/public/assets/reset.css b/packages/webapp/public/assets/reset.css index 753c9674ae..8854ea08f7 100644 --- a/packages/webapp/public/assets/reset.css +++ b/packages/webapp/public/assets/reset.css @@ -635,7 +635,6 @@ div#popup-container { .ant-sw-modal .ant-sw-modal-content.ant-sw-modal-content { height: auto; - margin-top: 24px; max-height: 100%; } @@ -871,3 +870,14 @@ div.ant-notification-notice { min-width: 40px; height: 40px; } + +/* override */ + +.ant-network-item.ant-network-item { + background-color: transparent; +} + + +.ant-balance-item.ant-balance-item { + background-color: transparent +}