refactor(web): simplify directory structure

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",

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 = () => (

web/src/components/layout/footer/SecuredByKleros.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;

web/src/components/layout/footer/SocialMedia.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

web/src/components/layout/footer/index.tsx

@@ -14,6 +14,12 @@
       "components*": [
         "./src/components*"
       ],
+      "context*": [
+        "./src/context*"
+      ],
+      "layout*": [
+        "./src/layout*"
+      ],
       "consts*": [
         "./src/consts*"
       ],