From 5750633acda413b411e1fc9af21b1a33e9c902b6 Mon Sep 17 00:00:00 2001 From: DiRaiks Date: Tue, 9 Jan 2024 12:40:55 +0700 Subject: [PATCH] feat: add zksync banners --- assets/icons/l2-swap.svg | 2 +- assets/icons/l2-wsteth.svg | 20 ------------ shared/banners/l2-banner/l2-banner.tsx | 39 ++++++++++-------------- shared/banners/l2-banner/styles.ts | 34 ++++++++++----------- shared/banners/l2-low-fee/l2-low-fee.tsx | 4 +-- shared/banners/l2-wsteth/l2-wsteth.tsx | 23 ++++++++------ shared/banners/l2-wsteth/styles.ts | 18 +++++++---- 7 files changed, 60 insertions(+), 80 deletions(-) delete mode 100644 assets/icons/l2-wsteth.svg diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap.svg index 940075be8..356cad7b4 100644 --- a/assets/icons/l2-swap.svg +++ b/assets/icons/l2-swap.svg @@ -1 +1 @@ - + diff --git a/assets/icons/l2-wsteth.svg b/assets/icons/l2-wsteth.svg deleted file mode 100644 index b5f117dea..000000000 --- a/assets/icons/l2-wsteth.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/shared/banners/l2-banner/l2-banner.tsx b/shared/banners/l2-banner/l2-banner.tsx index df9479b66..ecc82ab91 100644 --- 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 ( - - {title} - {text} - - - - {buttonText} - - - - - + {title} + {text} + + + + + {buttonText} + + + ); diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts index 6f50639d4..b75261609 100644 --- 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 index f46f188cc..a875bf680 100644 --- 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 = ({ 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 ( trackEvent(...MATOMO_CLICK_EVENTS.l2BannerWrap); export const L2Wsteth = () => { return ( - Enjoy lower gas fees and DeFi opportunities using wstETH - across Arbitrum, Optimism and Base. + across Arbitrum, Optimism, Base and zkSync. - - Learn More - + + + + Learn More + + ); }; diff --git a/shared/banners/l2-wsteth/styles.ts b/shared/banners/l2-wsteth/styles.ts index 185341a5d..b4555c8bf 100644 --- 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%; +`;