From ec8a847d9667ca379a7b3393e50fe17c44185286 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Thu, 26 Dec 2024 15:19:58 +0800
Subject: [PATCH] style tuning

---
 src/ui/component/ChainIcon.tsx                | 12 +++-------
 src/ui/component/ChainSelector/InForm.tsx     | 22 +++++++++++--------
 src/ui/component/TokenSelector/index.tsx      |  4 ++--
 src/ui/views/Bridge/Component/BridgeToken.tsx |  2 +-
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/ui/component/ChainIcon.tsx b/src/ui/component/ChainIcon.tsx
index 7473b2a2a8c..c445905f922 100644
--- a/src/ui/component/ChainIcon.tsx
+++ b/src/ui/component/ChainIcon.tsx
@@ -21,10 +21,6 @@ const ChainIconEle = styled.img`
     width: 20px;
     height: 20px;
   }
-  &.mini {
-    width: 18px;
-    height: 18px;
-  }
 `;
 
 const AvaliableIcon = styled.div`
@@ -37,8 +33,7 @@ const AvaliableIcon = styled.div`
   background: #27c193;
   border-radius: 100%;
   overflow: hidden;
-  &.small,
-  &.mini {
+  &.small {
     width: 8px;
     height: 8px;
   }
@@ -54,8 +49,7 @@ const UnavaliableIcon = styled.div`
   background: #ec5151;
   border-radius: 100%;
   overflow: hidden;
-  &.small,
-  &.mini {
+  &.small {
     width: 8px;
     height: 8px;
   }
@@ -94,7 +88,7 @@ const TooltipContent = styled.div`
 interface Props {
   chain: CHAINS_ENUM;
   customRPC?: string | undefined;
-  size?: 'normal' | 'small' | 'mini';
+  size?: 'normal' | 'small';
   showCustomRPCToolTip?: boolean;
   nonce?: number;
   innerClassName?: string;
diff --git a/src/ui/component/ChainSelector/InForm.tsx b/src/ui/component/ChainSelector/InForm.tsx
index fa314f9b837..2903282f4e6 100644
--- a/src/ui/component/ChainSelector/InForm.tsx
+++ b/src/ui/component/ChainSelector/InForm.tsx
@@ -25,7 +25,7 @@ const ChainWrapper = styled.div`
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
-  &.mini {
+  &.bridge {
     width: auto;
     height: 28px;
     font-size: 13px;
@@ -98,14 +98,14 @@ export const ChainRender = ({
   readonly,
   className,
   arrowDownComponent,
-  mini,
+  bridge,
   swap,
   ...other
 }: {
   chain?: CHAINS_ENUM;
   readonly: boolean;
   arrowDownComponent?: React.ReactNode;
-  mini?: boolean;
+  bridge?: boolean;
   swap?: boolean;
 } & InsHTMLAttributes<HTMLDivElement>) => {
   const wallet = useWallet();
@@ -131,7 +131,7 @@ export const ChainRender = ({
       className={clsx(
         {
           'cursor-default hover:bg-r-neutral-bg-2': readonly,
-          mini,
+          bridge,
           swap,
         },
         className
@@ -143,10 +143,14 @@ export const ChainRender = ({
         <ChainIcon
           chain={chain}
           customRPC={customRPC}
-          size={swap ? 'mini' : 'small'}
+          size={'small'}
+          innerClassName={clsx(
+            bridge && 'w-[16px] h-[16px]',
+            swap && 'w-[18px] h-[18px]'
+          )}
           showCustomRPCToolTip
           tooltipProps={{
-            visible: swap || mini ? false : undefined,
+            visible: swap || bridge ? false : undefined,
           }}
         />
       )}
@@ -175,7 +179,7 @@ interface ChainSelectorProps {
   title?: React.ReactNode;
   chainRenderClassName?: string;
   arrowDownComponent?: React.ReactNode;
-  mini?: boolean;
+  bridge?: boolean;
   hideTestnetTab?: boolean;
   excludeChains?: CHAINS_ENUM[];
   drawerHeight?: number;
@@ -192,7 +196,7 @@ export default function ChainSelectorInForm({
   supportChains,
   chainRenderClassName,
   arrowDownComponent,
-  mini,
+  bridge,
   hideTestnetTab = false,
   excludeChains,
   drawerHeight,
@@ -225,7 +229,7 @@ export default function ChainSelectorInForm({
         readonly={readonly}
         className={chainRenderClassName}
         arrowDownComponent={arrowDownComponent}
-        mini={mini}
+        bridge={bridge}
         swap={swap}
       />
       {!readonly && (
diff --git a/src/ui/component/TokenSelector/index.tsx b/src/ui/component/TokenSelector/index.tsx
index 775fa4218e2..e227171149a 100644
--- a/src/ui/component/TokenSelector/index.tsx
+++ b/src/ui/component/TokenSelector/index.tsx
@@ -368,7 +368,7 @@ const TokenSelector = ({
       <div className="filters-wrapper">
         {chainItem && !['swapTo', 'bridgeFrom'].includes(type) && (
           <>
-            <div className="filter-item__chain px-10 group">
+            <div className="filter-item__chain px-10">
               <img
                 className="filter-item__chain-logo"
                 src={chainItem.logo}
@@ -388,7 +388,7 @@ const TokenSelector = ({
               >
                 <RcIconChainFilterCloseCC
                   viewBox="0 0 16 16"
-                  className="filter-item__chain-close w-[16px] h-[16px] ml-[2px] text-r-neutral-body group-hover:text-r-red-default"
+                  className="filter-item__chain-close w-[16px] h-[16px] ml-[2px] text-r-neutral-body hover:text-r-red-default"
                 />
               </div>
             </div>
diff --git a/src/ui/views/Bridge/Component/BridgeToken.tsx b/src/ui/views/Bridge/Component/BridgeToken.tsx
index 8b9024afa79..02247ee9645 100644
--- a/src/ui/views/Bridge/Component/BridgeToken.tsx
+++ b/src/ui/views/Bridge/Component/BridgeToken.tsx
@@ -256,7 +256,7 @@ export const BridgeToken = ({
       >
         <span className="text-12 text-r-neutral-body">{name}</span>
         <ChainSelectorInForm
-          mini
+          bridge
           hideTestnetTab
           value={chain}
           onChange={changeChain}