Merge pull request #197 from lidofinance/feature/zksync-banners

feat: add l2 banners
lidofinance · Jan 16, 2024 · 462d905 · 462d905
2 parents c91eb56 + 5750633
commit 462d905
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 80 deletions.
diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap.svg
diff --git a/assets/icons/l2-wsteth.svg b/assets/icons/l2-wsteth.svg
diff --git a/shared/banners/l2-banner/l2-banner.tsx b/shared/banners/l2-banner/l2-banner.tsx
@@ -4,11 +4,10 @@ import {
   Wrapper,
   L2Icons,
   TextWrap,
-  ButtonWrap,
   ButtonLinkWrap,
   ButtonStyle,
-  ContentWrap,
   TextHeader,
+  FooterWrap,
 } from './styles';
 
 type L2BannerProps = {
@@ -35,27 +34,21 @@ export const L2Banner = ({
   return (
     <Wrapper data-testid={testidWrap}>
       <ThemeProvider theme={themeDark}>
-        <ContentWrap>
-          <TextHeader>{title}</TextHeader>
-          <TextWrap>{text}</TextWrap>
-          <ButtonWrap>
-            <ButtonLinkWrap
-              href={buttonHref}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={onClickButton}
-            >
-              <ButtonStyle
-                data-testid={testidButton}
-                size="sm"
-                color="secondary"
-              >
-                {buttonText}
-              </ButtonStyle>
-            </ButtonLinkWrap>
-          </ButtonWrap>
-        </ContentWrap>
-        <L2Icons />
+        <TextHeader>{title}</TextHeader>
+        <TextWrap>{text}</TextWrap>
+        <FooterWrap>
+          <L2Icons />
+          <ButtonLinkWrap
+            href={buttonHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={onClickButton}
+          >
+            <ButtonStyle data-testid={testidButton} size="sm" color="primary">
+              {buttonText}
+            </ButtonStyle>
+          </ButtonLinkWrap>
+        </FooterWrap>
       </ThemeProvider>
     </Wrapper>
   );

diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts
@@ -5,14 +5,19 @@ import Icons from 'assets/icons/l2-swap.svg';
 export const Wrapper = styled.div`
   position: relative;
   display: flex;
+  flex-direction: column;
   text-align: left;
-  align-items: center;
   padding: ${({ theme }) => theme.spaceMap.lg}px;
   border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
-  gap: 20px;
+  gap: 10px;
   overflow: hidden;
   background-color: #07080c;
-  background: radial-gradient(120% 180% at 100% 100%, #62c4fb 0%, #112dbf 100%);
+  background: radial-gradient(
+    93.45% 103.1% at 6.55% 17.29%,
+    #3c64b6 0%,
+    #2e1d7b 55.75%,
+    #142698 100%
+  );
   box-sizing: border-box;
 
   ${({ theme }) => theme.mediaQueries.md} {
@@ -30,22 +35,21 @@ export const L2Icons = styled.img.attrs({
   src: Icons,
   alt: '',
 })`
-  position: relative;
   display: block;
-  width: 44px;
-  height: 120px;
+  width: 110px;
+  height: 32px;
 `;
 
-export const ContentWrap = styled.div`
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
+export const FooterWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 export const TextHeader = styled.div`
   margin-bottom: 4px;
   font-size: 14px;
-  line-height: 24px;
+  line-height: 16px;
   font-weight: 700;
   color: #fff;
 `;
@@ -59,11 +63,6 @@ export const TextWrap = styled.div`
   position: relative;
 `;
 
-export const ButtonWrap = styled.div`
-  display: flex;
-  margin-top: 12px;
-`;
-
 export const ButtonLinkWrap = styled.a`
   display: block;
 
@@ -77,12 +76,11 @@ export const ButtonLinkWrap = styled.a`
 `;
 
 export const ButtonStyle = styled(Button)`
-  background-color: #fff;
   padding: 7px 16px;
   font-size: 12px;
   line-height: 20px;
 
-  @media (max-width: 396px) {
+  ${({ theme }) => theme.mediaQueries.sm} {
     display: none;
   }
 `;
diff --git a/shared/banners/l2-low-fee/l2-low-fee.tsx b/shared/banners/l2-low-fee/l2-low-fee.tsx
@@ -19,8 +19,8 @@ export const L2LowFee: React.FC<L2LowFeeProps> = ({ token }) => {
   }, [isStETH]);
 
   const text = isStETH
-    ? 'Learn about Lido on L2 opportunities on Arbitrum, Optimism, and Base to enjoy reduced gas fees in DeFi'
-    : 'Bridge wstETH to Arbitrum, Optimism and Base to enjoy low gas fees and enhanced opportunities in DeFi';
+    ? 'Learn about Lido on L2 opportunities on Arbitrum, Optimism, Base and zkSync to enjoy reduced gas fees in DeFi'
+    : 'Bridge wstETH to Arbitrum, Optimism, Base and zkSync to enjoy low gas fees and enhanced opportunities in DeFi';
 
   return (
     <L2Banner

diff --git a/shared/banners/l2-wsteth/l2-wsteth.tsx b/shared/banners/l2-wsteth/l2-wsteth.tsx
@@ -5,6 +5,7 @@ import {
   LinkButton,
   TextContent,
   OverlayLink,
+  FooterWrapper,
 } from './styles';
 import { L2_DISCOVERY_LINK } from '../l2-banner';
 import { MATOMO_CLICK_EVENTS } from 'config';
@@ -23,19 +24,21 @@ export const L2Wsteth = ({ matomoEventLink }: L2WstethProps) => {
   );
   return (
     <Banner data-testid="L2wstETHbanner">
-      <L2Icons />
       <TextContent>
         Enjoy <b>lower gas</b> fees and <b>DeFi opportunities</b> using wstETH
-        across Arbitrum, Optimism and Base.
+        across Arbitrum, Optimism, Base and zkSync.
       </TextContent>
-      <OverlayLink
-        href={L2_DISCOVERY_LINK}
-        onClick={linkClickHandler}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <LinkButton>Learn More</LinkButton>
-      </OverlayLink>
+      <FooterWrapper>
+        <L2Icons />
+        <OverlayLink
+          href={L2_DISCOVERY_LINK}
+          onClick={linkClickHandler}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <LinkButton data-testid="l2WSstethlearnMore">Learn More</LinkButton>
+        </OverlayLink>
+      </FooterWrapper>
     </Banner>
   );
 };
diff --git a/shared/banners/l2-wsteth/styles.ts b/shared/banners/l2-wsteth/styles.ts
@@ -1,16 +1,16 @@
 import styled from 'styled-components';
 import { Button } from '@lidofinance/lido-ui';
-import Icons from 'assets/icons/l2-wsteth.svg';
+import Icons from 'assets/icons/l2-swap.svg';
 
 export const Banner = styled.div`
-  height: 112px;
   position: relative;
   display: flex;
+  flex-direction: column;
   text-align: left;
   align-items: center;
   padding: ${({ theme }) => theme.spaceMap.lg}px;
   border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
-  gap: 20px;
+  gap: 10px;
   overflow: hidden;
   background-color: #07080c;
   background: radial-gradient(
@@ -30,10 +30,9 @@ export const L2Icons = styled.img.attrs({
   src: Icons,
   alt: '',
 })`
-  position: relative;
   display: block;
-  width: 28px;
-  height: 72px;
+  width: 110px;
+  height: 32px;
 `;
 
 export const LinkButton = styled(Button)`
@@ -61,3 +60,10 @@ export const OverlayLink = styled.a`
 export const TextContent = styled.p`
   color: var(--lido-color-primaryContrast);
 `;
+
+export const FooterWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;