Merge pull request #70 from kleros/feat/add-header

Feat: Add header

Author: alcercu

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",
@@ -47,7 +49,8 @@
   },
   "dependencies": {
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^0.1.3",
+    "@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",

web/src/app.tsx

@@ -1,21 +1,24 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
-import Layout from "components/layout";
+import StyledComponentsProvider from "context/StyledComponentsProvider";
+import Layout from "layout/index";
 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;

web/src/assets/svgs/header/hamburger.svg

@@ -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;

web/src/assets/svgs/menu-icons/dark-mode.svg

@@ -0,0 +1,44 @@
+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;
+  className?: string;
+}
+
+const LightButton: React.FC<ILightButton> = ({
+  text,
+  icon,
+  onClick,
+  disabled,
+  className,
+}) => (
+  <StyledButton
+    variant="primary"
+    small
+    {...{ text, icon, onClick, disabled, className }}
+  />
+);
+
+export default LightButton;

web/src/assets/svgs/menu-icons/help.svg

@@ -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/",
   },
 };

web/src/assets/svgs/menu-icons/kleros-solutions.svg

@@ -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;

web/src/assets/svgs/menu-icons/light-mode.svg

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

web/src/assets/svgs/menu-icons/notifications.svg

@@ -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];
+}

web/src/assets/svgs/menu-icons/settings.svg

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

web/src/components/ConnectButton.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>
 );