fix: search width (#2876)

novasamatech · Dec 19, 2024 · 652e683 · 652e683
1 parent b5921a2
commit 652e683
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 39 deletions.
diff --git a/src/renderer/features/assets/AssetsSearch/ui/AssetsSearch.tsx b/src/renderer/features/assets/AssetsSearch/ui/AssetsSearch.tsx
@@ -1,7 +1,7 @@
 import { useUnit } from 'effector-react';
 
 import { useI18n } from '@/shared/i18n';
-import { Box, SearchInput } from '@/shared/ui-kit';
+import { SearchInput } from '@/shared/ui-kit';
 import { assetsSearchModel } from '../model/assets-search-model';
 
 export const AssetsSearch = () => {
@@ -10,12 +10,10 @@ export const AssetsSearch = () => {
   const query = useUnit(assetsSearchModel.$query);
 
   return (
-    <Box width="280px">
-      <SearchInput
-        value={query}
-        placeholder={t('balances.searchPlaceholder')}
-        onChange={assetsSearchModel.events.queryChanged}
-      />
-    </Box>
+    <SearchInput
+      value={query}
+      placeholder={t('balances.searchPlaceholder')}
+      onChange={assetsSearchModel.events.queryChanged}
+    />
   );
 };
diff --git a/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx b/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx
@@ -3,8 +3,8 @@ import { memo } from 'react';
 
 import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
-import { FootnoteText, IconButton, Select, Switch } from '@/shared/ui';
-import { Box, Popover } from '@/shared/ui-kit';
+import { FootnoteText, IconButton, Switch } from '@/shared/ui';
+import { Box, Field, Popover, Select } from '@/shared/ui-kit';
 import { AssetsListView } from '@/entities/asset';
 import { assetsSettingsModel } from '../model/assets-settings-modal';
 
@@ -14,19 +14,6 @@ export const AssetsSettings = memo(() => {
   const assetsView = useUnit(assetsSettingsModel.$assetsView);
   const hideZeroBalances = useUnit(assetsSettingsModel.$hideZeroBalances);
 
-  const options = [
-    {
-      id: AssetsListView.TOKEN_CENTRIC.toString(),
-      value: AssetsListView.TOKEN_CENTRIC,
-      element: <FootnoteText>{t('balances.tokenCentric')}</FootnoteText>,
-    },
-    {
-      id: AssetsListView.CHAIN_CENTRIC.toString(),
-      value: AssetsListView.CHAIN_CENTRIC,
-      element: <FootnoteText>{t('balances.chainCentric')}</FootnoteText>,
-    },
-  ];
-
   return (
     <Popover align="end">
       <Popover.Trigger>
@@ -48,13 +35,20 @@ export const AssetsSettings = memo(() => {
             {t('balances.hideZeroBalancesLabel')}
           </Switch>
           <hr className="-mx-3 my-4 border-divider" />
-          <Select
-            label={t('balances.pageView')}
-            selectedId={assetsView.toString()}
-            placeholder={t('settings.networks.selectorPlaceholder')}
-            options={options}
-            onChange={({ value }) => assetsSettingsModel.events.assetsViewChanged(value)}
-          />
+          <Field text={t('balances.pageView')}>
+            <Select
+              placeholder={t('settings.networks.selectorPlaceholder')}
+              value={assetsView.toString()}
+              onChange={(value) => assetsSettingsModel.events.assetsViewChanged(Number(value))}
+            >
+              <Select.Item value={AssetsListView.TOKEN_CENTRIC.toString()}>
+                <FootnoteText>{t('balances.tokenCentric')}</FootnoteText>
+              </Select.Item>
+              <Select.Item value={AssetsListView.CHAIN_CENTRIC.toString()}>
+                <FootnoteText>{t('balances.chainCentric')}</FootnoteText>
+              </Select.Item>
+            </Select>
+          </Field>
         </Box>
       </Popover.Content>
     </Popover>

diff --git a/src/renderer/features/contacts/ContactFilter/ui/ContactFilter.tsx b/src/renderer/features/contacts/ContactFilter/ui/ContactFilter.tsx
@@ -2,7 +2,7 @@ import { useUnit } from 'effector-react';
 import { useEffect } from 'react';
 
 import { useI18n } from '@/shared/i18n';
-import { Box, SearchInput } from '@/shared/ui-kit';
+import { SearchInput } from '@/shared/ui-kit';
 import { filterModel } from '../model/contact-filter';
 
 export const ContactFilter = () => {
@@ -15,12 +15,10 @@ export const ContactFilter = () => {
   }, []);
 
   return (
-    <Box width="280px">
-      <SearchInput
-        value={query}
-        placeholder={t('addressBook.searchPlaceholder')}
-        onChange={filterModel.events.queryChanged}
-      />
-    </Box>
+    <SearchInput
+      value={query}
+      placeholder={t('addressBook.searchPlaceholder')}
+      onChange={filterModel.events.queryChanged}
+    />
   );
 };
diff --git a/src/renderer/pages/Governance/ui/Governance.tsx b/src/renderer/pages/Governance/ui/Governance.tsx
@@ -67,7 +67,9 @@ export const Governance = () => {
   return (
     <div className="flex h-full flex-col">
       <Header title={t('governance.title')} titleClass="py-[3px]" headerClass="pt-4 pb-[15px]">
-        <Search />
+        <Box width="230px">
+          <Search />
+        </Box>
       </Header>
 
       <ScrollArea>