diff --git a/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModal.tsx b/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModal.tsx index b2dd631e1bd..6242984d6b3 100644 --- a/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModal.tsx +++ b/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModal.tsx @@ -40,26 +40,28 @@ function Component ({ className = '' }: Props): React.ReactElement { >
{t('Balance')}
- - } - name={t('Show zero balance')} - rightItem={ - } - /> +
+ + } + name={t('Show zero balance')} + rightItem={ + } + /> +
{t('Networks')}
@@ -86,18 +88,18 @@ export const CustomizeModal = styled(Component)(({ theme: { token } }: Pr }, '.__group-label': { - paddingLeft: token.padding, - paddingRight: token.padding, - color: token.colorTextDark3, - textTransform: 'uppercase', - fontSize: token.fontSizeSM, - lineHeight: token.lineHeightSM, + paddingLeft: 20, + paddingRight: 20, + fontWeight: token.headingFontWeight, + color: token.colorTextDark1, + fontSize: token.fontSizeLG, + lineHeight: token.lineHeightLG, marginBottom: token.marginXS }, '.__group-content': { - paddingLeft: token.padding, - paddingRight: token.padding, + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS, marginBottom: token.marginXS }, diff --git a/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModalContent.tsx b/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModalContent.tsx index d59d1aebcee..e4b317bf89e 100644 --- a/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModalContent.tsx +++ b/packages/extension-koni-ui/src/components/Modal/Customize/CustomizeModalContent.tsx @@ -50,12 +50,10 @@ const Component: React.FC = (props: Props) => { ('Network name')} @@ -63,10 +61,12 @@ const Component: React.FC = (props: Props) => { ); }; -const CustomizeModalContent = styled(Component)(({ theme: { token } }: Props) => { +const CustomizeModalContent = styled(Component)(({ theme: { extendToken, token } }: Props) => { return { '.ant-sw-list-search-input': { - paddingBottom: token.paddingXS + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS, + paddingBottom: token.padding }, '.ant-network-item-content': { @@ -81,6 +81,21 @@ const CustomizeModalContent = styled(Component)(({ theme: { token } }: Pr paddingRight: token.paddingXS }, + '.network_item__container + .network_item__container': { + marginTop: token.marginXXS + }, + + '.ant-sw-list-wrapper': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS + }, + + '.ant-sw-list': { + backgroundColor: extendToken.colorBgSecondary1, + padding: token.paddingXS, + borderRadius: 20 + }, + '.manage_chain__empty_container': { marginTop: 20, display: 'flex',