feat: Place beta label next to logo in explorer #518 (#522)

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,27 +17,33 @@ 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]
         [&>path]:transition
         [&>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]
       [&>path]:transition
       [&>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">

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 />}