[UI] Update style for ServiceSelector

Koniverse · May 29, 2024 · 4ae92f0 · 4ae92f0
1 parent d38d257
commit 4ae92f0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx b/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx
@@ -284,11 +284,8 @@ export const GeneralSetting = styled(Component)<Props>(({ theme: { extendToken,
 
       '.ant-sw-list': {
         borderRadius: 20,
-        backgroundColor: token.colorWhite,
-        paddingTop: token.paddingXS,
-        paddingRight: token.paddingXS,
-        paddingLeft: token.paddingXS,
-        paddingBottom: token.paddingXXS
+        backgroundColor: extendToken.colorBgSecondary1,
+        padding: token.paddingXS
       },
 
       '.ant-setting-item': {

diff --git a/packages/extension-koni-ui/src/components/Field/BuyTokens/ServiceSelector.tsx b/packages/extension-koni-ui/src/components/Field/BuyTokens/ServiceSelector.tsx
@@ -117,19 +117,44 @@ const Component = (props: Props, ref: ForwardedRef<InputRef>): React.ReactElemen
   );
 };
 
-export const ServiceSelector = styled(forwardRef(Component))<Props>(({ theme: { token } }: Props) => {
+export const ServiceSelector = styled(forwardRef(Component))<Props>(({ theme: { extendToken, token } }: Props) => {
   return ({
     '&.service-selector-modal': {
+      '.ant-sw-list': {
+        borderRadius: 20,
+        backgroundColor: extendToken.colorBgSecondary1,
+        padding: token.paddingXS
+      },
+
+      '.ant-select-modal-item.ant-select-modal-item': {
+        marginBottom: 0
+      },
+
+      '.ant-sw-list-section .ant-sw-list-wrapper': {
+        flexBasis: 'auto',
+        paddingRight: token.paddingXS,
+        paddingLeft: token.paddingXS
+      },
+
+      '.ant-web3-block.ant-web3-block': {
+        backgroundColor: 'transparent',
+        borderRadius: 40
+      },
+
+      '.ant-web3-block.ant-web3-block:hover': {
+        backgroundColor: token.colorBgSecondary
+      },
+
+      '.ant-select-modal-item + .ant-select-modal-item': {
+        marginTop: token.marginXXS
+      },
+
       '.__option-item': {
         padding: 0,
         paddingLeft: token.sizeSM,
         paddingRight: token.sizeXXS,
         minHeight: 52,
-        borderRadius: token.borderRadiusLG,
-
-        '&:not(:hover)': {
-          backgroundColor: token.colorBgSecondary
-        }
+        borderRadius: token.borderRadiusLG
       },
 
       '.disabled': {
@@ -157,10 +182,11 @@ export const ServiceSelector = styled(forwardRef(Component))<Props>(({ theme: {
     '&.service-selector-input': {
       '.__selected-item': {
         display: 'flex',
-        color: token.colorTextLight1,
+        color: token.colorTextDark1,
         whiteSpace: 'nowrap',
         overflow: 'hidden'
       },
+
       '.__selected-item-name': {
         textOverflow: 'ellipsis',
         fontWeight: token.headingFontWeight,

diff --git a/packages/extension-koni-ui/src/components/Field/ProviderSelector.tsx b/packages/extension-koni-ui/src/components/Field/ProviderSelector.tsx
@@ -166,10 +166,7 @@ export const ProviderSelector = styled(forwardRef(Component))<Props>(({ theme: {
       '.ant-sw-list': {
         borderRadius: 20,
         backgroundColor: extendToken.colorBgSecondary1,
-        paddingTop: token.paddingXS,
-        paddingRight: token.paddingXS,
-        paddingLeft: token.paddingXS,
-        paddingBottom: token.paddingXXS
+        padding: token.paddingXS
       },
 
       '.ant-setting-item': {

diff --git a/packages/extension-koni-ui/src/components/Field/TokenTypeSelector.tsx b/packages/extension-koni-ui/src/components/Field/TokenTypeSelector.tsx
@@ -119,11 +119,8 @@ export const TokenTypeSelector = styled(forwardRef(Component))<Props>(({ theme:
 
       '.ant-sw-list': {
         borderRadius: 20,
-        backgroundColor: token.colorWhite,
-        paddingTop: token.paddingXS,
-        paddingRight: token.paddingXS,
-        paddingLeft: token.paddingXS,
-        paddingBottom: token.paddingXXS
+        backgroundColor: extendToken.colorBgSecondary1,
+        padding: token.paddingXS
       },
 
       '.ant-setting-item': {