From 10c2c7fd2eb86c77ece715aa55e3314f636e6a1e Mon Sep 17 00:00:00 2001
From: Dmitrii Podlesnyi <rezed93@gmail.com>
Date: Mon, 11 Mar 2024 16:01:20 +0400
Subject: [PATCH] fix: l2 banner visuals

---
 assets/icons/l2-swap-dark.svg                   |  1 +
 assets/icons/{l2-swap.svg => l2-swap-light.svg} |  0
 shared/banners/l2-banner/styles.ts              | 10 +++++-----
 shared/banners/l2-banners/l2-after-stake.tsx    |  2 +-
 shared/banners/l2-banners/l2-after-wrap.tsx     |  2 +-
 shared/banners/l2-banners/l2-wsteth.tsx         |  2 +-
 6 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 assets/icons/l2-swap-dark.svg
 rename assets/icons/{l2-swap.svg => l2-swap-light.svg} (100%)

diff --git a/assets/icons/l2-swap-dark.svg b/assets/icons/l2-swap-dark.svg
new file mode 100644
index 000000000..cc2d48f44
--- /dev/null
+++ b/assets/icons/l2-swap-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="188" height="32" fill="none"><g clip-path="url(#a)"><path fill="#213147" d="M22.825 9.486V9.47a.326.326 0 0 0-.61 0l-1.894 5.195a.747.747 0 0 0 0 .454l5.051 13.85c-.471.341-.962.658-1.47.947l-4.27-11.714a.326.326 0 0 0-.61 0l-1.893 5.195a.749.749 0 0 0 0 .454l2.792 7.665a16.03 16.03 0 0 1-3.92.484c-1.265 0-2.494-.146-3.673-.424l9.26-25.407a.322.322 0 0 0-.297-.438v.015h-3.646a.661.661 0 0 0-.61.423L8.323 30.042a15.937 15.937 0 0 1-1.48-.92L15.22 6.169a.322.322 0 0 0-.297-.438l-.016.015H11.26a.661.661 0 0 0-.61.423L3.446 25.92A15.93 15.93 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16c0 3.64-1.215 6.995-3.262 9.684L22.825 9.486Z"/><path fill="#12AAFF" d="M23.902 29.916a15.897 15.897 0 0 1-3.98 1.6l-2.793-7.666a.747.747 0 0 1 0-.453l1.893-5.195c.11-.282.501-.282.61 0l4.27 11.713ZM28.738 25.684a16.094 16.094 0 0 1-3.366 3.286l-5.05-13.85a.749.749 0 0 1 0-.454l1.893-5.195c.109-.282.5-.282.61 0v.016l5.913 16.197Z"/><path fill="#fff" d="M15.22 6.169 6.843 29.122a16.086 16.086 0 0 1-3.397-3.202L10.651 6.17a.661.661 0 0 1 .61-.423h3.646l.016-.016c.219 0 .375.22.297.439ZM21.589 6.169l-9.261 25.407a15.88 15.88 0 0 1-4.005-1.535L17.035 6.17a.661.661 0 0 1 .61-.423h3.646V5.73c.22 0 .376.22.298.439Z"/><circle cx="16" cy="16" r="15.5" stroke="#725DFF"/></g><path fill="#FF0420" stroke="#725DFF" d="M57.5 16c0 8.56-6.94 15.5-15.5 15.5-8.56 0-15.5-6.94-15.5-15.5C26.5 7.44 33.44.5 42 .5 50.56.5 57.5 7.44 57.5 16Z"/><path fill="#fff" d="M37.334 20.252c-.953 0-1.733-.224-2.342-.673-.6-.456-.9-1.105-.9-1.945 0-.176.02-.392.06-.649a39.95 39.95 0 0 1 .444-2.077c.544-2.202 1.95-3.303 4.215-3.303.616 0 1.169.105 1.657.313.489.2.873.504 1.153.913.28.4.42.88.42 1.44 0 .169-.02.38-.06.637-.12.712-.264 1.405-.432 2.077-.28 1.097-.764 1.918-1.453 2.462-.689.537-1.61.805-2.762.805Zm.168-1.73c.448 0 .829-.131 1.14-.396.321-.264.55-.668.685-1.213.184-.752.325-1.409.42-1.97.033-.167.049-.34.049-.515 0-.729-.38-1.093-1.141-1.093-.449 0-.833.132-1.153.396-.312.264-.536.669-.672 1.213a26.083 26.083 0 0 0-.433 1.97c-.032.16-.048.328-.048.504 0 .736.385 1.105 1.153 1.105ZM42.595 20.133a.254.254 0 0 1-.204-.084.287.287 0 0 1-.036-.216l1.657-7.806a.344.344 0 0 1 .132-.216.366.366 0 0 1 .228-.084h3.194c.89 0 1.601.184 2.138.552.544.368.816.9.816 1.597 0 .2-.024.409-.072.625-.2.92-.604 1.6-1.212 2.041-.6.44-1.425.66-2.474.66H45.14l-.553 2.63a.344.344 0 0 1-.132.217.367.367 0 0 1-.228.084h-1.633Zm4.25-4.588c.337 0 .63-.092.877-.276.257-.184.425-.448.505-.792.024-.136.036-.257.036-.36 0-.233-.068-.409-.204-.529-.136-.128-.368-.192-.697-.192h-1.44l-.457 2.15h1.38Z"/><rect width="31" height="31" x="52.5" y=".5" fill="#fff" stroke="#725DFF" rx="15.5"/><path fill="#8347E5" d="M72.617 13.028c-.333-.188-.766-.188-1.132 0l-2.597 1.442-1.764.94-2.597 1.442c-.333.188-.766.188-1.132 0l-2.065-1.129c-.332-.188-.566-.532-.566-.909V12.59c0-.377.2-.721.566-.91l2.031-1.096c.333-.188.766-.188 1.132 0l2.031 1.097c.333.188.566.533.566.909v1.441l1.765-.971v-1.442c0-.376-.2-.72-.566-.909l-3.762-2.068c-.333-.188-.766-.188-1.132 0l-3.829 2.068a1.008 1.008 0 0 0-.566.91v4.167c0 .376.2.72.566.909l3.829 2.068c.333.188.765.188 1.132 0l2.597-1.41 1.764-.972 2.597-1.41c.333-.188.766-.188 1.132 0l2.03 1.097c.334.188.567.533.567.909v2.225c0 .376-.2.72-.566.909l-2.031 1.128c-.333.188-.766.188-1.132 0l-2.03-1.097c-.334-.188-.567-.533-.567-.909v-1.441l-1.764.971v1.442c0 .376.2.72.566.908l3.828 2.069c.333.188.766.188 1.132 0l3.829-2.069c.333-.188.566-.532.566-.908v-4.168c0-.376-.2-.721-.566-.91l-3.862-2.099Z"/><circle cx="94" cy="16" r="15.5" fill="#0052FF" stroke="#725DFF"/><g clip-path="url(#b)"><path fill="#fff" d="M93.983 25.693c5.363 0 9.71-4.34 9.71-9.693 0-5.354-4.347-9.693-9.71-9.693-5.088 0-9.261 3.906-9.676 8.878H97.14v1.63H84.307c.415 4.971 4.588 8.878 9.676 8.878Z"/></g><circle cx="120" cy="16" r="15.5" fill="#000" stroke="#725DFF"/><path fill="#fff" fill-rule="evenodd" d="m129 16.591-5.271-5.247v3.84l-5.231 3.85h5.231v2.805L129 16.59ZM110.428 16.591l5.272 5.248v-3.817l5.231-3.88H115.7v-2.806l-5.272 5.255Z" clip-rule="evenodd"/><g clip-path="url(#c)"><path fill="#000" d="M162 0h-32v32h32V0Z"/><path fill="#fff" d="M146 28v-4.086a8.24 8.24 0 0 1-1.238-.099l-.642 4.033c.624.107 1.256.152 1.88.152Zm1.871-.143a11.68 11.68 0 0 0 1.835-.438l-1.256-3.89a7.97 7.97 0 0 1-1.212.286l.633 4.042Zm-5.577-.438 1.256-3.881a7.966 7.966 0 0 1-1.149-.474l-1.853 3.64c.561.277 1.149.518 1.746.715Zm9.149-.716a12.268 12.268 0 0 0 1.604-.983l-2.406-3.3a6.692 6.692 0 0 1-1.06.644l1.862 3.64Zm-12.499-.992 2.406-3.3a8.017 8.017 0 0 1-.945-.804l-2.886 2.888c.445.438.926.85 1.425 1.216Zm15.519-1.198.027-.027c.445-.438.855-.921 1.22-1.422l-3.296-2.405c-.24.33-.516.652-.802.939l-.044.044 1.39 1.315 1.505 1.556Zm-18.165-1.458 3.297-2.405a7.925 7.925 0 0 1-.651-1.055l-3.634 1.85c.285.564.614 1.1.988 1.61Zm20.392-1.6a11.97 11.97 0 0 0 .722-1.744l-3.884-1.252a7.574 7.574 0 0 1-.472 1.145l3.634 1.85Zm-22.102-1.744 3.884-1.26a7.853 7.853 0 0 1-.285-1.208l-4.036.635c.098.617.25 1.234.437 1.833Zm23.261-1.824a12.04 12.04 0 0 0 .151-1.878h-4.08c0 .411-.036.831-.098 1.243l4.027.635ZM138.089 16c0-.411.036-.832.098-1.243l-4.036-.635A13.245 13.245 0 0 0 134 16h4.089Zm15.733-1.234 4.035-.635a11.916 11.916 0 0 0-.436-1.833l-3.884 1.252c.124.402.222.805.285 1.216Zm-15.35-1.216c.125-.394.285-.778.472-1.145l-3.634-1.85a11.861 11.861 0 0 0-.722 1.743l3.884 1.252Zm14.593-1.136 3.643-1.85c-.285-.564-.614-1.1-.989-1.61l-3.305 2.405c.241.331.464.689.651 1.055Zm-13.47-1.064c.24-.33.516-.652.81-.948l.009-.009-2.886-2.888-.009.01c-.446.446-.855.92-1.221 1.43l3.297 2.405Zm12.017-.93.874-.885 2.004-2.003-.009-.009c-.445-.438-.918-.85-1.416-1.216l-2.406 3.3c.33.241.651.51.936.804l.017.01Zm-10.253-.831a7.42 7.42 0 0 1 1.06-.644l-1.853-3.64c-.562.287-1.096.618-1.604.984l2.397 3.3Zm8.249-.635 1.862-3.64a12.268 12.268 0 0 0-1.737-.724l-1.265 3.88c.383.135.766.296 1.14.484Zm-6.04-.483a7.958 7.958 0 0 1 1.212-.286l-.633-4.033a11.9 11.9 0 0 0-1.835.438l1.256 3.88Zm3.679-.286.642-4.033A11.92 11.92 0 0 0 146.018 4v4.086c.41 0 .828.036 1.229.099Z"/><path fill="#fff" d="M145.996 24v-4.091a3.91 3.91 0 0 1-1.015-.134l-1.059 3.949a8.18 8.18 0 0 0 2.074.276Zm2.073-.276a7.645 7.645 0 0 0 1.933-.803l-2.047-3.538c-.291.17-.609.303-.936.392l1.05 3.949Zm-6.071-.803 2.047-3.538a4.21 4.21 0 0 1-.812-.624l-.035-.036-1.288 1.364-1.589 1.542.026.027c.495.49 1.051.918 1.651 1.265Zm9.655-1.265c.494-.5.926-1.052 1.27-1.658l-3.539-2.05a3.88 3.88 0 0 1-.626.81l2.895 2.898Zm-12.585-1.667 3.539-2.041a3.968 3.968 0 0 1-.389-.936l-3.944 1.052c.176.668.45 1.319.794 1.925Zm14.658-1.917a8.19 8.19 0 0 0 .274-2.067h-4.086c0 .338-.044.686-.132 1.016l3.944 1.051Zm-11.631-2.076c0-.34.044-.687.132-1.017l-3.953-1.051a8.19 8.19 0 0 0-.274 2.067h4.095Zm7.678-1.008 3.953-1.051a8.022 8.022 0 0 0-.794-1.935l-3.539 2.041c.159.304.292.616.38.945Zm-7.157-.944c.167-.286.37-.562.617-.803l.009-.009-1.465-1.461-1.403-1.454-.027.027a8.192 8.192 0 0 0-1.27 1.65l3.539 2.05Zm6.142-.803 1.447-1.453 1.483-1.408-.035-.036a8.223 8.223 0 0 0-1.651-1.274l-2.047 3.538c.291.17.556.375.803.615v.018Zm-4.713-.633c.291-.169.609-.303.936-.392l-1.042-3.949a7.654 7.654 0 0 0-1.932.803l2.038 3.538Zm2.965-.383 1.059-3.949A8.054 8.054 0 0 0 146.004 8v4.091c.336 0 .68.045 1.006.134Z"/></g><rect width="31" height="31" x="130.5" y=".5" stroke="#725DFF" rx="15.5"/><rect width="31" height="31" x="156.5" y=".5" fill="#000" rx="15.5"/><rect width="31" height="31" x="156.5" y=".5" stroke="#725DFF" rx="15.5"/><mask id="d" width="16" height="16" x="165" y="8" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M180.833 8.262h-15.5v15.344h15.5V8.262Z"/></mask><g fill="#fff" mask="url(#d)"><path d="M178.206 23.606h-12.873V10.752h2.946v10.363h9.927v2.491ZM178.206 13.242c1.451 0 2.627-1.115 2.627-2.49 0-1.376-1.176-2.49-2.627-2.49-1.451 0-2.627 1.114-2.627 2.49 0 1.375 1.176 2.49 2.627 2.49Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath><clipPath id="b"><path fill="#fff" d="M84 6h20v20H84z"/></clipPath><clipPath id="c"><rect width="32" height="32" x="130" fill="#fff" rx="16"/></clipPath></defs></svg>
diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap-light.svg
similarity index 100%
rename from assets/icons/l2-swap.svg
rename to assets/icons/l2-swap-light.svg
diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts
index 853198690..05d995396 100644
--- a/shared/banners/l2-banner/styles.ts
+++ b/shared/banners/l2-banner/styles.ts
@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Button, Link } from '@lidofinance/lido-ui';
-import Icons from 'assets/icons/l2-swap.svg';
+import IconsLight from 'assets/icons/l2-swap-light.svg';
+import IconsDark from 'assets/icons/l2-swap-dark.svg';
 import { LocalLink } from 'shared/components/local-link';
 
 export const Wrapper = styled.div`
@@ -45,13 +46,12 @@ export const Wrapper = styled.div`
   }
 `;
 
-export const L2Icons = styled.img.attrs({
-  src: Icons,
-  alt: '',
-})`
+export const L2Icons = styled.div`
   display: block;
   width: 188px;
   height: 32px;
+  background-image: url(${({ theme }) =>
+    theme.name === 'dark' ? IconsDark : IconsLight});
 `;
 
 export const FooterWrap = styled.div`
diff --git a/shared/banners/l2-banners/l2-after-stake.tsx b/shared/banners/l2-banners/l2-after-stake.tsx
index 1ac1265d4..40e207669 100644
--- a/shared/banners/l2-banners/l2-after-stake.tsx
+++ b/shared/banners/l2-banners/l2-after-stake.tsx
@@ -11,7 +11,7 @@ export const L2AfterStake: React.FC = () => {
       text={
         <>
           Learn about <b>Lido on L2 opportunities</b> and enjoy various
-          opportunities in DeFi.
+          opportunities in DeFi
         </>
       }
       buttonText="Learn more"
diff --git a/shared/banners/l2-banners/l2-after-wrap.tsx b/shared/banners/l2-banners/l2-after-wrap.tsx
index 6738f36fc..03049e73b 100644
--- a/shared/banners/l2-banners/l2-after-wrap.tsx
+++ b/shared/banners/l2-banners/l2-after-wrap.tsx
@@ -13,7 +13,7 @@ export const L2AfterWrap = () => {
       text={
         <>
           Learn about <b>DeFi opportunities</b> using wstETH across multiple L2
-          networks.
+          networks
         </>
       }
       buttonText="Learn more"
diff --git a/shared/banners/l2-banners/l2-wsteth.tsx b/shared/banners/l2-banners/l2-wsteth.tsx
index 0787c3f51..ab10c393c 100644
--- a/shared/banners/l2-banners/l2-wsteth.tsx
+++ b/shared/banners/l2-banners/l2-wsteth.tsx
@@ -23,7 +23,7 @@ export const L2Wsteth = ({ matomoEventLink }: L2WstethProps) => {
       text={
         <>
           Enjoy <b>lower gas</b> fees and <b>DeFi opportunities</b> using wstETH
-          across multiple L2 networks.
+          across multiple L2 networks
         </>
       }
     />