From eed8b5fe05a746e13350f99c1248edd938efc3fe Mon Sep 17 00:00:00 2001
From: anemne <63043552+anemne@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:40:56 +0100
Subject: [PATCH] Replace logo from sanity with local svg (#878)

---
 .vscode/settings.json                         |  3 +++
 public/_assets/variant-logo.svg               |  9 +++++++++
 src/components/link/link.module.css           |  2 +-
 src/components/navigation/header/Header.tsx   | 10 +---------
 .../navigation/header/header.module.css       | 19 +++++++------------
 5 files changed, 21 insertions(+), 22 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 public/_assets/variant-logo.svg

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..4f789f228
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"]
+}
diff --git a/public/_assets/variant-logo.svg b/public/_assets/variant-logo.svg
new file mode 100644
index 000000000..8f836c7ae
--- /dev/null
+++ b/public/_assets/variant-logo.svg
@@ -0,0 +1,9 @@
+<svg width="101" height="24" viewBox="0 0 101 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5331 22.5778C19.4943 21.6411 18.9761 20.4136 18.9761 18.8954C18.9761 17.3771 19.4625 16.2786 20.4683 15.4075C21.4411 14.5352 22.8697 14.051 24.7188 13.8892L28.5476 13.6313C29.3591 13.5668 29.7807 13.1143 29.7807 12.3065C29.7807 11.4987 29.5216 10.9172 28.9692 10.4975C28.4181 10.1095 27.6384 9.91601 26.6985 9.91601C24.6869 9.91601 23.5516 10.7555 23.3243 12.4027H19.3329C19.5273 10.562 20.241 9.10824 21.507 8.10702C22.772 7.10579 24.4926 6.62158 26.7315 6.62158C28.9704 6.62158 30.7547 7.17028 32.0207 8.2688C33.2538 9.36732 33.8698 11.0145 33.8698 13.1788V19.9939H35.2006V23.4818H33.5459C31.5991 23.4818 30.5603 22.5122 30.4308 20.6071C29.425 22.8675 27.543 23.9988 24.7529 23.9988C22.9686 23.9988 21.573 23.5146 20.5353 22.5778H20.5331ZM28.6442 19.5742C29.4227 18.8309 29.8125 17.9269 29.8125 16.8284V16.1824L25.595 16.5049C23.9403 16.6338 23.1288 17.3443 23.1288 18.6691C23.1288 19.3151 23.3561 19.7993 23.7778 20.1545C24.1994 20.5098 24.8165 20.7032 25.595 20.7032C26.8281 20.7032 27.8339 20.3152 28.6454 19.573L28.6442 19.5742Z" fill="#222424"/>
+<path d="M37.178 11.2736C37.178 9.94886 37.5348 8.91596 38.2815 8.20548C38.9952 7.49501 40.034 7.13977 41.4285 7.13977H46.7495V10.6277H41.3307V23.4829H37.178V11.2736Z" fill="#222424"/>
+<path d="M50.8376 4.74932C50.0909 4.74932 49.5068 4.52305 49.0204 4.07052C48.5339 3.6508 48.3066 3.06929 48.3066 2.3905C48.3066 1.7117 48.5658 1.16301 49.0533 0.678797C49.5397 0.226266 50.1239 0 50.8376 0C51.5513 0 52.1684 0.226266 52.6549 0.678797C53.1413 1.16301 53.3686 1.71283 53.3686 2.3905C53.3686 3.06816 53.1413 3.64967 52.6549 4.07052C52.1684 4.52305 51.5843 4.74932 50.8376 4.74932ZM48.7612 23.483V7.13981H52.914V23.483H48.7612Z" fill="#222424"/>
+<path d="M56.2565 22.5778C55.2177 21.6411 54.6995 20.4136 54.6995 18.8954C54.6995 17.3771 55.1859 16.2786 56.1917 15.4075C57.1645 14.5352 58.5931 14.051 60.4422 13.8892L64.271 13.6313C65.0825 13.5668 65.5041 13.1143 65.5041 12.3065C65.5041 11.4987 65.245 10.9172 64.6926 10.4975C64.1414 10.1095 63.3618 9.91601 62.4219 9.91601C60.4103 9.91601 59.275 10.7555 59.0477 12.4027H55.0563C55.2507 10.562 55.9644 9.10824 57.2304 8.10702C58.4954 7.10579 60.216 6.62158 62.4549 6.62158C64.6938 6.62158 66.4781 7.17028 67.7441 8.2688C68.9772 9.36732 69.5932 11.0145 69.5932 13.1788V19.9939H70.924V23.4818H69.2693C67.3225 23.4818 66.2837 22.5122 66.1542 20.6071C65.1484 22.8675 63.2663 23.9988 60.4763 23.9988C58.692 23.9988 57.2963 23.5146 56.2587 22.5778H56.2565ZM64.3687 19.5742C65.1472 18.8309 65.5371 17.9269 65.5371 16.8284V16.1824L61.3195 16.5049C59.6648 16.6338 58.8533 17.3443 58.8533 18.6691C58.8533 19.3151 59.0806 19.7993 59.5023 20.1545C59.9239 20.5098 60.541 20.7032 61.3195 20.7032C62.5526 20.7032 63.5584 20.3152 64.3699 19.573L64.3687 19.5742Z" fill="#222424"/>
+<path d="M84.0958 13.8893C84.0958 11.4343 83.09 10.2068 81.0784 10.2068C79.8783 10.2068 78.9043 10.6265 78.2236 11.466C77.5098 12.3382 77.153 13.6302 77.153 15.3419V23.4818H73.0002V7.13979H76.7643V9.53028C77.8349 7.59232 79.5874 6.6239 82.0854 6.6239C83.9992 6.6239 85.5244 7.2054 86.6279 8.3356C87.6985 9.49861 88.2497 11.0813 88.2497 13.1155V23.4841H84.097V13.8916L84.0958 13.8893Z" fill="#222424"/>
+<path d="M98.21 23.4829C96.2962 23.4829 94.8028 22.9659 93.7652 21.9647C92.6946 20.9634 92.1753 19.5742 92.1753 17.7663V10.6276H89.1897V7.13973H91.1035C91.9798 7.13973 92.4344 6.72001 92.4344 5.84776V2.16528H96.2303V7.13973H99.6693V10.6276H96.3269V19.0255C96.3269 19.6715 96.6508 19.9939 97.3327 19.9939H100.091V23.4818H98.2089L98.21 23.4829Z" fill="#222424"/>
+<path d="M7.78724 21.9036L0 0.872192H4.57438L10.8205 18.4055L17.0349 0.872192H21.6752L13.8254 21.9115C13.3572 23.1673 12.1536 23.9999 10.808 23.9999C9.46016 23.9999 8.25434 23.1628 7.78838 21.9036H7.78724Z" fill="#222424"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
index e99c5097d..16b1968d4 100644
--- a/src/components/link/link.module.css
+++ b/src/components/link/link.module.css
@@ -55,7 +55,7 @@
     height: 24px;
     display: inline-block;
     -webkit-mask-size: cover;
