From ccae0a4a5d91c38fc1aa3674f6c32e74db169713 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Fri, 8 Apr 2022 16:59:05 +0200
Subject: [PATCH 01/17] fix(dependencies): update kleros ui library version

---
 web/package.json |  2 +-
 yarn.lock        | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/package.json b/web/package.json
index 64b22bca4..7ccde8537 100644
--- a/web/package.json
+++ b/web/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^0.1.3",
+    "@kleros/ui-components-library": "^0.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
diff --git a/yarn.lock b/yarn.lock
index d1b152daf..f5714f030 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1737,7 +1737,7 @@ __metadata:
   resolution: "@kleros/kleros-v2-web@workspace:web"
   dependencies:
     "@kleros/kleros-v2-contracts": "workspace:^"
-    "@kleros/ui-components-library": ^0.1.3
+    "@kleros/ui-components-library": ^0.1.5
     "@parcel/transformer-svg-react": ^2.2.1
     "@types/react": ^17.0.38
     "@types/react-dom": ^17.0.11
@@ -1780,6 +1780,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kleros/ui-components-library@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "@kleros/ui-components-library@npm:0.1.5"
+  dependencies:
+    "@datepicker-react/hooks": ^2.8.4
+    "@swc/helpers": ^0.3.2
+    rc-slider: ^9.7.5
+    react: ^18.0.0
+    react-dom: ^18.0.0
+    react-is: ^18.0.0
+    simplebar: ^5.3.6
+    simplebar-react: ^2.3.6
+  peerDependencies:
+    styled-components: ^5.3.3
+  checksum: efc74789760b7823aafd4c7c2341feca01eda1a2093839ae6455f8a724606974e202e8714de06f3432759321b0e509432d3d80170eb04dd198c04da24e1f7b42
+  languageName: node
+  linkType: hard
+
 "@metamask/detect-provider@npm:^1.2.0":
   version: 1.2.0
   resolution: "@metamask/detect-provider@npm:1.2.0"

From 29b0f9324ce0efd163d508a741b2f069ff8e397d Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Fri, 8 Apr 2022 17:00:17 +0200
Subject: [PATCH 02/17] feat(web/header): work in progress

---
 web/src/components/ConnectButton.tsx          |  6 +++
 web/src/components/layout/header/index.tsx    |  7 ++--
 .../header/{NavBar.tsx => navbar/Explore.tsx} | 25 ++++++------
 .../components/layout/header/navbar/Menu.tsx  | 39 +++++++++++++++++++
 .../components/layout/header/navbar/index.tsx | 33 ++++++++++++++++
 web/src/styles/global-style.ts                | 37 ++++++++++++++++++
 6 files changed, 131 insertions(+), 16 deletions(-)
 create mode 100644 web/src/components/ConnectButton.tsx
 rename web/src/components/layout/header/{NavBar.tsx => navbar/Explore.tsx} (60%)
 create mode 100644 web/src/components/layout/header/navbar/Menu.tsx
 create mode 100644 web/src/components/layout/header/navbar/index.tsx

diff --git a/web/src/components/ConnectButton.tsx b/web/src/components/ConnectButton.tsx
new file mode 100644
index 000000000..cae2ffb7a
--- /dev/null
+++ b/web/src/components/ConnectButton.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { Button } from "@kleros/ui-components-library";
+
+const ConnectButton: React.FC = () => <Button small text={"Connect"} />;
+
+export default ConnectButton;
diff --git a/web/src/components/layout/header/index.tsx b/web/src/components/layout/header/index.tsx
index 66517b95d..58b7ccb2b 100644
--- a/web/src/components/layout/header/index.tsx
+++ b/web/src/components/layout/header/index.tsx
@@ -1,21 +1,22 @@
 import React from "react";
 import styled from "styled-components";
 import KlerosCourt from "./KlerosCourt";
+import NavBar from "./navbar";
 
 const Container = styled.div`
   height: 64px;
   width: 100vw;
   background-color: ${({ theme }) => theme.primaryPurple};
+  padding: 0 24px;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 16px;
+  justify-content: space-between;
 `;
 
 const Header: React.FC = () => (
   <Container>
     <KlerosCourt />
+    <NavBar />
   </Container>
 );
 
