Merge pull request #44 from lidofinance/feature/si-756-fix-the-select…

…or-layout fix: rewards currency selector layout
lidofinance · Sep 7, 2023 · a889c99 · a889c99
2 parents 0184f1a + ed90d17
commit a889c99
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/features/rewards/components/CurrencySelector.tsx b/features/rewards/components/CurrencySelector.tsx
@@ -8,21 +8,30 @@ import { STORAGE_CURRENCY_KEY } from 'config';
 
 const StyledSelect = styled(Select)`
   height: 32px;
-  width: 70px;
+  width: 72px;
 
   border-radius: 6px;
 
-  & span {
-    padding: unset;
+  & > span {
+    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;
   }
 
   & input {
+    display: block;
     font-size: 12px;
     font-weight: 400;
+    vertical-align: middle;
+    line-height: 1em;
   }
 
-  & span:nth-of-type(2) {
-    padding-left: unset;
+  & span span {
+    padding-left: 0;
+  }
+`;
+
+const OptionStyled = styled(Option)`
+  span {
+    font-weight: 400;
   }
 `;
 
@@ -53,9 +62,9 @@ const CurrencySelector = ({ currency, onChange }: CurrencySelectorProps) => (
       variant="small"
     >
       {CURRENCIES.map((cur) => (
-        <Option key={cur.id} value={cur.id}>
+        <OptionStyled key={cur.id} value={cur.id}>
           {cur.code}
-        </Option>
+        </OptionStyled>
       ))}
     </StyledSelect>
   </Box>

diff --git a/features/rewards/components/export/Exportstyled.ts b/features/rewards/components/export/Exportstyled.ts
@@ -4,8 +4,7 @@ import { Button } from '@lidofinance/lido-ui';
 export const ButtonStyle = styled(Button)`
   font-weight: 400;
   height: 32px;
-
-  width: 83px;
   min-width: unset;
-  padding: unset;
+  padding: 0 15px;
+  font-size: 12px;
 `;