-    background-color: var(--primary-black);
+    background-color: var(--primary-white);
     -webkit-mask: url("/_assets/arrow.svg") no-repeat 50% 50%;
   }
 }
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
index 3101fd656..cc4f95466 100644
--- a/src/components/navigation/header/Header.tsx
+++ b/src/components/navigation/header/Header.tsx
@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 import { FocusOn } from "react-focus-on";
 
 import { defaultLanguage } from "i18n/supportedLanguages";
-import { SanityImage } from "src/components/image/SanityImage";
 import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
@@ -37,7 +36,6 @@ const filterLinks = (data: ILink[], type: string) =>
 
 export const Header = ({
   navigation,
-  assets,
   announcement,
   currentLanguage,
   pathTitles,
@@ -92,13 +90,7 @@ export const Header = ({
         <header>
           <nav aria-label="Main menu">
             <div className={styles.wrapper}>
-              {assets?.primaryLogo && (
-                <div className={styles.logo}>
-                  <Link href="/" aria-label="Home">
-                    <SanityImage image={assets.primaryLogo} />
-                  </Link>
-                </div>
-              )}
+              <Link href="/" aria-label="Home" className={styles.logo} />
               {renderPageLinks(links, false, pathname)}
               {renderPageCTAs(ctas, false)}
               <div className={styles.languageSwitcher}>
diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css
index 85f3a3114..b44f394e0 100644
--- a/src/components/navigation/header/header.module.css
+++ b/src/components/navigation/header/header.module.css
@@ -37,18 +37,6 @@
   padding: 0rem 1.5rem;
 }
 
-.logo {
-  overflow: hidden;
-  width: auto;
-  display: flex;
-  max-width: 100%;
-  height: 1.25rem;
-
-  @media (min-width: 1200px) {
-    flex: 1;
-  }
-}
-
 .list {
   list-style-type: none;
   margin: 0;
@@ -169,3 +157,10 @@
   font-weight: 600;
   color: var(--primary-white);
 }
+
+.logo {
+  width: 130px;
+  height: 37px;
+  background-color: var(--primary-white);
+  -webkit-mask: url("/_assets/variant-logo.svg") no-repeat 50% 50%;
+}