Testnet banner

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>
+  );
+};

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>
   );
 };