Implement new header design (#469)

Resolves #466 
Resolves #284 

What has been done:
- New header design was implemented (both desktop and mobile)
- Added `onClick` prop to `Icon` component

src/shared/components/Icon.tsx

@@ -1,13 +1,17 @@
-import classNames from "classnames"
 import React, { CSSProperties } from "react"
+import classNames from "classnames"
+
+type IconType = "mask" | "image"
 
 type IconProps = {
-  type?: "mask" | "image"
+  type?: IconType
   src: string
   width?: string
   height?: string
   color?: string
   style?: CSSProperties
+  ariaLabel?: string
+  onClick?: () => void
 }
 
 export default function Icon({
@@ -17,15 +21,29 @@ export default function Icon({
   src,
   color = "var(--off-white)",
   style,
+  ariaLabel,
+  onClick,
 }: IconProps) {
+  const isButton = !!onClick
+
+  const classes = classNames("icon", {
+    [type]: true,
+    button: isButton,
+  })
+
   return (
     <>
-      <div
-        className={classNames("icon", {
-          [type]: true,
-        })}
-        style={style}
-      />
+      {isButton ? (
+        <button
+          onClick={onClick}
+          aria-label={ariaLabel}
+          type="button"
+          className={classes}
+          style={style}
+        />
+      ) : (
+        <div className={classes} style={style} />
+      )}
       <style jsx>{`
         .icon {
           width: ${width};
@@ -43,6 +61,11 @@ export default function Icon({
           mask-position: center;
           background-color: ${color};
         }
+        .icon.button {
+          background-color: transparent;
+          border: none;
+          cursor: pointer;
+        }
       `}</style>
     </>
   )

src/ui/Assistant/index.tsx

@@ -20,24 +20,21 @@ export default function Assistant() {
     <>
       <Portal>
         <div className="assistant">
-          <button
-            type="button"
-            className="assistant_trigger button_reset"
-            onClick={() =>
-              updateAssistant({
-                visible: !assistant.visible,
-                type: "default",
-              })
-            }
-          >
+          <div className="assistant_trigger">
             <Icon
               src={assistantImage}
               width="62px"
               height="62px"
               type="image"
               color="currentColor"
+              onClick={() =>
+                updateAssistant({
+                  visible: !assistant.visible,
+                  type: "default",
+                })
+              }
             />
-          </button>
+          </div>
           <AssistantWelcome />
           <AssistantQuests />
           <AssistantJoin />
@@ -59,7 +56,7 @@ export default function Assistant() {
           position: absolute;
           height: 54px;
           width: 54px;
-          left: 14%;
+          left: 7%;
           top: 6%;
           background: #043937;
           z-index: -1;

src/ui/MobileScreen/index.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react"
 import mobileBg from "shared/assets/mobile/mobile-bg.webp"
 import mobileCircle from "shared/assets/mobile/mobile-circle.png"
 import mobileScreen from "shared/assets/mobile/mobile-screen.png"
-import logoIcon from "shared/assets/nav_logo.svg"
 import { useOnResize } from "shared/hooks"
 import { getWindowDimensions } from "shared/utils"
+import MobileNav from "ui/Nav/MobileNav"
 
 const MOBILE_BREAKPOINT = 854 // qHD width
 
@@ -23,29 +23,7 @@ export default function MobileScreen() {
   return (
     <>
       <div className="mobile-container">
-        <div className="nav_container">
-          <div className="nav_wrapper">
-            <svg className="nav_bg">
-              <defs>
-                <mask id="bg_mask">
-                  <rect width="100%" height="100px" fill="#fff" />
-                  <circle cx="50%" cy="50%" r="80" fill="#000" />
-                </mask>
-              </defs>
-              <rect
-                width="100%"
-                height="100%"
-                fill="var(--primary-p1-100)"
-                mask="url(#bg_mask)"
-              />
-            </svg>
-            <div className="lhs_container row" />
-            <div className="logo_container">
-              <div className="logo" />
-            </div>
-            <div className="rhs_container row" />
-          </div>
-        </div>
+        <MobileNav />
         <div className="mobile-circle">
           <img src={mobileScreen} className="mobile-screen" alt="Screen icon" />
           <h1 className="mobile-title">
@@ -96,63 +74,6 @@ export default function MobileScreen() {
             font: var(--text-h1);
             text-align: center;
           }
-          .nav_bg {
-            pointer-events: none;
-            z-index: -1;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            inset: 0;
-          }
-          .nav_container {
-            position: absolute;
-            top: 42px;
-            left: 0;
-            right: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: var(--z-navigation);
-            filter: drop-shadow(0px 14px 16px rgba(7, 17, 17, 0.24));
-            --logo-size: 112px;
-            user-select: none;
-          }
-          .logo_container {
-            position: absolute;
-            top: 0;
-            left: calc(50% - 112px / 2);
-          }
-          .logo {
-            border-radius: 50%;
-            margin-top: -18px;
-            background: white;
-            background: url(${logoIcon}) no-repeat center 0/160px;
-            width: var(--logo-size);
-            height: var(--logo-size);
-          }
-          .nav_wrapper {
-            position: relative;
-            display: flex;
-            width: 100%;
-            justify-content: center;
-            z-index: var(--navigation);
-            border-radius: 48px;
-            padding: 16px 28px;
-            height: 72px;
-          }
-          .lhs_container {
-            margin-right: auto;
-            align-items: center;
-          }
-          .rhs_container {
-            margin-left: auto;
-            align-items: center;
-          }
-          @media (max-height: 520px) {
-            .nav_container {
-              display: none;
-            }
-          }
         `}
       </style>
     </>

src/ui/Nav/MobileNav.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import logoIcon from "shared/assets/nav_logo.svg"
+import Icon from "shared/components/Icon"
+import { useResetTenderlyFork } from "shared/hooks"
+import NavContainer from "./NavContainer"
+
+export default function MobileNav() {
+  const resetTenderlyFork = useResetTenderlyFork()
+
+  return (
+    <NavContainer>
+      <Icon
+        src={logoIcon}
+        type="image"
+        height="32px"
+        width="154px"
+        onClick={resetTenderlyFork}
+      />
+    </NavContainer>
+  )
+}

src/ui/Nav/NavContainer.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from "react"
+
+export default function NavContainer({ children }: { children: ReactNode }) {
+  return (
+    <div className="nav_container">
+      <div className="nav_wrapper">{children}</div>
+      <style jsx>
+        {`
+          .nav_container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: var(--z-navigation);
+            filter: drop-shadow(0px 14px 16px rgba(7, 17, 17, 0.24));
+            --logo-size: 112px;
+            user-select: none;
+          }
+
+          .nav_wrapper {
+            position: relative;
+            display: flex;
+            width: 100%;
+            justify-content: center;
+            z-index: var(--navigation);
+            padding: 20px 28px;
+            max-height: 72px;
+            background: var(--primary-p1-100);
+          }
+        `}
+      </style>
+    </div>
+  )
+}