From 4ae92f0e28c1809697600dd2b2d6711d4e40e8d8 Mon Sep 17 00:00:00 2001
From: lw <linhtm@cdmteck.com>
Date: Wed, 29 May 2024 16:01:25 +0700
Subject: [PATCH] [UI] Update style for ServiceSelector

---
 .../src/Popup/Settings/GeneralSetting.tsx     |  7 +---
 .../Field/BuyTokens/ServiceSelector.tsx       | 40 +++++++++++++++----
 .../src/components/Field/ProviderSelector.tsx |  5 +--
 .../components/Field/TokenTypeSelector.tsx    |  7 +---
 4 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx b/packages/extension-koni-ui/src/Popup/Settings/GeneralSetting.tsx
index ff50fa9753..63cbf27446 100644
--- 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
index 6bb0ad4d31..acc590ca22 100644
--- 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
index 8b10f0458b..071c10bd93 100644
--- 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
index 70189e7984..af85b6b008 100644
--- 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': {