diff --git a/web/src/components/layout/header/NavBar.tsx b/web/src/components/layout/header/navbar/Explore.tsx
similarity index 60%
rename from web/src/components/layout/header/NavBar.tsx
rename to web/src/components/layout/header/navbar/Explore.tsx
index bba1a31d0..89f6a985a 100644
--- a/web/src/components/layout/header/NavBar.tsx
+++ b/web/src/components/layout/header/navbar/Explore.tsx
@@ -2,21 +2,17 @@ import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 
-const Container = styled.nav`
-  position: absolute;
-  width: 100%;
-  background-color: ${({ theme }) => theme.primaryPurple};
-`;
-
-const StyledLink = styled(Link)`
-  color: white;
-`;
+const Container = styled.div``;
 
 const LinkContainer = styled.div`
   min-height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center;
+
+  .sm-link {
+    color: ${({ theme }) => theme.primaryText};
+    text-decoration: none;
+  }
 `;
 
 const links = [
@@ -25,14 +21,17 @@ const links = [
   { to: "/dashboard", text: "Dashboard" },
 ];
 
-const NavBar: React.FC = () => (
+const Explore: React.FC = () => (
   <Container>
+    <h1>Explore</h1>
     {links.map(({ to, text }) => (
       <LinkContainer key={text}>
-        <StyledLink {...{ to }}>{text}</StyledLink>
+        <Link {...{ to }} className="sm-link">
+          {text}
+        </Link>
       </LinkContainer>
     ))}
   </Container>
 );
 
-export default NavBar;
+export default Explore;
diff --git a/web/src/components/layout/header/navbar/Menu.tsx b/web/src/components/layout/header/navbar/Menu.tsx
new file mode 100644
index 000000000..a68640d5c
--- /dev/null
+++ b/web/src/components/layout/header/navbar/Menu.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div``;
+
+const ButtonContainer = styled.div`
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+`;
+
+const StyledButton = styled.button`
+  border: none;
+  background-color: transparent;
+  p {
+    margin: 0;
+  }
+`;
+
+const buttons = [
+  { text: "Notifications", icon: "Cases" },
+  { text: "Settings", icon: "Courts" },
+  { text: "Help", icon: "Dashboard" },
+  { text: "Dark Mode", icon: "Dashboard" },
+];
+
+const Explore: React.FC = () => (
+  <Container>
+    {buttons.map(({ text }) => (
+      <ButtonContainer key={text}>
+        <StyledButton>
+          <p>{text}</p>
+        </StyledButton>
+      </ButtonContainer>
+    ))}
+  </Container>
+);
+
+export default Explore;
diff --git a/web/src/components/layout/header/navbar/index.tsx b/web/src/components/layout/header/navbar/index.tsx
new file mode 100644
index 000000000..8741f4f87
--- /dev/null
+++ b/web/src/components/layout/header/navbar/index.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+import Explore from "./Explore";
+import ConnectButton from "components/ConnectButton";
+import Menu from "./Menu";
+
+const Container = styled.div`
+  position: absolute;
+  top: 64px;
+  left: 0;
+  right: 0;
+  background-color: ${({ theme }) => theme.whiteBackground};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow};
+  padding: 24px;
+
+  hr {
+    margin 24px 0;
+  }
+`;
+
+const NavBar: React.FC = () => (
+  <Container>
+    <hr />
+    <Explore />
+    <hr />
+    <ConnectButton />
+    <hr />
+    <Menu />
+  </Container>
+);
+
+export default NavBar;
diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
index 501475513..2a75d2647 100644
--- a/web/src/styles/global-style.ts
+++ b/web/src/styles/global-style.ts
@@ -18,8 +18,45 @@ export const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 
+  h1 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  h2 {
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  s {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
   hr {
     opacity: 1;
+    border: 1px solid ${({ theme }) => theme.stroke};
   }
 
   svg, img {

From 9fc20631fa8d170285b6e32999c141248dba43cd Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 09:29:33 +0200
Subject: [PATCH 03/17] fix(web): add core-js, fixes build error

---
 web/package.json | 1 +
 yarn.lock        | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/package.json b/web/package.json
index 36e7f9c3c..a98e1a8ae 100644
--- a/web/package.json
+++ b/web/package.json
@@ -47,6 +47,7 @@
   "dependencies": {
     "@kleros/kleros-v2-contracts": "workspace:^",
     "@kleros/ui-components-library": "^0.1.5",
+    "core-js": "^3.21.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
diff --git a/yarn.lock b/yarn.lock
index f5714f030..6bdfeb863 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1744,6 +1744,7 @@ __metadata:
     "@types/styled-components": ^5.1.21
     "@typescript-eslint/eslint-plugin": ^5.10.1
     "@typescript-eslint/parser": ^5.10.1
+    core-js: ^3.21.1
     eslint: ^8.7.0
     eslint-config-prettier: ^8.3.0
     eslint-import-resolver-parcel: ^1.10.6
@@ -7489,7 +7490,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.1":
+"core-js@npm:^3.0.1, core-js@npm:^3.21.1":
   version: 3.21.1
   resolution: "core-js@npm:3.21.1"
   checksum: d68eddd831340ad5b24ac29c72fda022a43b17f194c4278b6b875a843283d316502cb4abd07f28631d6ebc4387f66aa06e2b1b3c8fd7e08096a751b5c63f6889

From ec70476abfecc1146006c295db38bc334b1b5a09 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 19:49:10 +0200
Subject: [PATCH 04/17] fix(web): tsconfig alias paths missing *

---
 web/tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/tsconfig.json b/web/tsconfig.json
index aca7b58e7..9a287c11d 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -20,10 +20,10 @@
       "hooks*": [
         "./src/hooks*"
       ],
-      "pages": [
+      "pages*": [
         "./src/pages*"
       ],
-      "styles": [
+      "styles*": [
         "./src/styles*"
       ],
       "svgs*": [

From 02449d3158cb4af7be8400d02bf5a970f37a6d32 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 19:49:56 +0200
Subject: [PATCH 05/17] feat(web/style): add color to text html tags on global
 style

---
 web/src/styles/global-style.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
index 2a75d2647..59883c12a 100644
--- a/web/src/styles/global-style.ts
+++ b/web/src/styles/global-style.ts
@@ -22,36 +22,42 @@ export const GlobalStyle = createGlobalStyle`
     font-weight: 600;
     font-size: 24px;
     line-height: 32px;
+    color: ${({ theme }) => theme.primaryText};
   }
 
   h2 {
     font-weight: 400;
     font-size: 24px;
     line-height: 32px;
+    color: ${({ theme }) => theme.primaryText};
   }
 
   h3 {
     font-weight: 600;
     font-size: 16px;
     line-height: 24px;
+    color: ${({ theme }) => theme.primaryText};
   }
 
   p {
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
+    color: ${({ theme }) => theme.primaryText};
   }
 
   s {
     font-weight: 600;
     font-size: 14px;
     line-height: 18px;
+    color: ${({ theme }) => theme.primaryText};
   }
 
   label {
     font-weight: 400;
     font-size: 14px;
     line-height: 18px;
+    color: ${({ theme }) => theme.primaryText};
   }
 
   hr {

From 4aa5101b3442dc785c32d71fd8c32be3725699a6 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 19:50:31 +0200
Subject: [PATCH 06/17] feat(web/hooks): add useLocalStorage hook

---
 web/src/hooks/useLocalStorage.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 web/src/hooks/useLocalStorage.ts

diff --git a/web/src/hooks/useLocalStorage.ts b/web/src/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..ae42cadcb
--- /dev/null
+++ b/web/src/hooks/useLocalStorage.ts
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export function useLocalStorage<T>(keyName: string, defaultValue: T) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+      return value ? JSON.parse(value) : defaultValue;
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue: T) => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } finally {
+      setStoredValue(newValue);
+    }
+  };
+
+  return [storedValue, setValue];
+}

From 7d7d6a43f41b4edee8996ac7c33d8ad36dd94a6c Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 19:51:59 +0200
Subject: [PATCH 07/17] feat(web/components): add LightButton

---
 web/src/components/LightButton.tsx | 42 ++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 web/src/components/LightButton.tsx

diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx
new file mode 100644
index 000000000..9ee96b0f2
--- /dev/null
+++ b/web/src/components/LightButton.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "@kleros/ui-components-library";
+
+const StyledButton = styled(Button)`
+  background-color: transparent;
+  padding-left: 0;
+  .button-text {
+    color: ${({ theme }) => theme.primaryText};
+    font-weight: 400;
+  }
+  .button-svg {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+
+  :focus,
+  :hover {
+    background-color: transparent;
+  }
+`;
+
+interface ILightButton {
+  text: string;
+  icon?: (className: string) => React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+}
+
+const LightButton: React.FC<ILightButton> = ({
+  text,
+  icon,
+  onClick,
+  disabled,
+}) => (
+  <StyledButton
+    variant="primary"
+    small
+    {...{ text, icon, onClick, disabled }}
+  />
+);
+
+export default LightButton;

From 2268a9064b77cdf5df3e15918c7c363764c9b009 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 19:53:29 +0200
Subject: [PATCH 08/17] feat(web): add StyledComponentsProvider and
 useToggleThemeContext to ease theming

---
 web/src/app.tsx                               | 27 ++++++++++---------
 .../components/StyledComponentsProvider.tsx   | 24 +++++++++++++++++
 web/src/hooks/useToggleThemeContext.tsx       | 18 +++++++++++++
 web/src/index.tsx                             |  8 +-----
 4 files changed, 58 insertions(+), 19 deletions(-)
 create mode 100644 web/src/components/StyledComponentsProvider.tsx
 create mode 100644 web/src/hooks/useToggleThemeContext.tsx

diff --git a/web/src/app.tsx b/web/src/app.tsx
index 2d9d69752..f3fa93d6a 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -1,21 +1,24 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
+import StyledComponentsProvider from "components/StyledComponentsProvider";
 import Layout from "components/layout";
 import Home from "./pages/home";
 
 const App: React.FC = () => (
-  <Routes>
-    <Route path="/" element={<Layout />}>
-      <Route index element={<Home />} />
-      <Route path="cases" element={<h1>Cases</h1>} />
-      <Route path="courts" element={<h1>Courts</h1>} />
-      <Route path="dashboard" element={<h1>Dashboard</h1>} />
-      <Route
-        path="*"
-        element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
-      />
-    </Route>
-  </Routes>
+  <StyledComponentsProvider>
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<Home />} />
+        <Route path="cases" element={<h1>Cases</h1>} />
+        <Route path="courts" element={<h1>Courts</h1>} />
+        <Route path="dashboard" element={<h1>Dashboard</h1>} />
+        <Route
+          path="*"
+          element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
+        />
+      </Route>
+    </Routes>
+  </StyledComponentsProvider>
 );
 
 export default App;
diff --git a/web/src/components/StyledComponentsProvider.tsx b/web/src/components/StyledComponentsProvider.tsx
new file mode 100644
index 000000000..3c6a6697b
--- /dev/null
+++ b/web/src/components/StyledComponentsProvider.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
+import { GlobalStyle } from "styles/global-style";
+import { lightTheme, darkTheme } from "styles/themes";
+
+const StyledComponentsProvider: React.FC = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage<string>("theme", "light");
+  const toggleTheme = () => {
+    if (theme === "light") setTheme("dark");
+    else setTheme("light");
+  };
+  return (
+    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
+      <ToggleThemeProvider {...{ theme, toggleTheme }}>
+        <GlobalStyle />
+        {children}
+      </ToggleThemeProvider>
+    </ThemeProvider>
+  );
+};
+
+export default StyledComponentsProvider;
diff --git a/web/src/hooks/useToggleThemeContext.tsx b/web/src/hooks/useToggleThemeContext.tsx
new file mode 100644
index 000000000..5a8f5a717
--- /dev/null
+++ b/web/src/hooks/useToggleThemeContext.tsx
@@ -0,0 +1,18 @@
+import React, { createContext, useContext } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const Context = createContext<[string, () => void]>(["light", () => {}]);
+
+export const ToggleThemeProvider: React.FC<{
+  theme: string;
+  toggleTheme: () => void;
+}> = ({ theme, toggleTheme, children }) => {
+  return (
+    <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>
+  );
+};
+
+export const useToggleTheme: () => [string, () => void] = () => {
+  const toggleTheme = useContext(Context);
+  return toggleTheme;
+};
diff --git a/web/src/index.tsx b/web/src/index.tsx
index fdb34fb7e..8df4286f8 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,8 +1,5 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "styled-components";
-import { GlobalStyle } from "./styles/global-style";
-import { lightTheme } from "./styles/themes";
 import App from "./app";
 import { HashRouter as Router } from "react-router-dom";
 
@@ -11,10 +8,7 @@ const root = createRoot(container!);
 root.render(
   <React.StrictMode>
     <Router>
-      <ThemeProvider theme={lightTheme}>
-        <GlobalStyle />
-        <App />
-      </ThemeProvider>
+      <App />
     </Router>
   </React.StrictMode>
 );

From fed81038618264ee436fea721a968fbf53c2e56b Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Mon, 11 Apr 2022 19:53:59 +0200
Subject: [PATCH 09/17] feat(web): add navbar menu icons and implement theme
 switch

---
 web/src/assets/svgs/menu-icons/dark-mode.svg  |  3 +
 web/src/assets/svgs/menu-icons/help.svg       |  3 +
 web/src/assets/svgs/menu-icons/light-mode.svg |  3 +
 .../assets/svgs/menu-icons/notifications.svg  |  3 +
 web/src/assets/svgs/menu-icons/settings.svg   |  3 +
 .../components/layout/header/navbar/Menu.tsx  | 58 +++++++++++--------
 6 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 web/src/assets/svgs/menu-icons/dark-mode.svg
 create mode 100644 web/src/assets/svgs/menu-icons/help.svg
 create mode 100644 web/src/assets/svgs/menu-icons/light-mode.svg
 create mode 100644 web/src/assets/svgs/menu-icons/notifications.svg
 create mode 100644 web/src/assets/svgs/menu-icons/settings.svg

diff --git a/web/src/assets/svgs/menu-icons/dark-mode.svg b/web/src/assets/svgs/menu-icons/dark-mode.svg
new file mode 100644
index 000000000..c3f24c6fc
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/dark-mode.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16C10.4676 16 12.7212 14.8773 14.2143 13.0378C14.4352 12.7656 14.1943 12.3681 13.853 12.4331C9.97163 13.1722 6.40728 10.1963 6.40728 6.27825C6.40728 4.02131 7.61547 1.94591 9.57909 0.828438C9.88178 0.656188 9.80566 0.197281 9.46172 0.13375C8.97956 0.0448416 8.49029 7.30105e-05 8 0C3.58409 0 0 3.57847 0 8C0 12.4159 3.57847 16 8 16Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/help.svg b/web/src/assets/svgs/menu-icons/help.svg
new file mode 100644
index 000000000..0d0b1f793
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/help.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.58203 0 0 3.58332 0 8C0 12.4193 3.58203 16 8 16C12.418 16 16 12.4193 16 8C16 3.58332 12.418 0 8 0ZM8 14.4516C4.43445 14.4516 1.54839 11.5667 1.54839 8C1.54839 4.43564 4.43458 1.54839 8 1.54839C11.5642 1.54839 14.4516 4.43455 14.4516 8C14.4516 11.5655 11.5667 14.4516 8 14.4516ZM11.4595 6.21935C11.4595 8.38232 9.12332 8.41561 9.12332 9.21494V9.41935C9.12332 9.63313 8.95 9.80645 8.73623 9.80645H7.26374C7.04997 9.80645 6.87664 9.63313 6.87664 9.41935V9.14003C6.87664 7.98697 7.75084 7.52603 8.41145 7.15564C8.97794 6.83806 9.32513 6.62206 9.32513 6.20148C9.32513 5.64516 8.61548 5.2759 8.04177 5.2759C7.29374 5.2759 6.94842 5.63 6.463 6.24265C6.33213 6.40781 6.09332 6.43848 5.92539 6.31116L5.02784 5.63058C4.8631 5.50568 4.82619 5.27361 4.94255 5.10274C5.70471 3.98358 6.67548 3.35484 8.1869 3.35484C9.76984 3.35484 11.4595 4.59045 11.4595 6.21935V6.21935ZM9.35484 11.6129C9.35484 12.36 8.74706 12.9677 8 12.9677C7.25294 12.9677 6.64516 12.36 6.64516 11.6129C6.64516 10.8658 7.25294 10.2581 8 10.2581C8.74706 10.2581 9.35484 10.8658 9.35484 11.6129Z" fill="#9013FE"/>
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/light-mode.svg b/web/src/assets/svgs/menu-icons/light-mode.svg
new file mode 100644
index 000000000..1254dbf4f
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/light-mode.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.76855 5C7.11543 5 5.76855 6.34688 5.76855 8C5.76855 9.65312 7.11543 11 8.76855 11C10.4217 11 11.7686 9.65312 11.7686 8C11.7686 6.34688 10.4217 5 8.76855 5ZM16.4686 7.51562L13.5092 6.0375L14.5561 2.9C14.6967 2.475 14.2936 2.07188 13.8717 2.21563L10.7342 3.2625L9.25293 0.3C9.05293 -0.1 8.48418 -0.1 8.28418 0.3L6.80605 3.25938L3.66543 2.2125C3.24043 2.07188 2.8373 2.475 2.98105 2.89687L4.02793 6.03438L1.06855 7.51562C0.668555 7.71562 0.668555 8.28438 1.06855 8.48438L4.02793 9.9625L2.98105 13.1031C2.84043 13.5281 3.24355 13.9313 3.66543 13.7875L6.80293 12.7406L8.28105 15.7C8.48105 16.1 9.0498 16.1 9.2498 15.7L10.7279 12.7406L13.8654 13.7875C14.2904 13.9281 14.6936 13.525 14.5498 13.1031L13.5029 9.96562L16.4623 8.4875C16.8686 8.28438 16.8686 7.71562 16.4686 7.51562ZM11.5967 10.8281C10.0373 12.3875 7.4998 12.3875 5.94043 10.8281C4.38105 9.26875 4.38105 6.73125 5.94043 5.17188C7.4998 3.6125 10.0373 3.6125 11.5967 5.17188C13.1561 6.73125 13.1561 9.26875 11.5967 10.8281Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/notifications.svg b/web/src/assets/svgs/menu-icons/notifications.svg
new file mode 100644
index 000000000..cf0055939
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/notifications.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6807 11.3216C13.0791 10.6728 11.9536 9.69687 11.9536 6.5C11.9536 4.07188 10.2573 2.12812 7.97009 1.65125V1C7.97009 0.447812 7.52423 0 6.97437 0C6.42452 0 5.97866 0.447812 5.97866 1V1.65125C3.69145 2.12812 1.99518 4.07188 1.99518 6.5C1.99518 9.69687 0.869636 10.6728 0.268098 11.3216C0.0812852 11.5231 -0.00153525 11.7641 2.15267e-05 12C0.00344643 12.5125 0.40416 13 0.999471 13H12.9493C13.5446 13 13.9456 12.5125 13.9487 12C13.9503 11.7641 13.8675 11.5228 13.6807 11.3216ZM2.1026 11.5C2.7633 10.6259 3.48564 9.17719 3.48907 6.51813C3.48907 6.51188 3.4872 6.50625 3.4872 6.5C3.4872 4.56687 5.04833 3 6.97437 3C8.90042 3 10.4616 4.56687 10.4616 6.5C10.4616 6.50625 10.4597 6.51188 10.4597 6.51813C10.4631 9.1775 11.1855 10.6263 11.8461 11.5H2.1026ZM6.97437 16C8.07408 16 8.96611 15.1047 8.96611 14H4.98264C4.98264 15.1047 5.87467 16 6.97437 16Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/settings.svg b/web/src/assets/svgs/menu-icons/settings.svg
new file mode 100644
index 000000000..cfa76e6b3
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/settings.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1211 9.92257L13.7469 9.12903C13.8856 8.38064 13.8856 7.6129 13.7469 6.86452L15.1211 6.07097C15.2792 5.98065 15.3501 5.79356 15.2985 5.61936C14.9405 4.47098 14.3308 3.43228 13.534 2.56776C13.4114 2.4355 13.2114 2.40325 13.0566 2.49357L11.6824 3.28711C11.105 2.79034 10.4405 2.40647 9.72113 2.15486V0.570996C9.72113 0.390351 9.59532 0.232287 9.4179 0.193578C8.23404 -0.0709372 7.02114 -0.0580341 5.89534 0.193578C5.71792 0.232287 5.59211 0.390351 5.59211 0.570996V2.15809C4.87598 2.41292 4.21147 2.79679 3.63083 3.29034L2.25987 2.49679C2.1018 2.40647 1.90503 2.4355 1.78245 2.57099C0.985677 3.43228 0.376002 4.47098 0.0179393 5.62259C-0.0368992 5.79678 0.037294 5.98388 0.195358 6.0742L1.56955 6.86775C1.43084 7.61613 1.43084 8.38387 1.56955 9.13225L0.195358 9.9258C0.037294 10.0161 -0.0336734 10.2032 0.0179393 10.3774C0.376002 11.5258 0.985677 12.5645 1.78245 13.429C1.90503 13.5613 2.10503 13.5935 2.25987 13.5032L3.63405 12.7097C4.21147 13.2064 4.87599 13.5903 5.59534 13.8419V15.429C5.59534 15.6096 5.72114 15.7677 5.89856 15.8064C7.08243 16.0709 8.29533 16.058 9.42113 15.8064C9.59855 15.7677 9.72435 15.6096 9.72435 15.429V13.8419C10.4405 13.5871 11.105 13.2032 11.6856 12.7097L13.0598 13.5032C13.2179 13.5935 13.4147 13.5645 13.5372 13.429C14.334 12.5677 14.9437 11.529 15.3017 10.3774C15.3501 10.2 15.2792 10.0129 15.1211 9.92257ZM7.65662 10.5774C6.23404 10.5774 5.07598 9.41935 5.07598 7.99677C5.07598 6.5742 6.23404 5.41614 7.65662 5.41614C9.07919 5.41614 10.2373 6.5742 10.2373 7.99677C10.2373 9.41935 9.07919 10.5774 7.65662 10.5774Z" fill="#9013FE"/>
+</svg>
diff --git a/web/src/components/layout/header/navbar/Menu.tsx b/web/src/components/layout/header/navbar/Menu.tsx
index a68640d5c..d3d5ce337 100644
--- a/web/src/components/layout/header/navbar/Menu.tsx
+++ b/web/src/components/layout/header/navbar/Menu.tsx
@@ -1,5 +1,12 @@
 import React from "react";
 import styled from "styled-components";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
+import LightButton from "components/LightButton";
+import NotificationsIcon from "svgs/menu-icons/notifications.svg";
+import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
+import LightModeIcon from "svgs/menu-icons/light-mode.svg";
+import HelpIcon from "svgs/menu-icons/help.svg";
+import SettingsIcon from "svgs/menu-icons/settings.svg";
 
 const Container = styled.div``;
 
@@ -9,31 +16,32 @@ const ButtonContainer = styled.div`
   align-items: center;
 `;
 
-const StyledButton = styled.button`
-  border: none;
-  background-color: transparent;
-  p {
-    margin: 0;
-  }
-`;
-
-const buttons = [
-  { text: "Notifications", icon: "Cases" },
-  { text: "Settings", icon: "Courts" },
-  { text: "Help", icon: "Dashboard" },
-  { text: "Dark Mode", icon: "Dashboard" },
-];
+const Explore: React.FC = () => {
+  const [theme, toggleTheme] = useToggleTheme();
+  const isLightTheme = theme === "light";
+  const buttons = [
+    { text: "Notifications", icon: NotificationsIcon },
+    { text: "Settings", icon: SettingsIcon },
+    { text: "Help", icon: HelpIcon },
+    {
+      text: `${isLightTheme ? "Dark" : "Light"} Mode`,
+      icon: isLightTheme ? DarkModeIcon : LightModeIcon,
+      onClick: () => toggleTheme(),
+    },
+  ];
 
-const Explore: React.FC = () => (
-  <Container>
-    {buttons.map(({ text }) => (
-      <ButtonContainer key={text}>
-        <StyledButton>
-          <p>{text}</p>
-        </StyledButton>
-      </ButtonContainer>
-    ))}
-  </Container>
-);
+  return (
+    <Container>
+      {buttons.map(({ text, icon: Icon, onClick }) => (
+        <ButtonContainer key={text}>
+          <LightButton
+            {...{ text, onClick }}
+            icon={(className: string) => <Icon {...{ className }} />}
+          />
+        </ButtonContainer>
+      ))}
+    </Container>
+  );
+};
 
 export default Explore;

From 1a9e301cdafc3e75eb70f6cc1d769fc156a095e5 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Tue, 12 Apr 2022 15:26:12 +0200
Subject: [PATCH 10/17] feat(web): add useFocusOutside

---
 web/src/hooks/useFocusOutside.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 web/src/hooks/useFocusOutside.ts

diff --git a/web/src/hooks/useFocusOutside.ts b/web/src/hooks/useFocusOutside.ts
new file mode 100644
index 000000000..0723908f5
--- /dev/null
+++ b/web/src/hooks/useFocusOutside.ts
@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+
+export function useFocusOutside(
+  ref: React.RefObject<HTMLDivElement>,
+  callback: () => void
+) {
+  useEffect(() => {
+    function handleEvent(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    }
+
+    document.addEventListener("focusin", handleEvent);
+    document.addEventListener("mousedown", handleEvent);
+    return () => {
+      document.removeEventListener("focusin", handleEvent);
+      document.removeEventListener("mousedown", handleEvent);
+    };
+  }, [ref, callback]);
+}

From 0fb5930c0321e87c574e20107cae9827803a1181 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Tue, 12 Apr 2022 15:27:22 +0200
Subject: [PATCH 11/17] feat(web): add className prop to LightButton

---
 web/src/components/LightButton.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx
index 9ee96b0f2..0731dce05 100644
--- a/web/src/components/LightButton.tsx
+++ b/web/src/components/LightButton.tsx
@@ -24,6 +24,7 @@ interface ILightButton {
   icon?: (className: string) => React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
+  className?: string;
 }
 
 const LightButton: React.FC<ILightButton> = ({
@@ -31,11 +32,12 @@ const LightButton: React.FC<ILightButton> = ({
   icon,
   onClick,
   disabled,
+  className,
 }) => (
   <StyledButton
     variant="primary"
     small
-    {...{ text, icon, onClick, disabled }}
+    {...{ text, icon, onClick, disabled, className }}
   />
 );
 

From c233024ca80dc51b610d370291e56926e09ec617 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Tue, 12 Apr 2022 15:28:37 +0200
Subject: [PATCH 12/17] fix(web): change width and height to 100% (from
 100vh/vw)

---
 web/src/components/layout/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/layout/index.tsx b/web/src/components/layout/index.tsx
index b190b4943..945abc979 100644
--- a/web/src/components/layout/index.tsx
+++ b/web/src/components/layout/index.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import styled from "styled-components";
+import { Outlet } from "react-router-dom";
 import Header from "./header";
 import Footer from "./footer";
-import { Outlet } from "react-router-dom";
 
 const Container = styled.div`
-  height: 100vh;
-  width: 100vw;
+  min-height: 100%;
+  width: 100%;
 `;
 
 const Layout: React.FC = () => (

From ac44bc219dd75cc66981f0d7f4f476dac9a881f4 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Tue, 12 Apr 2022 15:29:27 +0200
Subject: [PATCH 13/17] feat(web): make menu collapsible

---
 web/src/assets/svgs/header/hamburger.svg      |  3 ++
 web/src/components/layout/header/index.tsx    | 39 +++++++++++++++----
 .../components/layout/header/navbar/Menu.tsx  |  1 +
 .../components/layout/header/navbar/index.tsx | 16 ++++++--
 4 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 web/src/assets/svgs/header/hamburger.svg

diff --git a/web/src/assets/svgs/header/hamburger.svg b/web/src/assets/svgs/header/hamburger.svg
new file mode 100644
index 000000000..a3672cbe4
--- /dev/null
+++ b/web/src/assets/svgs/header/hamburger.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.571429 3.29169H15.4286C15.7442 3.29169 16 3.03054 16 2.70835V1.25002C16 0.927838 15.7442 0.666687 15.4286 0.666687H0.571429C0.255821 0.666687 0 0.927838 0 1.25002V2.70835C0 3.03054 0.255821 3.29169 0.571429 3.29169ZM0.571429 9.12502H15.4286C15.7442 9.12502 16 8.86387 16 8.54169V7.08335C16 6.76117 15.7442 6.50002 15.4286 6.50002H0.571429C0.255821 6.50002 0 6.76117 0 7.08335V8.54169C0 8.86387 0.255821 9.12502 0.571429 9.12502ZM0.571429 14.9584H15.4286C15.7442 14.9584 16 14.6972 16 14.375V12.9167C16 12.5945 15.7442 12.3334 15.4286 12.3334H0.571429C0.255821 12.3334 0 12.5945 0 12.9167V14.375C0 14.6972 0.255821 14.9584 0.571429 14.9584Z" fill="white"/>
+</svg>
diff --git a/web/src/components/layout/header/index.tsx b/web/src/components/layout/header/index.tsx
index 58b7ccb2b..412e24a68 100644
--- a/web/src/components/layout/header/index.tsx
+++ b/web/src/components/layout/header/index.tsx
@@ -1,23 +1,46 @@
-import React from "react";
+import React, { useState, useRef } from "react";
 import styled from "styled-components";
+import HamburgerIcon from "svgs/header/hamburger.svg";
+import { useFocusOutside } from "hooks/useFocusOutside";
+import LightButton from "components/LightButton";
 import KlerosCourt from "./KlerosCourt";
 import NavBar from "./navbar";
 
 const Container = styled.div`
-  height: 64px;
+  position: sticky;
+  top: 0;
   width: 100vw;
+  height: 64px;
   background-color: ${({ theme }) => theme.primaryPurple};
+
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 
-const Header: React.FC = () => (
-  <Container>
-    <KlerosCourt />
-    <NavBar />
-  </Container>
-);
+const StyledLightButton = styled(LightButton)`
+  padding-right: 0;
+`;
+
+const Header: React.FC = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const containerRef = useRef(null);
+  useFocusOutside(containerRef, () => setIsOpen(false));
+  return (
+    <Container>
+      <KlerosCourt />
+      <div ref={containerRef}>
+        <NavBar {...{ isOpen }} />
+        <StyledLightButton
+          text=""
+          icon={(className: string) => <HamburgerIcon {...{ className }} />}
+          onClick={toggleIsOpen}
+        />
+      </div>
+    </Container>
+  );
+};
 
 export default Header;
diff --git a/web/src/components/layout/header/navbar/Menu.tsx b/web/src/components/layout/header/navbar/Menu.tsx
index d3d5ce337..445cc2367 100644
--- a/web/src/components/layout/header/navbar/Menu.tsx
+++ b/web/src/components/layout/header/navbar/Menu.tsx
@@ -12,6 +12,7 @@ const Container = styled.div``;
 
 const ButtonContainer = styled.div`
   min-height: 32px;
+
   display: flex;
   align-items: center;
 `;
diff --git a/web/src/components/layout/header/navbar/index.tsx b/web/src/components/layout/header/navbar/index.tsx
index 8741f4f87..713ceaed0 100644
--- a/web/src/components/layout/header/navbar/index.tsx
+++ b/web/src/components/layout/header/navbar/index.tsx
@@ -4,14 +4,23 @@ import Explore from "./Explore";
 import ConnectButton from "components/ConnectButton";
 import Menu from "./Menu";
 
-const Container = styled.div`
+const Container = styled.div<{ isOpen: boolean }>`
   position: absolute;
   top: 64px;
   left: 0;
   right: 0;
+  z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
   border: 1px solid ${({ theme }) => theme.stroke};
   box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow};
+
+  transform-origin: top;
+  transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")});
+  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+  transition-property: transform, visibility;
+  transition-duration: ${({ theme }) => theme.transitionSpeed};
+  transition-timing-function: ease;
+
   padding: 24px;
 
   hr {
@@ -19,8 +28,9 @@ const Container = styled.div`
   }
 `;
 
-const NavBar: React.FC = () => (
-  <Container>
+const NavBar: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (
+  <Container {...{ isOpen }}>
+    <p>Kleros solutions</p>
     <hr />
     <Explore />
     <hr />

From e5dbd75439b70e26444e786f2d389488051c8067 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Tue, 19 Apr 2022 13:09:56 +0200
Subject: [PATCH 14/17] chore(yarn.lock): update yarn.lock

---
 yarn.lock | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 7b09803bf..46625e631 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1730,25 +1730,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^0.1.3":
-  version: 0.1.5
-  resolution: "@kleros/ui-components-library@npm:0.1.5"
-  dependencies:
-    "@datepicker-react/hooks": ^2.8.4
-    "@swc/helpers": ^0.3.2
-    rc-slider: ^9.7.5
-    react: ^18.0.0
-    react-dom: ^18.0.0
-    react-is: ^18.0.0
-    simplebar: ^5.3.6
-    simplebar-react: ^2.3.6
-  peerDependencies:
-    styled-components: ^5.3.3
-  checksum: efc74789760b7823aafd4c7c2341feca01eda1a2093839ae6455f8a724606974e202e8714de06f3432759321b0e509432d3d80170eb04dd198c04da24e1f7b42
-  languageName: node
-  linkType: hard
-
-"@kleros/ui-components-library@npm:^0.1.5":
+"@kleros/ui-components-library@npm:^0.1.3, @kleros/ui-components-library@npm:^0.1.5":
   version: 0.1.5
   resolution: "@kleros/ui-components-library@npm:0.1.5"
   dependencies:

From 9dcc2d24ac8c536d41eb5946f96a655d2f44b62e Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Tue, 19 Apr 2022 13:50:41 +0200
Subject: [PATCH 15/17] feat(web/header): add kleros solutions icon

---
 web/src/assets/svgs/menu-icons/kleros-solutions.svg | 3 +++
 web/src/components/layout/header/navbar/index.tsx   | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 web/src/assets/svgs/menu-icons/kleros-solutions.svg

diff --git a/web/src/assets/svgs/menu-icons/kleros-solutions.svg b/web/src/assets/svgs/menu-icons/kleros-solutions.svg
new file mode 100644
index 000000000..0e5cdf722
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/kleros-solutions.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM4 7C4 8.10457 3.10457 9 2 9C0.895431 9 0 8.10457 0 7C0 5.89543 0.895431 5 2 5C3.10457 5 4 5.89543 4 7ZM2 14C3.10457 14 4 13.1046 4 12C4 10.8954 3.10457 10 2 10C0.895431 10 0 10.8954 0 12C0 13.1046 0.895431 14 2 14ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9C9.10457 9 10 8.10457 10 7C10 5.89543 9.10457 5 8 5C6.89543 5 6 5.89543 6 7C6 8.10457 6.89543 9 8 9ZM10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12C6 10.8954 6.89543 10 8 10C9.10457 10 10 10.8954 10 12ZM14 4C15.1046 4 16 3.10457 16 2C16 0.895431 15.1046 0 14 0C12.8954 0 12 0.895431 12 2C12 3.10457 12.8954 4 14 4ZM16 7C16 8.10457 15.1046 9 14 9C12.8954 9 12 8.10457 12 7C12 5.89543 12.8954 5 14 5C15.1046 5 16 5.89543 16 7ZM14 14C15.1046 14 16 13.1046 16 12C16 10.8954 15.1046 10 14 10C12.8954 10 12 10.8954 12 12C12 13.1046 12.8954 14 14 14Z" />
+</svg>
diff --git a/web/src/components/layout/header/navbar/index.tsx b/web/src/components/layout/header/navbar/index.tsx
index 713ceaed0..26a05d131 100644
--- a/web/src/components/layout/header/navbar/index.tsx
+++ b/web/src/components/layout/header/navbar/index.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import styled from "styled-components";
+import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
+import LightButton from "components/LightButton";
 import Explore from "./Explore";
 import ConnectButton from "components/ConnectButton";
 import Menu from "./Menu";
@@ -30,7 +32,10 @@ const Container = styled.div<{ isOpen: boolean }>`
 
 const NavBar: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (
   <Container {...{ isOpen }}>
-    <p>Kleros solutions</p>
+    <LightButton
+      text="Kleros Solutions"
+      icon={(className) => <KlerosSolutionsIcon {...{ className }} />}
+    />
     <hr />
     <Explore />
     <hr />

From d5747dc8775672a98ddeec818e9841bdaf65dd1c Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Thu, 21 Apr 2022 11:21:26 +0200
Subject: [PATCH 16/17] chore(web): add socialmedia links

---
 web/src/consts/socialmedia.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/consts/socialmedia.tsx b/web/src/consts/socialmedia.tsx
index 6b5cd07e0..bd6ffebb7 100644
--- a/web/src/consts/socialmedia.tsx
+++ b/web/src/consts/socialmedia.tsx
@@ -16,34 +16,34 @@ export const socialmedia = {
   },
   github: {
     icon: <GithubLogo />,
-    url: "",
+    url: "https://github.com/kleros",
   },
   snapshot: {
     icon: <SnapshotLogo />,
-    url: "",
+    url: "https://snapshot.org/#/kleros.eth",
   },
   discord: {
     icon: <DiscordLogo />,
-    url: "",
+    url: "https://discord.com/invite/MhXQGCyHd9",
   },
   twitter: {
     icon: <TwitterLogo />,
-    url: "",
+    url: "https://twitter.com/kleros_io",
   },
   reddit: {
     icon: <RedditLogo />,
-    url: "",
+    url: "https://www.reddit.com/r/Kleros/",
   },
   telegram: {
     icon: <TelegramLogo />,
-    url: "",
+    url: "https://t.me/kleros",
   },
   ghost: {
     icon: <GhostBlogLogo />,
-    url: "",
+    url: "https://blog.kleros.io/",
   },
   linkedin: {
     icon: <LinkedinLogo />,
-    url: "",
+    url: "https://www.linkedin.com/company/kleros/",
   },
 };

From b021335dedd08c9d0b0e43b0dafbaeac69aa6af3 Mon Sep 17 00:00:00 2001
From: alcercu <alcercu@alumni.upv.es>
Date: Thu, 21 Apr 2022 11:25:24 +0200
Subject: [PATCH 17/17] refactor(web): simplify directory structure

---
 web/package.json                              |  2 +
 web/src/app.tsx                               |  4 +-
 .../layout/footer/SecuredByKleros.tsx         | 15 -----
 .../components/layout/footer/SocialMedia.tsx  | 25 --------
 web/src/components/layout/footer/index.tsx    | 24 --------
 .../components/layout/header/KlerosCourt.tsx  | 16 -----
 .../StyledComponentsProvider.tsx              |  0
 web/src/layout/footer/index.tsx               | 59 +++++++++++++++++++
 .../{components => }/layout/header/index.tsx  | 11 +++-
 .../layout/header/navbar/Explore.tsx          |  0
 .../layout/header/navbar/Menu.tsx             |  0
 .../layout/header/navbar/index.tsx            |  0
 web/src/{components => }/layout/index.tsx     |  0
 web/tsconfig.json                             |  6 ++
 14 files changed, 78 insertions(+), 84 deletions(-)
 delete mode 100644 web/src/components/layout/footer/SecuredByKleros.tsx
 delete mode 100644 web/src/components/layout/footer/SocialMedia.tsx
 delete mode 100644 web/src/components/layout/footer/index.tsx
 delete mode 100644 web/src/components/layout/header/KlerosCourt.tsx
 rename web/src/{components => context}/StyledComponentsProvider.tsx (100%)
 create mode 100644 web/src/layout/footer/index.tsx
 rename web/src/{components => }/layout/header/index.tsx (82%)
 rename web/src/{components => }/layout/header/navbar/Explore.tsx (100%)
 rename web/src/{components => }/layout/header/navbar/Menu.tsx (100%)
 rename web/src/{components => }/layout/header/navbar/index.tsx (100%)
 rename web/src/{components => }/layout/index.tsx (100%)

diff --git a/web/package.json b/web/package.json
index 005d40830..ac18d1f46 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,8 @@
     "src": "./src",
     "assets": "./src/assets",
     "components": "./src/components",
+    "context": "./src/context",
+    "layout": "./src/layout",
     "consts": "./src/consts",
     "hooks": "./src/hooks",
     "pages": "./src/pages",
diff --git a/web/src/app.tsx b/web/src/app.tsx
index f3fa93d6a..4a771358d 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
-import StyledComponentsProvider from "components/StyledComponentsProvider";
-import Layout from "components/layout";
+import StyledComponentsProvider from "context/StyledComponentsProvider";
+import Layout from "layout/index";
 import Home from "./pages/home";
 
 const App: React.FC = () => (
diff --git a/web/src/components/layout/footer/SecuredByKleros.tsx b/web/src/components/layout/footer/SecuredByKleros.tsx
deleted file mode 100644
index f5d624e37..000000000
--- a/web/src/components/layout/footer/SecuredByKleros.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
-
-const StyledLink = styled.a`
-  min-height: 24px;
-`;
-
-const SecuredByKleros: React.FC = () => (
-  <StyledLink href="https://kleros.io" target="_blank" rel="noopener">
-    <SecuredByKlerosLogo />
-  </StyledLink>
-);
-
-export default SecuredByKleros;
diff --git a/web/src/components/layout/footer/SocialMedia.tsx b/web/src/components/layout/footer/SocialMedia.tsx
deleted file mode 100644
index d535a4d50..000000000
--- a/web/src/components/layout/footer/SocialMedia.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { socialmedia } from "src/consts/socialmedia";
-
-const Container = styled.div`
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-`;
-
-const StyledLink = styled.a`
-  display: inline-block;
-`;
-
-const SocialMedia = () => (
-  <Container>
-    {Object.values(socialmedia).map((site, i) => (
-      <StyledLink key={i} href={site.url} target="_blank" rel="noopener">
-        {site.icon}
-      </StyledLink>
-    ))}
-  </Container>
-);
-
-export default SocialMedia;
diff --git a/web/src/components/layout/footer/index.tsx b/web/src/components/layout/footer/index.tsx
deleted file mode 100644
index 1e4a99b35..000000000
--- a/web/src/components/layout/footer/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import SecuredByKleros from "./SecuredByKleros";
-import SocialMedia from "./SocialMedia";
-
-const Container = styled.div`
-  height: 80px;
-  width: 100vw;
-  background-color: ${({ theme }) => theme.primaryPurple};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-`;
-
-const Footer: React.FC = () => (
-  <Container>
-    <SecuredByKleros />
-    <SocialMedia />
-  </Container>
-);
-
-export default Footer;
diff --git a/web/src/components/layout/header/KlerosCourt.tsx b/web/src/components/layout/header/KlerosCourt.tsx
deleted file mode 100644
index 829d1fda2..000000000
--- a/web/src/components/layout/header/KlerosCourt.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
-const KlerosCourt: React.FC = () => (
-  <StyledLink to={"/"}>
-    <KlerosCourtLogo />
-  </StyledLink>
-);
-
-export default KlerosCourt;
diff --git a/web/src/components/StyledComponentsProvider.tsx b/web/src/context/StyledComponentsProvider.tsx
similarity index 100%
rename from web/src/components/StyledComponentsProvider.tsx
rename to web/src/context/StyledComponentsProvider.tsx
diff --git a/web/src/layout/footer/index.tsx b/web/src/layout/footer/index.tsx
new file mode 100644
index 000000000..1ace8e04a
--- /dev/null
+++ b/web/src/layout/footer/index.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "styled-components";
+import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
+import { socialmedia } from "consts/socialmedia";
+
+const Container = styled.div`
+  height: 80px;
+  width: 100vw;
+  background-color: ${({ theme }) => theme.primaryPurple};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
+  .secured-by-kleros {
+    min-height: 24px;
+  }
+
+  .socialmedia {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+
+    a {
+      display: inline-block;
+    }
+  }
+`;
+
+const SecuredByKleros: React.FC = () => (
+  <a
+    className="secured-by-kleros"
+    href="https://kleros.io"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <SecuredByKlerosLogo />
+  </a>
+);
+
+const SocialMedia = () => (
+  <div className="socialmedia">
+    {Object.values(socialmedia).map((site, i) => (
+      <a key={i} href={site.url} target="_blank" rel="noreferrer">
+        {site.icon}
+      </a>
+    ))}
+  </div>
+);
+
+const Footer: React.FC = () => (
+  <Container>
+    <SecuredByKleros />
+    <SocialMedia />
+  </Container>
+);
+
+export default Footer;
diff --git a/web/src/components/layout/header/index.tsx b/web/src/layout/header/index.tsx
similarity index 82%
rename from web/src/components/layout/header/index.tsx
rename to web/src/layout/header/index.tsx
index 412e24a68..2aa392d3f 100644
--- a/web/src/components/layout/header/index.tsx
+++ b/web/src/layout/header/index.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useRef } from "react";
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 import HamburgerIcon from "svgs/header/hamburger.svg";
+import KlerosCourtLogo from "svgs/header/kleros-court.svg";
 import { useFocusOutside } from "hooks/useFocusOutside";
 import LightButton from "components/LightButton";
-import KlerosCourt from "./KlerosCourt";
 import NavBar from "./navbar";
 
 const Container = styled.div`
@@ -17,6 +18,10 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  .kleros-court-link {
+    min-height: 48px;
+  }
 `;
 
 const StyledLightButton = styled(LightButton)`
@@ -30,7 +35,9 @@ const Header: React.FC = () => {
   useFocusOutside(containerRef, () => setIsOpen(false));
   return (
     <Container>
-      <KlerosCourt />
+      <Link className="kleros-court-link" to={"/"}>
+        <KlerosCourtLogo />
+      </Link>
       <div ref={containerRef}>
         <NavBar {...{ isOpen }} />
         <StyledLightButton
diff --git a/web/src/components/layout/header/navbar/Explore.tsx b/web/src/layout/header/navbar/Explore.tsx
similarity index 100%
rename from web/src/components/layout/header/navbar/Explore.tsx
rename to web/src/layout/header/navbar/Explore.tsx
diff --git a/web/src/components/layout/header/navbar/Menu.tsx b/web/src/layout/header/navbar/Menu.tsx
similarity index 100%
rename from web/src/components/layout/header/navbar/Menu.tsx
rename to web/src/layout/header/navbar/Menu.tsx
diff --git a/web/src/components/layout/header/navbar/index.tsx b/web/src/layout/header/navbar/index.tsx
similarity index 100%
rename from web/src/components/layout/header/navbar/index.tsx
rename to web/src/layout/header/navbar/index.tsx
diff --git a/web/src/components/layout/index.tsx b/web/src/layout/index.tsx
similarity index 100%
rename from web/src/components/layout/index.tsx
rename to web/src/layout/index.tsx
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 9a287c11d..183d82f58 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -14,6 +14,12 @@
       "components*": [
         "./src/components*"
       ],
+      "context*": [
+        "./src/context*"
+      ],
+      "layout*": [
+        "./src/layout*"
+      ],
       "consts*": [
         "./src/consts*"
       ],