Feat(web): Add cases page (UI)

web/package.json

@@ -56,7 +56,7 @@
     "@graphql-codegen/typescript": "^2.4.9",
     "@graphql-codegen/typescript-operations": "^2.4.2",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^1.1.0",
+    "@kleros/ui-components-library": "^1.3.0",
     "chart.js": "^3.7.1",
     "chartjs-adapter-moment": "^1.0.0",
     "core-js": "^3.21.1",

web/src/app.tsx

@@ -4,7 +4,8 @@ import { SWRConfig } from "swr";
 import { request } from "graphql-request";
 import { Routes, Route } from "react-router-dom";
 import Layout from "layout/index";
-import Home from "./pages/home";
+import Home from "./pages/Home";
+import Cases from "./pages/Cases";
 
 const fetcherBuilder =
   (url: string) =>
@@ -26,7 +27,7 @@ const App: React.FC = () => {
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<Home />} />
-            <Route path="cases" element={<h1>Cases</h1>} />
+            <Route path="cases" element={<Cases />} />
             <Route path="courts" element={<h1>Courts</h1>} />
             <Route path="dashboard" element={<h1>Dashboard</h1>} />
             <Route

web/src/pages/Cases/CasesMatrix.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import { StandardPagination } from "@kleros/ui-components-library";
+import DisputeCard from "components/DisputeCard";
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+// 24px as margin-top since we already have 8px from the flex gap
+const StyledPagination = styled(StandardPagination)`
+  margin-top: 24px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const CasesMatrix: React.FC = () => (
+  <Container>
+    <DisputeCard
+      title="Register Profile in Proof of Humanity"
+      id={600}
+      period={1}
+      court="Humanity"
+      category="Identity"
+      rewards="≥ 0.3 ETH"
+      date={1651244935}
+    />
+    <DisputeCard
+      title="Register Profile in Proof of Humanity"
+      id={600}
+      period={3}
+      court="Humanity"
+      category="Identity"
+      rewards="≥ 0.3 ETH"
+      date={1651244935}
+    />
+    <DisputeCard
+      title="Register Profile in Proof of Humanity"
+      id={600}
+      period={4}
+      court="Humanity"
+      category="Identity"
+      rewards="≥ 0.3 ETH"
+      date={1651244935}
+    />
+    <StyledPagination currentPage={1} numPages={1} callback={() => {}} />
+  </Container>
+);
+
+export default CasesMatrix;

web/src/pages/Cases/Filters.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { DropdownSelect } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: end;
+  gap: 12px;
+  width: fit-content;
+`;
+
+const Filters: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <Container>
+      <DropdownSelect
+        smallButton
+        simpleButton
+        items={[
+          { value: 0, text: "All Cases", dot: theme.primaryText },
+          { value: 1, text: "In Progress", dot: theme.primaryBlue },
+          { value: 2, text: "Closed", dot: theme.primaryPurple },
+          { value: 3, text: "Appeal", dot: theme.tint },
+        ]}
+        defaultValue={0}
+        callback={() => {}}
+      />
+      <DropdownSelect
+        smallButton
+        simpleButton
+        items={[
+          { value: 0, text: "Newest" },
+          { value: 1, text: "Oldest" },
+        ]}
+        defaultValue={0}
+        callback={() => {}}
+      />
+    </Container>
+  );
+};
+
+export default Filters;

