From 3f022cefa48268f71a7c3691ca7038df98c272bb Mon Sep 17 00:00:00 2001
From: voenkomatiwe <71823442+voenkomatiwe@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:46:22 +0200
Subject: [PATCH] feat: Place beta label next to logo in explorer #518 (#522)

---
 explorer/src/assets/logo/beta-dark.svg        |  7 ++++++
 .../src/assets/logo/beta-light-strong.svg     |  7 ++++++
 explorer/src/assets/logo/beta-light.svg       |  7 ++++++
 ...logo-dark-mode.svg => verax-logo-dark.svg} |  0
 ...ogo-grey.svg => verax-logo-grey-light.svg} |  0
 .../{verax-logo.svg => verax-logo-light.svg}  |  0
 explorer/src/components/Footer/index.tsx      | 22 +++++++++++++------
 explorer/src/components/Header/index.tsx      | 16 ++++++++++----
 8 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 explorer/src/assets/logo/beta-dark.svg
 create mode 100644 explorer/src/assets/logo/beta-light-strong.svg
 create mode 100644 explorer/src/assets/logo/beta-light.svg
 rename explorer/src/assets/logo/{verax-logo-dark-mode.svg => verax-logo-dark.svg} (100%)
 rename explorer/src/assets/logo/{verax-logo-grey.svg => verax-logo-grey-light.svg} (100%)
 rename explorer/src/assets/logo/{verax-logo.svg => verax-logo-light.svg} (100%)

