feat(web): court-badges

Author: tractorss

web/.env.devnet.public

@@ -4,3 +4,4 @@ export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/klero
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
+export REACT_APP_ARBITRATOR_TYPE="neo"

web/src/layout/Header/DesktopHeader.tsx

@@ -1,20 +1,9 @@
 import React from "react";
 import styled, { css } from "styled-components";
-
-import { Link } from "react-router-dom";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { useToggle } from "react-use";
-
-import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg";
-import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
-
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
-
-import { isKlerosUniversity } from "src/consts";
-
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
+import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
@@ -26,6 +15,8 @@ import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
 
 import { PopupContainer } from ".";
+import { responsiveSize } from "styles/responsiveSize";
+import Logo from "./Logo";
 
 const Container = styled.div`
   display: none;
@@ -73,10 +64,6 @@ const LightButtonContainer = styled.div`
   margin-right: ${responsiveSize(12, 16)};
 `;
 
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
 const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)`
   fill: ${({ theme }) => theme.white} !important;
 `;
@@ -106,7 +93,7 @@ const DesktopHeader = () => {
               Icon={StyledKlerosSolutionsIcon}
             />
           </LightButtonContainer>
-          <StyledLink to={"/"}>{isKlerosUniversity() ? <KlerosCourtUniversityLogo /> : <KlerosCourtLogo />}</StyledLink>
+          <Logo />
         </LeftSide>
 
         <MiddleSide>

web/src/layout/Header/Logo.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styled, { Theme, useTheme } from "styled-components";
+import KlerosCourtLogo from "svgs/header/kleros-court.svg";
+
+const arbitratorType = process.env.REACT_APP_ARBITRATOR_TYPE;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+`;
+
+const StyledLink = styled(Link)`
+  min-height: 48px;
+`;
+
+const BadgeContainer = styled.div<{ backgroundColor: string }>`
+  transform: skewX(-15deg);
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-radius: 3px;
+  padding: 1px 8px;
+  height: fit-content;
+`;
+
+const BadgeText = styled.label`
+  color: #220050;
+`;
+
+const Badge: React.FC<{ text: string; color: keyof Theme }> = ({ text, color }) => {
+  const theme = useTheme();
+  return (
+    <BadgeContainer {...{ backgroundColor: theme[color] }}>
+      <BadgeText>{text}</BadgeText>
+    </BadgeContainer>
+  );
+};
+
+const Logo: React.FC = () => {
+  let CourtBadge: JSX.Element | null = null;
+  switch (arbitratorType) {
+    case "neo":
+      CourtBadge = <Badge text="Neo" color="paleCyan" />;
+      break;
+    case "university":
+      CourtBadge = <Badge text="Uni" color="limeGreen" />;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Container>
+      {" "}
+      <StyledLink to={"/"}>
+        <KlerosCourtLogo />
+      </StyledLink>
+      {CourtBadge}
+    </Container>
+  );
+};
+
+export default Logo;

web/src/layout/Header/MobileHeader.tsx

@@ -1,20 +1,12 @@
 import React, { useContext, useMemo, useRef } from "react";
 import styled, { css } from "styled-components";
-
-import { Link } from "react-router-dom";
 import { useClickAway, useToggle } from "react-use";
-
-import HamburgerIcon from "svgs/header/hamburger.svg";
-import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg";
-import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-
-import { isKlerosUniversity } from "src/consts";
-
 import { landscapeStyle } from "styles/landscapeStyle";
-
+import HamburgerIcon from "svgs/header/hamburger.svg";
 import LightButton from "components/LightButton";
 
 import NavBar from "./navbar";
+import Logo from "./Logo";
 
 const Container = styled.div`
   display: flex;
@@ -41,10 +33,6 @@ const StyledLightButton = styled(LightButton)`
   }
 `;
 
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
 const OpenContext = React.createContext({
   isOpen: false,
   toggleIsOpen: () => {
@@ -64,7 +52,7 @@ const MobileHeader = () => {
   return (
     <Container ref={containerRef}>
       <OpenContext.Provider value={memoizedContext}>
-        <StyledLink to={"/"}>{isKlerosUniversity() ? <KlerosCourtUniversityLogo /> : <KlerosCourtLogo />}</StyledLink>
+        <Logo />
         <NavBar />
         <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
       </OpenContext.Provider>

web/src/styles/themes.ts

@@ -41,6 +41,9 @@ export const lightTheme = {
 
   skeletonBackground: "#EBEBEB",
   skeletonHighlight: "#F5F5F5",
+
+  paleCyan: "#ACFFFF",
+  limeGreen: "#F3FFD9",
 };
 
 export const darkTheme = {
@@ -84,4 +87,7 @@ export const darkTheme = {
 
   skeletonBackground: "#3A2270",
   skeletonHighlight: "#3E307C",
+
+  paleCyan: "#ACFFFF",
+  limeGreen: "#F3FFD9",
 };