style: address item

darwinia-network · Feb 22, 2022 · a797434 · a797434
1 parent 4dd10e5
commit a797434
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import { ActiveAccount } from './components/widget/account/ActiveAccount';
 import { Connection } from './components/widget/Connection';
 import { Language } from './components/widget/Language';
 import { getActiveNav, SideNav } from './components/widget/SideNav';
+import { toggleTheme } from './components/widget/ThemeSwitch';
 import { THEME } from './config';
 import { routes } from './config/routes';
 import { useApi } from './hooks';
@@ -82,6 +83,8 @@ function IntroGuide() {
     } else {
       setStepsEnabled(true);
     }
+
+    toggleTheme(THEME.LIGHT);
   }, []);
 
   return (

diff --git a/src/components/widget/form-control/AddressItem.tsx b/src/components/widget/form-control/AddressItem.tsx
@@ -1,4 +1,4 @@
-import { Form, InputProps, Select } from 'antd';
+import { AutoComplete, Form, InputProps, Select } from 'antd';
 import { isString, upperFirst } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useAccount, useApi } from '../../../hooks';
@@ -40,13 +40,23 @@ export function AddressItem({ label, disabled, rules = [], ...rest }: CustomForm
         ...rules,
       ]}
     >
-      <Select placeholder={t('Enter or select one from these below')} disabled={disabled} size="large" showSearch>
-        {accounts.map((item) => (
-          <Select.Option value={item.address} key={item.address}>
-            <IdentAccountAddress account={item} />
-          </Select.Option>
-        ))}
-      </Select>
+      {disabled ? (
+        <Select placeholder={t('Select one from these below')} size="large" showSearch className="flex-1" disabled>
+          {accounts.map((item) => (
+            <Select.Option value={item.address} key={item.address}>
+              <IdentAccountAddress account={item} />
+            </Select.Option>
+          ))}
+        </Select>
+      ) : (
+        <AutoComplete placeholder={t('Enter or select one from these below')} size="large" className="flex-1">
+          {accounts.map((item) => (
+            <AutoComplete.Option value={item.address} key={item.address}>
+              <IdentAccountAddress account={item} />
+            </AutoComplete.Option>
+          ))}
+        </AutoComplete>
+      )}
     </Form.Item>
   );
 }