feat: better styling

novasamatech · Nov 22, 2024 · 4db0e7c · 4db0e7c
1 parent 8365ade
commit 4db0e7c
Showing 1 changed file with 17 additions and 18 deletions.
diff --git a/src/renderer/pages/Staking/ui/NetworkInfo.tsx b/src/renderer/pages/Staking/ui/NetworkInfo.tsx
@@ -7,7 +7,7 @@ import { useI18n } from '@/shared/i18n';
 import { useToggle } from '@/shared/lib/hooks';
 import { getRelaychainAsset, nullable } from '@/shared/lib/utils';
 import { FootnoteText, IconButton, Plate } from '@/shared/ui';
-import { Field, Select, Skeleton } from '@/shared/ui-kit';
+import { Select, Skeleton } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
 import { ChainTitle } from '@/entities/chain';
 import { networkModel } from '@/entities/network';
@@ -58,23 +58,22 @@ export const NetworkInfo = ({
 
   return (
     <Plate className="flex w-full flex-col gap-y-3">
-      <div className="grid grid-cols-[178px,repeat(2,122px),28px] items-center gap-x-6">
+      <div className="grid grid-cols-[178px,repeat(2,122px),28px] items-start gap-x-6">
         <div className="flex flex-col gap-y-2">
-          <Field text={t('staking.overview.networkLabel')}>
-            <Select
-              placeholder={t('staking.overview.networkPlaceholder')}
-              value={chain?.chainId}
-              onChange={onNetworkChange}
-            >
-              {Object.values(chains)
-                .filter(({ assets }) => getRelaychainAsset(assets))
-                .map((chain) => (
-                  <Select.Item key={chain.chainId} value={chain.chainId}>
-                    <ChainTitle className="overflow-hidden" fontClass="text-text-primary truncate" chain={chain} />
-                  </Select.Item>
-                ))}
-            </Select>
-          </Field>
+          <FootnoteText className="text-text-secondary">{t('staking.overview.networkLabel')}</FootnoteText>
+          <Select
+            placeholder={t('staking.overview.networkPlaceholder')}
+            value={chain?.chainId}
+            onChange={onNetworkChange}
+          >
+            {Object.values(chains)
+              .filter(({ assets }) => getRelaychainAsset(assets))
+              .map((chain) => (
+                <Select.Item key={chain.chainId} value={chain.chainId}>
+                  <ChainTitle className="overflow-hidden" fontClass="text-text-primary truncate" chain={chain} />
+                </Select.Item>
+              ))}
+          </Select>
         </div>
         {totalInfo.map(({ isLoading, title, amount, asset }) =>
           isLoading || nullable(asset) ? (
@@ -91,7 +90,7 @@ export const NetworkInfo = ({
             </div>
           ),
         )}
-        <IconButton name={isChildrenShown ? 'up' : 'down'} onClick={toggleChildren} />
+        <IconButton className="self-center" name={isChildrenShown ? 'up' : 'down'} onClick={toggleChildren} />
       </div>
 
       {isChildrenShown && (