web/src/pages/Cases/Search.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import styled from "styled-components";
+import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+const StyledSearchbar = styled(Searchbar)`
+  flex: 1;
+  flex-basis: 310px;
+  input {
+    font-size: 16px;
+    height: 45px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+
+const Search: React.FC = () => (
+  <Container>
+    <StyledSearchbar />
+    <DropdownCascader
+      placeholder={"Select Court"}
+      onSelect={() => {
+        // Called with the item value when select is clicked
+      }}
+      items={[
+        {
+          label: "General Court",
+          value: 0,
+          children: [
+            {
+              label: "Blockchain",
+              value: 1,
+              children: [
+                {
+                  label: "Technical",
+                  value: 2,
+                },
+                {
+                  label: "Non-technical",
+                  value: 3,
+                },
+                {
+                  label: "Other",
+                  value: 4,
+                },
+              ],
+            },
+            {
+              label: "Marketing Services",
+              value: 5,
+            },
+          ],
+        },
+      ]}
+    />
+  </Container>
+);
+
+export default Search;

web/src/pages/Cases/Stats.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+
+const FieldWrapper = styled.div`
+  display: inline-flex;
+  gap: 8px;
+`;
+
+const Field: React.FC<{ label: string; value: string }> = ({
+  label,
+  value,
+}) => (
+  <FieldWrapper>
+    <label>{label}</label>
+    <small>{value}</small>
+  </FieldWrapper>
+);
+
+const SeparatorLabel = styled.label`
+  margin-left: 8px;
+  margin-right: 8px;
+`;
+
+const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
+
+const fields = [
+  { label: "Total", value: "600" },
+  { label: "In Progress", value: "50" },
+  { label: "Closed", value: "550" },
+];
+
+const Stats: React.FC = () => (
+  <div>
+    {fields.map(({ label, value }, i) => (
+      <>
+        <Field key={i} {...{ label, value }} />
+        {i + 1 < fields.length ? <Separator /> : null}
+      </>
+    ))}
+  </div>
+);
+
+export default Stats;

web/src/pages/Cases/StatsAndFilters.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "styled-components";
+import Filters from "./Filters";
+import Stats from "./Stats";
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+const StatsAndFilters: React.FC = () => (
+  <Container>
+    <Stats />
+    <Filters />
+  </Container>
+);
+
+export default StatsAndFilters;

web/src/pages/Cases/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+import Search from "./Search";
+import StatsAndFilters from "./StatsAndFilters";
+import CasesMatrix from "./CasesMatrix";
+
+const Container = styled.div`
+  width: 100%;
+  height: auto;
+  background-color: ${({ theme }) => theme.lightBackground};
+  padding: 32px;
+`;
+
+const StyledHR = styled.hr`
+  margin-top: 24px;
+  margin-bottom: 24px;
+`;
+
+const Cases: React.FC = () => (
+  <Container>
+    <h1>Cases</h1>
+    <Search />
+    <StatsAndFilters />
+    <StyledHR />
+    <CasesMatrix />
+  </Container>
+);
+
+export default Cases;

web/src/pages/home/index.tsx → web/src/pages/Home/index.tsx

@@ -12,18 +12,19 @@ const Container = styled.div`
   padding: 32px;
 `;
 
-const Home: React.FC = () => {
+const getOneYearAgoTimestamp: () => number = () => {
   const currentTime = new Date().getTime() / 1000;
-  const oneYearAgo = currentTime - 31556926; // One year in seconds
-  return (
-    <HomePageProvider timeframe={oneYearAgo}>
-      <Container>
-        <CourtOverview />
-        <LatestCases />
-        <Community />
-      </Container>
-    </HomePageProvider>
-  );
+  return currentTime - 31556926; // One year in seconds
 };
 
+const Home: React.FC = () => (
+  <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+    <Container>
+      <CourtOverview />
+      <LatestCases />
+      <Community />
+    </Container>
+  </HomePageProvider>
+);
+
 export default Home;

web/src/styles/global-style.ts

@@ -49,7 +49,7 @@ export const GlobalStyle = createGlobalStyle`
     color: ${({ theme }) => theme.primaryText};
   }
 
-  s {
+  small {
     font-weight: 600;
     font-size: 14px;
     line-height: 18px;

yarn.lock

@@ -2305,7 +2305,7 @@ __metadata:
     "@graphql-codegen/typescript": ^2.4.9
     "@graphql-codegen/typescript-operations": ^2.4.2
     "@kleros/kleros-v2-contracts": "workspace:^"
-    "@kleros/ui-components-library": ^1.1.0
+    "@kleros/ui-components-library": ^1.3.0
     "@parcel/transformer-svg-react": ^2.6.2
     "@types/react": ^18.0.14
     "@types/react-dom": ^18.0.0
@@ -2343,9 +2343,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@kleros/ui-components-library@npm:1.1.0"
+"@kleros/ui-components-library@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@kleros/ui-components-library@npm:1.3.0"
   dependencies:
     "@datepicker-react/hooks": ^2.8.4
     "@swc/helpers": ^0.3.2
@@ -2357,7 +2357,7 @@ __metadata:
     simplebar-react: ^2.3.6
   peerDependencies:
     styled-components: ^5.3.3
-  checksum: 998583b3c06c4bcd5240bc3e547140370557f1efa2afaa5916951ce9e317d436318843036fd552b35df5dbc3920762a1ed0322743f5a9d48cd084856aa9f2e11
+  checksum: d843df17f21c4b149ed632db951306cb8b2234568454a74495fc3d4a347487aaabeb3a5d28c65f467945e5c98be8b66e818346f859ae8474df53dbb1278016f2
   languageName: node
   linkType: hard