diff --git a/explorer/src/assets/logo/beta-dark.svg b/explorer/src/assets/logo/beta-dark.svg
new file mode 100644
index 00000000..5c18ac65
--- /dev/null
+++ b/explorer/src/assets/logo/beta-dark.svg
@@ -0,0 +1,7 @@
+<svg width="35" height="18" viewBox="0 0 35 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.868896" y="0.25" width="34" height="17" rx="4" fill="#3D3D51" />
+  <path
+    d="M5.501 12.25V4.97727H8.41293C8.94797 4.97727 9.39423 5.05658 9.75171 5.2152C10.1092 5.37382 10.3779 5.59399 10.5578 5.87571C10.7377 6.15507 10.8277 6.47704 10.8277 6.84162C10.8277 7.12571 10.7709 7.37547 10.6572 7.59091C10.5436 7.80398 10.3874 7.97917 10.1885 8.11648C9.992 8.25142 9.7671 8.3473 9.51378 8.40412V8.47514C9.79077 8.48698 10.05 8.5651 10.2915 8.70952C10.5353 8.85393 10.733 9.05634 10.8845 9.31676C11.036 9.57481 11.1118 9.88258 11.1118 10.2401C11.1118 10.6259 11.0159 10.9704 10.8242 11.2734C10.6348 11.5741 10.3542 11.812 9.98253 11.9872C9.61085 12.1624 9.15275 12.25 8.60824 12.25H5.501ZM7.03864 10.9929H8.29219C8.7207 10.9929 9.0332 10.9112 9.22969 10.7479C9.42619 10.5821 9.52444 10.362 9.52444 10.0874C9.52444 9.88613 9.4759 9.70857 9.37884 9.55469C9.28178 9.4008 9.14328 9.28007 8.96336 9.19247C8.7858 9.10488 8.57392 9.06108 8.3277 9.06108H7.03864V10.9929ZM7.03864 8.0206H8.17856C8.38926 8.0206 8.57628 7.9839 8.73964 7.91051C8.90536 7.83475 9.03556 7.72822 9.13026 7.59091C9.22732 7.4536 9.27586 7.28906 9.27586 7.0973C9.27586 6.83452 9.18234 6.62263 8.99532 6.46165C8.81066 6.30066 8.54787 6.22017 8.20696 6.22017H7.03864V8.0206ZM11.9123 12.25V4.97727H16.8129V6.24503H13.45V7.97798H16.5608V9.24574H13.45V10.9822H16.8271V12.25H11.9123ZM17.5584 6.24503V4.97727H23.5314V6.24503H21.3048V12.25H19.7849V6.24503H17.5584ZM24.6799 12.25H23.0322L25.5429 4.97727H27.5244L30.0315 12.25H28.3838L26.562 6.6392H26.5052L24.6799 12.25ZM24.577 9.39134H28.469V10.5916H24.577V9.39134Z"
+    fill="#A4A8C2"
+  />
+</svg>
diff --git a/explorer/src/assets/logo/beta-light-strong.svg b/explorer/src/assets/logo/beta-light-strong.svg
new file mode 100644
index 00000000..4932a70d
--- /dev/null
+++ b/explorer/src/assets/logo/beta-light-strong.svg
@@ -0,0 +1,7 @@
+<svg width="37" height="18" viewBox="0 0 37 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.17334" width="36" height="18" rx="4" fill="#EAEAF3" />
+  <path
+    d="M4.86865 13V5H8.07178C8.66032 5 9.1512 5.08724 9.54443 5.26172C9.93766 5.4362 10.2332 5.67839 10.4312 5.98828C10.6291 6.29557 10.728 6.64974 10.728 7.05078C10.728 7.36328 10.6655 7.63802 10.5405 7.875C10.4155 8.10937 10.2437 8.30208 10.0249 8.45312C9.80876 8.60156 9.56136 8.70703 9.28272 8.76953V8.84766C9.5874 8.86068 9.87256 8.94661 10.1382 9.10547C10.4064 9.26432 10.6239 9.48698 10.7905 9.77344C10.9572 10.0573 11.0405 10.3958 11.0405 10.7891C11.0405 11.2135 10.9351 11.5924 10.7241 11.9258C10.5158 12.2565 10.2072 12.5182 9.79834 12.7109C9.38949 12.9036 8.88558 13 8.28662 13H4.86865ZM6.56006 11.6172H7.93897C8.41032 11.6172 8.75407 11.5273 8.97022 11.3477C9.18636 11.1654 9.29443 10.9232 9.29443 10.6211C9.29443 10.3997 9.24105 10.2044 9.13428 10.0352C9.02751 9.86589 8.87516 9.73307 8.67725 9.63672C8.48193 9.54036 8.24886 9.49219 7.97803 9.49219H6.56006V11.6172ZM6.56006 8.34766H7.81396C8.04574 8.34766 8.25146 8.30729 8.43115 8.22656C8.61344 8.14323 8.75667 8.02604 8.86084 7.875C8.96761 7.72396 9.021 7.54297 9.021 7.33203C9.021 7.04297 8.91813 6.8099 8.7124 6.63281C8.50928 6.45573 8.22021 6.36719 7.84522 6.36719H6.56006V8.34766ZM11.9211 13V5H17.3117V6.39453H13.6125V8.30078H17.0344V9.69531H13.6125V11.6055H17.3274V13H11.9211ZM18.1318 6.39453V5H24.7021V6.39453H22.2529V13H20.581V6.39453H18.1318ZM25.9655 13H24.153L26.9147 5H29.0944L31.8522 13H30.0397L28.0358 6.82812H27.9733L25.9655 13ZM25.8522 9.85547H30.1335V11.1758H25.8522V9.85547Z"
+    fill="#3D3D51"
+  />
+</svg>
diff --git a/explorer/src/assets/logo/beta-light.svg b/explorer/src/assets/logo/beta-light.svg
new file mode 100644
index 00000000..a8c8ac4b
--- /dev/null
+++ b/explorer/src/assets/logo/beta-light.svg
@@ -0,0 +1,7 @@
+<svg width="35" height="18" viewBox="0 0 35 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.912598" y="0.25" width="34" height="17" rx="4" fill="#EAEAF3" />
+  <path
+    d="M5.5447 12.25V4.97727H8.45663C8.99167 4.97727 9.43793 5.05658 9.79541 5.2152C10.1529 5.37382 10.4216 5.59399 10.6015 5.87571C10.7814 6.15507 10.8714 6.47704 10.8714 6.84162C10.8714 7.12571 10.8146 7.37547 10.701 7.59091C10.5873 7.80398 10.4311 7.97917 10.2322 8.11648C10.0357 8.25142 9.8108 8.3473 9.55748 8.40412V8.47514C9.83447 8.48698 10.0937 8.5651 10.3352 8.70952C10.579 8.85393 10.7767 9.05634 10.9282 9.31676C11.0797 9.57481 11.1555 9.88258 11.1555 10.2401C11.1555 10.6259 11.0596 10.9704 10.8679 11.2734C10.6785 11.5741 10.3979 11.812 10.0262 11.9872C9.65455 12.1624 9.19645 12.25 8.65194 12.25H5.5447ZM7.08234 10.9929H8.33589C8.7644 10.9929 9.0769 10.9112 9.27339 10.7479C9.46989 10.5821 9.56814 10.362 9.56814 10.0874C9.56814 9.88613 9.51961 9.70857 9.42254 9.55469C9.32548 9.4008 9.18698 9.28007 9.00706 9.19247C8.8295 9.10488 8.61762 9.06108 8.3714 9.06108H7.08234V10.9929ZM7.08234 8.0206H8.22226C8.43296 8.0206 8.61998 7.9839 8.78334 7.91051C8.94906 7.83475 9.07926 7.72822 9.17396 7.59091C9.27103 7.4536 9.31956 7.28906 9.31956 7.0973C9.31956 6.83452 9.22604 6.62263 9.03902 6.46165C8.85436 6.30066 8.59158 6.22017 8.25067 6.22017H7.08234V8.0206ZM11.956 12.25V4.97727H16.8566V6.24503H13.4937V7.97798H16.6045V9.24574H13.4937V10.9822H16.8708V12.25H11.956ZM17.6021 6.24503V4.97727H23.5751V6.24503H21.3485V12.25H19.8286V6.24503H17.6021ZM24.7236 12.25H23.0759L25.5866 4.97727H27.5681L30.0752 12.25H28.4275L26.6057 6.6392H26.5489L24.7236 12.25ZM24.6207 9.39134H28.5127V10.5916H24.6207V9.39134Z"
+    fill="#656B87"
+  />
+</svg>
diff --git a/explorer/src/assets/logo/verax-logo-dark-mode.svg b/explorer/src/assets/logo/verax-logo-dark.svg
similarity index 100%
rename from explorer/src/assets/logo/verax-logo-dark-mode.svg
rename to explorer/src/assets/logo/verax-logo-dark.svg
diff --git a/explorer/src/assets/logo/verax-logo-grey.svg b/explorer/src/assets/logo/verax-logo-grey-light.svg
similarity index 100%
rename from explorer/src/assets/logo/verax-logo-grey.svg
rename to explorer/src/assets/logo/verax-logo-grey-light.svg
diff --git a/explorer/src/assets/logo/verax-logo.svg b/explorer/src/assets/logo/verax-logo-light.svg
similarity index 100%
rename from explorer/src/assets/logo/verax-logo.svg
rename to explorer/src/assets/logo/verax-logo-light.svg
diff --git a/explorer/src/components/Footer/index.tsx b/explorer/src/components/Footer/index.tsx
index 8e52ca29..2ab34fa9 100644
--- a/explorer/src/components/Footer/index.tsx
+++ b/explorer/src/components/Footer/index.tsx
@@ -1,9 +1,11 @@
 import { useTernaryDarkMode } from "usehooks-ts";
 
