From 055ddd1b15d2c403abfb492b57ec5f224cdcaf12 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Sat, 9 Dec 2023 12:08:23 +0530
Subject: [PATCH 1/4] chore(web): add-testnet-banner

---
 web/src/layout/Header/Banner.tsx | 40 ++++++++++++++++++++++++++++++++
 web/src/layout/Header/index.tsx  | 16 +++++++++----
 2 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 web/src/layout/Header/Banner.tsx

diff --git a/web/src/layout/Header/Banner.tsx b/web/src/layout/Header/Banner.tsx
new file mode 100644
index 000000000..3fed10426
--- /dev/null
+++ b/web/src/layout/Header/Banner.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background-color: ${({ theme }) => theme.tintPurple};
+  color: ${({ theme }) => theme.primaryText};
+
+  padding: 6px 2px;
+
+  ${landscapeStyle(
+    () => css`
+      padding: 8px 10px;
+    `
+  )}
+`;
+
+const StyledP = styled.p`
+  font-size: 14px;
+  text-align: center;
+  margin: 0;
+`;
+
+export const Banner: React.FC = () => {
+  return (
+    <Container>
+      <StyledP>
+        Thanks for trying Kleros V2! This a testnet release: work is still in progress and some features are missing.
+        More info{" "}
+        <a href="https://docs.kleros.io/products/court-v2" target="_blank" rel="noreferrer">
+          here
+        </a>
+        .
+      </StyledP>
+    </Container>
+  );
+};
diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx
index 6287381e6..8f7a23e12 100644
--- a/web/src/layout/Header/index.tsx
+++ b/web/src/layout/Header/index.tsx
@@ -2,17 +2,22 @@ import React from "react";
 import styled from "styled-components";
 import MobileHeader from "./MobileHeader";
 import DesktopHeader from "./DesktopHeader";
+import { Banner } from "./Banner";
 
 const Container = styled.div`
   position: sticky;
   z-index: 1;
   top: 0;
   width: 100%;
-  height: 64px;
   background-color: ${({ theme }) => theme.primaryPurple};
 
-  padding: 0 24px;
   display: flex;
+  flex-wrap: wrap;
+`;
+
+const HeaderContainer = styled.div`
+  width: 100%;
+  padding: 4px 24px 8px;
 `;
 
 export const PopupContainer = styled.div`
@@ -27,8 +32,11 @@ export const PopupContainer = styled.div`
 const Header: React.FC = () => {
   return (
     <Container>
-      <DesktopHeader />
-      <MobileHeader />
+      {process.env.REACT_APP_DEPLOYMENT === "testnet" && <Banner />}
+      <HeaderContainer>
+        <DesktopHeader />
+        <MobileHeader />
+      </HeaderContainer>
     </Container>
   );
 };

From ad4fd6861904e01f12f37f71698ad900869fabb3 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 12 Dec 2023 20:49:47 +0530
Subject: [PATCH 2/4] refactor(web): update-Banner-name-to-TestnetBanner

---
 web/src/layout/Header/{Banner.tsx => TestnetBanner.tsx} | 2 +-
 web/src/layout/Header/index.tsx                         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename web/src/layout/Header/{Banner.tsx => TestnetBanner.tsx} (94%)

diff --git a/web/src/layout/Header/Banner.tsx b/web/src/layout/Header/TestnetBanner.tsx
similarity index 94%
rename from web/src/layout/Header/Banner.tsx
rename to web/src/layout/Header/TestnetBanner.tsx
index 3fed10426..e0ed68e3a 100644
--- a/web/src/layout/Header/Banner.tsx
+++ b/web/src/layout/Header/TestnetBanner.tsx
@@ -24,7 +24,7 @@ const StyledP = styled.p`
   margin: 0;
 `;
 
-export const Banner: React.FC = () => {
+export const TestnetBanner: React.FC = () => {
   return (
     <Container>
       <StyledP>
diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx
index 8f7a23e12..b4b5255be 100644
--- a/web/src/layout/Header/index.tsx
+++ b/web/src/layout/Header/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import MobileHeader from "./MobileHeader";
 import DesktopHeader from "./DesktopHeader";
-import { Banner } from "./Banner";
+import { TestnetBanner } from "./TestnetBanner";
 
 const Container = styled.div`
   position: sticky;
