Web staging

web/package.json

@@ -82,6 +82,8 @@
     "graphql": "^16.7.1",
     "graphql-request": "~6.1.0",
     "moment": "^2.29.4",
+    "overlayscrollbars": "^2.3.0",
+    "overlayscrollbars-react": "^0.5.2",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",

web/src/app.tsx

@@ -6,6 +6,7 @@ import "react-toastify/dist/ReactToastify.css";
 import Web3Provider from "context/Web3Provider";
 import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
+import { FilterProvider } from "context/FilterProvider";
 import RefetchOnBlock from "context/RefetchOnBlock";
 import Layout from "layout/index";
 import Home from "./pages/Home";
@@ -20,16 +21,18 @@ const App: React.FC = () => {
       <QueryClientProvider>
         <RefetchOnBlock />
         <Web3Provider>
-          <SentryRoutes>
-            <Route path="/" element={<Layout />}>
-              <Route index element={<Home />} />
-              <Route path="cases/*" element={<Cases />} />
-              <Route path="courts/*" element={<Courts />} />
-              <Route path="dashboard" element={<Dashboard />} />
-              <Route path="disputeTemplate" element={<DisputeTemplateView />} />
-              <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
-            </Route>
-          </SentryRoutes>
+          <FilterProvider>
+            <SentryRoutes>
+              <Route path="/" element={<Layout />}>
+                <Route index element={<Home />} />
+                <Route path="cases/*" element={<Cases />} />
+                <Route path="courts/*" element={<Courts />} />
+                <Route path="dashboard" element={<Dashboard />} />
+                <Route path="disputeTemplate" element={<DisputeTemplateView />} />
+                <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+              </Route>
+            </SentryRoutes>
+          </FilterProvider>
         </Web3Provider>
       </QueryClientProvider>
     </StyledComponentsProvider>

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -1,13 +1,38 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { StandardPagination } from "@kleros/ui-components-library";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { useFiltersContext } from "context/FilterProvider";
 import { CasesPageQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
+import CasesListHeader from "./CasesListHeader";
+import { useLocation } from "react-router-dom";
 
-const Container = styled.div`
+const GridContainer = styled.div<{ path: string }>`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  align-items: center;
+  gap: 8px;
+  ${({ path }) =>
+    landscapeStyle(() =>
+      path === "/dashboard"
+        ? css`
+            display: flex;
+          `
+        : css`
+            display: grid;
+            row-gap: 16px;
+            column-gap: 8px;
+            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+            justify-content: space-between;
+          `
+    )}
+`;
+const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   gap: 8px;
 `;
 
@@ -26,13 +51,26 @@ export interface ICasesGrid {
 }
 
 const CasesGrid: React.FC<ICasesGrid> = ({ disputes, currentPage, setCurrentPage, numberDisputes, casesPerPage }) => {
+  const { isList } = useFiltersContext();
+  const location = useLocation();
+
+  const path = location.pathname;
   return (
     <>
-      <Container>
-        {disputes.map((dispute, i) => {
-          return <DisputeCard key={i} {...dispute} />;
-        })}
-      </Container>
+      {!isList ? (
+        <GridContainer path={path}>
+          {disputes.map((dispute) => {
+            return <DisputeCard key={dispute?.id} {...dispute} />;
+          })}
+        </GridContainer>
+      ) : (
+        <ListContainer>
+          {isList && <CasesListHeader />}
+          {disputes.map((dispute) => {
+            return <DisputeCard key={dispute?.id} {...dispute} />;
+          })}
+        </ListContainer>
+      )}
       <StyledPagination
         {...{ currentPage }}
         numPages={Math.ceil(numberDisputes / casesPerPage)}

web/src/components/CasesDisplay/CasesListHeader.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: calc(15vw + (40 - 15) * ((100vw - 300px) / (1250 - 300)));
+  width: 100%;
+  height: 100%;
+`;
+
+const CasesData = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  margin-left: calc(0px + (33) * (100vw - 370px) / (1250 - 370));
+  flex-wrap: wrap;
+  padding: 0 3%;
+  gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300)));
+`;
+
+const CaseTitle = styled.div`
+  display: none;
+  margin-left: 32px;
+  gap: 36px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: ${({ theme }) => theme.secondaryText} !important;
+  }
+
+  ${landscapeStyle(
+    () =>
+      css`
+        display: flex;
+      `
+  )}
+`;
+
+const StyledLabel = styled.label`
+  padding-left: calc(4px + (8 - 4) * ((100vw - 300px) / (900 - 300)));
+`;
+
+const tooltipMsg =
+  "Users have an economic interest in serving as jurors in Kleros: " +
+  "collecting the Juror Rewards in exchange for their work. Each juror who " +
+  "is coherent with the final ruling receive the Juror Rewards composed of " +
+  "arbitration fees (ETH) + PNK redistribution between jurors.";
+
+const CasesListHeader: React.FC = () => {
+  return (
+    <Container>
+      <CaseTitle>
+        <label>#</label>
+        <label>Title</label>
+      </CaseTitle>
+      <CasesData>
+        <StyledLabel>Court</StyledLabel>
+        <StyledLabel>Category</StyledLabel>
+        <WithHelpTooltip place="top" {...{ tooltipMsg }}>
+          <label> Rewards: </label>
+        </WithHelpTooltip>
+        <label>Next Deadline</label>
+      </CasesData>
+    </Container>
+  );
+};
+
+export default CasesListHeader;

web/src/components/CasesDisplay/Filters.tsx

@@ -1,6 +1,11 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import styled, { useTheme, css } from "styled-components";
+import { useWindowSize } from "react-use";
 import { DropdownSelect } from "@kleros/ui-components-library";
+import { useFiltersContext } from "context/FilterProvider";
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+import ListIcon from "svgs/icons/list.svg";
+import GridIcon from "svgs/icons/grid.svg";
 
 const Container = styled.div`
   display: flex;
@@ -9,8 +14,44 @@ const Container = styled.div`
   width: fit-content;
 `;
 
+const glowingEffect = css`
+  filter: drop-shadow(0 0 4px ${({ theme }) => theme.klerosUIComponentsSecondaryPurple});
+`;
+
+const StyledGridIcon = styled(GridIcon)<{ isList: boolean }>`
+  cursor: pointer;
+  transition: filter 0.2s ease;
+  fill: ${({ theme }) => theme.primaryBlue};
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  ${({ isList }) => !isList && glowingEffect}
+`;
+
+const IconsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+
+const StyledListIcon = styled(ListIcon)<{ isList: boolean; isScreenBig: boolean }>`
+  cursor: pointer;
+  display: ${({ isScreenBig }) => (isScreenBig ? "block" : "none")};
+  transition: filter 0.2s ease;
+  fill: ${({ theme }) => theme.primaryBlue};
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  ${({ isList }) => isList && glowingEffect}
+`;
+
 const Filters: React.FC = () => {
   const theme = useTheme();
+  const { width } = useWindowSize();
+  const { isList, setIsList } = useFiltersContext();
+  const screenIsBig = width > BREAKPOINT_LANDSCAPE;
+
   return (
     <Container>
       <DropdownSelect
@@ -35,6 +76,18 @@ const Filters: React.FC = () => {
         defaultValue={0}
         callback={() => {}}
       />
+      <IconsContainer>
+        <StyledGridIcon isList={isList} onClick={() => setIsList(false)} />
+        <StyledListIcon
+          isList={isList}
+          isScreenBig={screenIsBig}
+          onClick={() => {
+            if (screenIsBig) {
+              setIsList(true);
+            }
+          }}
+        />
+      </IconsContainer>
     </Container>
   );
 };