Merge pull request #89 from lidofinance/fix/fix_button_color

fix: fix button color
lidofinance · Oct 13, 2023 · 5135ed7 · 5135ed7
2 parents 83a1eb4 + 4487199
commit 5135ed7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 29 deletions.
diff --git a/shared/banners/l2-low-fee/l2-low-fee.tsx b/shared/banners/l2-low-fee/l2-low-fee.tsx
@@ -1,4 +1,5 @@
 import { FC, useCallback } from 'react';
+import { ThemeProvider, themeDark } from '@lidofinance/lido-ui';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 import { MATOMO_CLICK_EVENTS } from 'config';
 
@@ -39,20 +40,22 @@ export const L2LowFee: FC<L2LowFeeProps> = ({ token }) => {
 
   return (
     <Wrapper data-testid="l2LowFeeBanner">
-      <ContentWrap>
-        <TextWrap>
-          <TextHeader>Unlock Low-Fee transactions on L2</TextHeader>
-          {text}
-        </TextWrap>
-        <ButtonWrap>
-          <ButtonLinkWrap {...linkProps} onClick={linkClickHandler}>
-            <ButtonStyle data-testid="l2LowFee" size="sm" color="secondary">
-              Learn more
-            </ButtonStyle>
-          </ButtonLinkWrap>
-        </ButtonWrap>
-      </ContentWrap>
-      <L2Icons />
+      <ThemeProvider theme={themeDark}>
+        <ContentWrap>
+          <TextWrap>
+            <TextHeader>Unlock Low-Fee transactions on L2</TextHeader>
+            {text}
+          </TextWrap>
+          <ButtonWrap>
+            <ButtonLinkWrap {...linkProps} onClick={linkClickHandler}>
+              <ButtonStyle data-testid="l2LowFee" size="sm" color="secondary">
+                Learn more
+              </ButtonStyle>
+            </ButtonLinkWrap>
+          </ButtonWrap>
+        </ContentWrap>
+        <L2Icons />
+      </ThemeProvider>
     </Wrapper>
   );
 };
diff --git a/shared/banners/l2-swap/l2-swap.tsx b/shared/banners/l2-swap/l2-swap.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { ThemeProvider, themeDark } from '@lidofinance/lido-ui';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 import { MATOMO_CLICK_EVENTS } from 'config';
 
@@ -26,21 +27,23 @@ export const L2Swap: FC = () => {
 
   return (
     <Wrapper data-testid="l2SwapBanner">
-      <ContentWrap>
-        <TextWrap>
-          <TextHeader>Swap ETH to wstETH on L2</TextHeader>
-          Swap ETH to wstETH directly on L2 and use wstETH in DeFi enjoying low
-          gas fees opportunities
-        </TextWrap>
-        <ButtonWrap>
-          <ButtonLinkWrap {...linkProps} onClick={linkClickHandler}>
-            <ButtonStyle data-testid="l2Swap" size="sm" color="secondary">
-              Swap
-            </ButtonStyle>
-          </ButtonLinkWrap>
-        </ButtonWrap>
-      </ContentWrap>
-      <L2Icons />
+      <ThemeProvider theme={themeDark}>
+        <ContentWrap>
+          <TextWrap>
+            <TextHeader>Swap ETH to wstETH on L2</TextHeader>
+            Swap ETH to wstETH directly on L2 and use wstETH in DeFi enjoying
+            low gas fees opportunities
+          </TextWrap>
+          <ButtonWrap>
+            <ButtonLinkWrap {...linkProps} onClick={linkClickHandler}>
+              <ButtonStyle data-testid="l2Swap" size="sm" color="secondary">
+                Swap
+              </ButtonStyle>
+            </ButtonLinkWrap>
+          </ButtonWrap>
+        </ContentWrap>
+        <L2Icons />
+      </ThemeProvider>
     </Wrapper>
   );
 };