fix: dex icon styles

lidofinance · Jul 11, 2024 · 46e36c6 · 46e36c6
1 parent 8ca6ef9
commit 46e36c6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/features/withdrawals/request/form/options/dex-options/styles.ts b/features/withdrawals/request/form/options/dex-options/styles.ts
@@ -59,9 +59,7 @@ export const DexOptionStyled = styled.div<{ $loading?: boolean }>`
 
   min-height: var(--itemHeight);
   max-height: var(--itemHeight);
-  // we need to update lido ui
-  background-color: ${({ theme }) =>
-    theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'};
+  background-color: var(--custom-background-secondary);
   border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
   padding: 16px 20px;
 
@@ -131,9 +129,7 @@ export const DexWarning = styled.div`
   padding: ${({ theme }) => theme.spaceMap.md}px;
   font-weight: 400;
   font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
-  // we need to update lido ui
-  background-color: ${({ theme }) =>
-    theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'};
+  background-color: var(--custom-background-secondary);
   border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
 
   svg {

diff --git a/features/withdrawals/request/form/options/styles.tsx b/features/withdrawals/request/form/options/styles.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { InlineLoader, ThemeName } from '@lidofinance/lido-ui';
+import { InlineLoader } from '@lidofinance/lido-ui';
 import { FormatToken } from 'shared/formatters';
 
 import Lido from 'assets/icons/lido.svg';
@@ -27,9 +27,8 @@ export const InlineLoaderSmall = styled(InlineLoader)`
 export const LidoOptionContainer = styled.div`
   width: 100%;
   min-height: 82px;
-  // we need to update lido ui
-  background-color: ${({ theme }) =>
-    theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'};
+
+  background-color: var(--custom-background-secondary);
   border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
 
   padding: 16px 20px;
@@ -81,9 +80,8 @@ export const OptionsPickerButton = styled.button<{ $active?: boolean }>`
   gap: 4px;
   position: relative;
   cursor: pointer;
-  // we need to update lido ui
-  background-color: ${({ theme }) =>
-    theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'};
+
+  background-color: var(--custom-background-secondary);
 
   border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
   border: ${({ $active }) => ($active ? '2' : '1')}px solid
@@ -167,21 +165,12 @@ export const OptionsPickerIcons = styled.div`
     height: 20px;
     border-radius: 100%;
     border: 1px solid;
-    border-color: ${({ theme }) =>
-      theme.name === ThemeName.light
-        ? 'var(--lido-color-backgroundSecondary)'
-        : '#F6F8FA'};
-    background-color: ${({ theme }) =>
-      theme.name === ThemeName.light
-        ? 'var(--lido-color-backgroundSecondary)'
-        : '#F6F8FA'};
+    /* match background on light but light up on dark theme */
+    border-color: var(--custom-background-secondary-light);
+    background-color: var(--custom-background-secondary-light);
     margin: -1px 0 -1px -8px;
     &:first-child {
       margin-left: 0px;
     }
-    filter: ${({ theme }) =>
-      theme.name === ThemeName.light
-        ? 'drop-shadow(0px 0px 1px rgba(246, 248, 250, 255))'
-        : 'unset'};
   }
 `;
diff --git a/styles/global.ts b/styles/global.ts
@@ -1,6 +1,7 @@
 import { createGlobalStyle } from 'styled-components';
 
 import { NAV_MOBILE_HEIGHT, NAV_MOBILE_MAX_WIDTH } from './constants';
+import { ThemeName } from '@lidofinance/lido-ui';
 
 export const devicesHeaderMedia = {
   mobile: `screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`,
@@ -22,6 +23,10 @@ const GlobalStyle = createGlobalStyle`
     --footer-mobile-padding-x: 20px;
     --footer-mobile-padding-y: 18px;
     --footer-mobile-margin-bottom: 60px;
+
+    --custom-background-secondary-light: #F6F8FA;
+    --custom-background-secondary-dark: #2D2D35;
+    --custom-background-secondary: ${({ theme }) => (theme.name === ThemeName.light ? 'var(--custom-background-secondary-light)' : 'var(--custom-background-secondary-dark)')} ;
   }
   * {
     margin: 0;