Merge pull request #1360 from kleros/chore(web)/testnet-banner

chore(web): add-testnet-banner

Author: alcercu

web/src/layout/Header/TestnetBanner.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 TestnetBanner: 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>
+  );
+};

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 { TestnetBanner } from "./TestnetBanner";
 
 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" ? <TestnetBanner /> : null}
+      <HeaderContainer>
+        <DesktopHeader />
+        <MobileHeader />
+      </HeaderContainer>
     </Container>
   );
 };

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