+import BetaDark from "@/assets/logo/beta-dark.svg?react";
+import BetaLight from "@/assets/logo/beta-light.svg?react";
 import HapiLogoDark from "@/assets/logo/hapi-dark.svg?react";
 import HapiLogo from "@/assets/logo/hapi.svg?react";
 import VeraxLogoGreyDark from "@/assets/logo/verax-logo-grey-dark.svg?react";
-import VeraxLogoGrey from "@/assets/logo/verax-logo-grey.svg?react";
+import VeraxLogoGrey from "@/assets/logo/verax-logo-grey-light.svg?react";
 import { Link } from "@/components/Link";
 import { INFO_LIST } from "@/constants/components";
 import { APP_ROUTES } from "@/routes/constants";
@@ -15,8 +17,9 @@ export const Footer: React.FC = () => {
     <footer className="flex flex-col justify-between items-center py-5 sm:px-8 md:px-[60px] border-t-[1px] border-border-table dark:border-border-tableDark sm:flex-row gap-14 sm:gap-0 transition-spacing mt-14 md:mt-[4.5rem]">
       <Link to={APP_ROUTES.HOME} className="group">
         {isDarkMode ? (
-          <VeraxLogoGreyDark
-            className="
+          <div className="flex gap-2 items-center">
+            <VeraxLogoGreyDark
+              className="
         group-hover:[&>path]:fill-whiteDefault
         group-hover:[&>g>ellipse]:fill-[#D7D6CF]
         group-hover:[&>g>path]:fill-[#A5AF63]
@@ -24,10 +27,13 @@ export const Footer: React.FC = () => {
         [&>g>ellipse]:transition
         [&>g>path]:transition
         "
-          />
+            />
+            <BetaDark className="mt-1" />
+          </div>
         ) : (
-          <VeraxLogoGrey
-            className="
+          <div className="flex gap-2 items-center">
+            <VeraxLogoGrey
+              className="
       group-hover:[&>path]:fill-blackDefault
       group-hover:[&>g>circle]:fill-[#676455]
       group-hover:[&>g>path]:fill-[#A5AF63]
@@ -35,7 +41,9 @@ export const Footer: React.FC = () => {
       [&>g>circle]:transition
       [&>g>path]:transition
       "
-          />
+            />
+            <BetaLight className="mt-1" />
+          </div>
         )}
       </Link>
       <div className="flex flex-col sm:flex-row gap-6 sm:gap-8 text-text-quaternary text-sm">
diff --git a/explorer/src/components/Header/index.tsx b/explorer/src/components/Header/index.tsx
index 6a383ad7..ec339201 100644
--- a/explorer/src/components/Header/index.tsx
+++ b/explorer/src/components/Header/index.tsx
@@ -6,8 +6,10 @@ import { useLocation } from "react-router-dom";
 import { useTernaryDarkMode } from "usehooks-ts";
 import { useAccount } from "wagmi";
 
-import VeraxLogoDarkMode from "@/assets/logo/verax-logo-dark-mode.svg?react";
-import VeraxLogo from "@/assets/logo/verax-logo.svg?react";
+import BetaDark from "@/assets/logo/beta-dark.svg?react";
+import BetaLight from "@/assets/logo/beta-light-strong.svg?react";
+import VeraxLogoDarkMode from "@/assets/logo/verax-logo-dark.svg?react";
+import VeraxLogo from "@/assets/logo/verax-logo-light.svg?react";
 import { LightDarkModeSwitcher } from "@/components/LightDarkModeSwitcher";
 import { Link } from "@/components/Link";
 import {
@@ -54,9 +56,15 @@ export const Header: React.FC<HeaderProps> = ({ isOpened, setIsOpened }) => {
         <div className="justify-start items-center gap-6 flex self-stretch">
           <Link to={APP_ROUTES.HOME} className="shrink-0 hover:opacity-70">
             {isDarkMode ? (
-              <VeraxLogoDarkMode className="w-[76.434px] h-6 sm:h-auto sm:w-auto" />
+              <div className="flex gap-1 sm:gap-2 items-center">
+                <VeraxLogoDarkMode className="w-[76.434px] h-6 sm:h-auto sm:w-auto" />
+                <BetaDark className="mt-1 w-[21px] h-[10px] sm:w-auto sm:h-auto" />
+              </div>
             ) : (
-              <VeraxLogo className="w-[76.434px] h-6 sm:h-auto sm:w-auto" />
+              <div className="flex gap-1 sm:gap-2 items-center">
+                <VeraxLogo className="w-[76.434px] h-6 sm:h-auto sm:w-auto" />
+                <BetaLight className="mt-1 w-[21px] h-[10px] sm:w-auto sm:h-auto" />
+              </div>
             )}
           </Link>
           {!isAdaptive && <NavigationList />}