@@ -32,7 +32,7 @@ export const PopupContainer = styled.div`
 const Header: React.FC = () => {
   return (
     <Container>
-      {process.env.REACT_APP_DEPLOYMENT === "testnet" && <Banner />}
+      {process.env.REACT_APP_DEPLOYMENT === "testnet" && <TestnetBanner />}
       <HeaderContainer>
         <DesktopHeader />
         <MobileHeader />

From a946cdaeb8c5ed020f534e5fee829499d905f18a Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 12 Dec 2023 22:51:12 +0530
Subject: [PATCH 3/4] refactor(web): use-ternary-operator

---
 web/src/layout/Header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx
index b4b5255be..affc3815d 100644
--- a/web/src/layout/Header/index.tsx
+++ b/web/src/layout/Header/index.tsx
@@ -32,7 +32,7 @@ export const PopupContainer = styled.div`
 const Header: React.FC = () => {
   return (
     <Container>
-      {process.env.REACT_APP_DEPLOYMENT === "testnet" && <TestnetBanner />}
+      {process.env.REACT_APP_DEPLOYMENT === "testnet" ? <TestnetBanner /> : null}
       <HeaderContainer>
         <DesktopHeader />
         <MobileHeader />

From 7451435fdb700055da0791fcef92b42be35685ba Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 13 Dec 2023 10:06:28 +0100
Subject: [PATCH 4/4] fix(web): add overlay to mobile navbar and generalize top
 position for testnet banner

---
 web/src/layout/Header/navbar/index.tsx | 67 ++++++++++++++++----------
 1 file changed, 42 insertions(+), 25 deletions(-)

diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx
index fc7205d52..b3c6e3d16 100644
--- a/web/src/layout/Header/navbar/index.tsx
+++ b/web/src/layout/Header/navbar/index.tsx
@@ -16,12 +16,26 @@ import Settings from "./Menu/Settings";
 import { DisconnectWalletButton } from "./Menu/Settings/General";
 import { PopupContainer } from "..";
 
+const Wrapper = styled.div<{ isOpen: boolean }>`
+  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 30;
+`;
+
+const StyledOverlay = styled(Overlay)`
+  top: unset;
+`;
+
 const Container = styled.div<{ isOpen: boolean }>`
   position: absolute;
-  top: 64px;
+  top: 0;
   left: 0;
   right: 0;
-  max-height: calc(100vh - 64px);
+  max-height: calc(100vh - 160px);
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
@@ -74,29 +88,32 @@ const NavBar: React.FC = () => {
 
   return (
     <>
-      <Container {...{ isOpen }}>
-        <LightButton
-          text="Kleros Solutions"
-          onClick={() => {
-            toggleIsDappListOpen();
-          }}
-          Icon={KlerosSolutionsIcon}
-        />
-        <hr />
-        <Explore />
-        <hr />
-        <WalletContainer>
-          <ConnectWallet />
-          {isConnected && (
-            <DisconnectWalletButtonContainer>
-              <DisconnectWalletButton />
-            </DisconnectWalletButtonContainer>
-          )}
-        </WalletContainer>
-        <hr />
-        <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
-        <br />
-      </Container>
+      <Wrapper {...{ isOpen }}>
+        <StyledOverlay />
+        <Container {...{ isOpen }}>
+          <LightButton
+            text="Kleros Solutions"
+            onClick={() => {
+              toggleIsDappListOpen();
+            }}
+            Icon={KlerosSolutionsIcon}
+          />
+          <hr />
+          <Explore />
+          <hr />
+          <WalletContainer>
+            <ConnectWallet />
+            {isConnected && (
+              <DisconnectWalletButtonContainer>
+                <DisconnectWalletButton />
+              </DisconnectWalletButtonContainer>
+            )}
+          </WalletContainer>
+          <hr />
+          <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
+          <br />
+        </Container>
+      </Wrapper>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
           <Overlay />