From 7db5d9ae4b89a2ea63647594f92e8f9fbaa8fa9d Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Fri, 22 Sep 2023 15:40:21 +0800
Subject: [PATCH 1/2] feat: clear address input

---
 src/ui/views/AddressManagement/SortInput.tsx | 3 ++-
 src/ui/views/AddressManagement/style.less    | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/ui/views/AddressManagement/SortInput.tsx b/src/ui/views/AddressManagement/SortInput.tsx
index 56067fa8e78..ac0a86bea1e 100644
--- a/src/ui/views/AddressManagement/SortInput.tsx
+++ b/src/ui/views/AddressManagement/SortInput.tsx
@@ -10,6 +10,7 @@ import { ReactComponent as IconSortByUsd } from '@/ui/assets/address/sort-by-usd
 import { ReactComponent as IconSortByType } from '@/ui/assets/address/sort-by-type.svg';
 import { ReactComponent as IconSortByAlphabet } from '@/ui/assets/address/sort-by-alphabet.svg';
 import { AddressSortStore } from '@/background/service/preference';
+import clsx from 'clsx';
 
 export const AddressSortIconMapping: Record<
   AddressSortStore['sortType'],
@@ -40,7 +41,7 @@ export const SortInput = ({
 
   return (
     <>
-      <div className="sort-input">
+      <div className={clsx('sort-input', value && 'searching')}>
         <div className="sort" onClick={turnOn}>
           {/* <img className="w-16 h-16" src={AddressSortIconMapping[sortType]} /> */}
           {SortIcon}
diff --git a/src/ui/views/AddressManagement/style.less b/src/ui/views/AddressManagement/style.less
index df687df7fcd..12b4aaa2aa6 100644
--- a/src/ui/views/AddressManagement/style.less
+++ b/src/ui/views/AddressManagement/style.less
@@ -302,6 +302,13 @@
   transition: width 0.3s;
   padding-right: 4px;
 
+  &.searching {
+    width: 220px;
+    .search-input .ant-input-suffix {
+      opacity: 1;
+    }
+  }
+
   &:has(> .search-input:hover),
   &:has(> .search-input.ant-input-affix-wrapper-focused) {
     width: 220px;

From 03ae125f7fbbd07bb9c941520aab61640136bb93 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Fri, 22 Sep 2023 17:30:00 +0800
Subject: [PATCH 2/2] style tuning

---
 src/ui/component/ChainSelector/Modal.tsx             | 1 +
 src/ui/views/Dashboard/components/Settings/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/component/ChainSelector/Modal.tsx b/src/ui/component/ChainSelector/Modal.tsx
index 6be03434dbf..c0206b61bfa 100644
--- a/src/ui/component/ChainSelector/Modal.tsx
+++ b/src/ui/component/ChainSelector/Modal.tsx
@@ -178,6 +178,7 @@ const ChainSelectorModal = ({
       visible={visible}
       onClose={handleCancel}
       className={clsx(
+        'custom-popup',
         'chain-selector__modal',
         connection && 'connection',
         className
diff --git a/src/ui/views/Dashboard/components/Settings/index.tsx b/src/ui/views/Dashboard/components/Settings/index.tsx
index 90ff5292b72..a3eea8b740a 100644
--- a/src/ui/views/Dashboard/components/Settings/index.tsx
+++ b/src/ui/views/Dashboard/components/Settings/index.tsx
@@ -1080,7 +1080,7 @@ const Settings = (props: SettingsProps) => {
     <Popup
       visible={visible}
       onClose={onClose}
-      height={523}
+      height={488}
       bodyStyle={{ height: '100%', padding: '20px 20px 0 20px' }}
       destroyOnClose
     >