Merge branch 'dev' into testnet-2

kleros · Oct 20, 2023 · 3626a8e · 3626a8e
2 parents d0f80b2 + 34fa822
commit 3626a8e
Show file tree

Hide file tree

Showing 35 changed files with 563 additions and 265 deletions.
diff --git a/web/src/assets/pngs/dashboard/aristoteles.png b/web/src/assets/pngs/dashboard/aristoteles.png
diff --git a/web/src/assets/pngs/dashboard/diogenes.png b/web/src/assets/pngs/dashboard/diogenes.png
diff --git a/web/src/assets/pngs/dashboard/plato.png b/web/src/assets/pngs/dashboard/plato.png
diff --git a/web/src/assets/pngs/dashboard/pythagoras.png b/web/src/assets/pngs/dashboard/pythagoras.png
diff --git a/web/src/assets/pngs/dashboard/socrates.png b/web/src/assets/pngs/dashboard/socrates.png
diff --git a/web/src/assets/svgs/styled/three-pnks.svg b/web/src/assets/svgs/styled/three-pnks.svg
diff --git a/web/src/components/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx
@@ -15,7 +15,6 @@ import CasesListHeader from "./CasesListHeader";
 const GridContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
   align-items: center;
   gap: 24px;
 `;

diff --git a/web/src/components/DisputeCard/DisputeInfo.tsx b/web/src/components/DisputeCard/DisputeInfo.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { Periods } from "consts/periods";
 import { useIsList } from "context/IsListProvider";
 import BookmarkIcon from "svgs/icons/bookmark.svg";
@@ -8,21 +9,71 @@ import LawBalanceIcon from "svgs/icons/law-balance.svg";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
 import RoundIcon from "svgs/icons/round.svg";
 import Field from "../Field";
+import { getCourtsPath } from "pages/Courts/CourtDetails";
+import { useCourtTree } from "hooks/queries/useCourtTree";
 
-const Container = styled.div<{ isList: boolean }>`
+const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
   display: flex;
-  flex-direction: ${({ isList }) => (isList ? "row" : "column")};
+  width: 100%;
   gap: 8px;
+  flex-direction: column;
+  justify-content: flex-end;
 
   ${({ isList }) =>
     isList &&
     css`
-      gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
+      ${landscapeStyle(
+        () => css`
+          gap: 0;
+          height: 100%;
+        `
+      )}
+    `};
+`;
+
+const CourtBranchFieldContainer = styled.div<{ isList?: boolean; isOverview?: boolean }>`
+  ${({ isOverview }) =>
+    isOverview &&
+    css`
+      display: flex;
+      margin-top: 16px;
+      flex-wrap: wrap;
     `};
-  justify-content: ${({ isList }) => (isList ? "space-around" : "center")};
+`;
+
+const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
+
+  ${({ isList }) =>
+    isList &&
+    css`
+      ${landscapeStyle(
+        () => css`
+          flex-direction: row;
+          gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
+          justify-content: space-around;
+        `
+      )}
+    `};
+  ${({ isOverview }) =>
+    isOverview &&
+    css`
+      ${landscapeStyle(
+        () => css`
+          margin-top: 16px;
+          gap: 32px;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+        `
+      )}
+    `};
 `;
 
 const getPeriodPhrase = (period: Periods): string => {
@@ -47,6 +98,7 @@ export interface IDisputeInfo {
   date?: number;
   round?: number;
   overrideIsList?: boolean;
+  isOverview?: boolean;
 }
 
 const formatDate = (date: number) => {
@@ -65,35 +117,92 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
   date,
   round,
   overrideIsList,
+  isOverview,
 }) => {
   const { isList } = useIsList();
   const displayAsList = isList && !overrideIsList;
+  const { data } = useCourtTree();
+  const courtPath = getCourtsPath(data?.court, courtId);
+  const items = [];
+  items.push(
+    ...(courtPath?.map((node) => ({
+      text: node.name,
+      value: node.id,
+    })) ?? [])
+  );
+  const courtBranchValue = items.map((item) => item.text).join(" / ");
 
   return (
-    <Container isList={displayAsList}>
-      {court && courtId && (
-        <Field
-          icon={LawBalanceIcon}
-          name="Court"
-          value={court}
-          link={`/courts/${courtId}`}
-          displayAsList={displayAsList}
-        />
-      )}
-      {category && <Field icon={BookmarkIcon} name="Category" value={category} displayAsList={displayAsList} />}
-      {!category && displayAsList && (
-        <Field icon={BookmarkIcon} name="Category" value="General" displayAsList={displayAsList} />
-      )}
-      {round && <Field icon={RoundIcon} name="Round" value={round.toString()} displayAsList={displayAsList} />}
-      {rewards && <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} displayAsList={displayAsList} />}
-      {typeof period !== "undefined" && date && (
-        <Field
-          icon={CalendarIcon}
-          name={getPeriodPhrase(period)}
-          value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
-          displayAsList={displayAsList}
-        />
-      )}
+    <Container isList={displayAsList} isOverview={isOverview}>
+      <CourtBranchFieldContainer isOverview={isOverview}>
+        {court && courtId && isOverview && (
+          <Field
+            icon={LawBalanceIcon}
+            name="Court Branch"
+            value={courtBranchValue}
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+      </CourtBranchFieldContainer>
+      <RestOfFieldsContainer isOverview={isOverview} isList={displayAsList}>
+        {court && courtId && !isOverview && (
+          <Field
+            icon={LawBalanceIcon}
+            name="Court"
+            value={court}
+            link={`/courts/${courtId}`}
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+
+        {category && (
+          <Field
+            icon={BookmarkIcon}
+            name="Category"
+            value={category}
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+        {!category && displayAsList && (
+          <Field
+            icon={BookmarkIcon}
+            name="Category"
+            value="General"
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+        {round && (
+          <Field
+            icon={RoundIcon}
+            name="Round"
+            value={round.toString()}
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+        {rewards && (
+          <Field
+            icon={PileCoinsIcon}
+            name="Juror Rewards"
+            value={rewards}
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+        {typeof period !== "undefined" && date && (
+          <Field
+            icon={CalendarIcon}
+            name={getPeriodPhrase(period)}
+            value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
+            displayAsList={displayAsList}
+            isOverview={isOverview}
+          />
+        )}
+      </RestOfFieldsContainer>
     </Container>
   );
 };

diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx
@@ -18,16 +18,17 @@ import { getLocalRounds } from "utils/getLocalRounds";
 
 const StyledCard = styled(Card)`
   width: 100%;
-  height: 260px;
+  height: calc(280px + (296 - 280) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
   ${landscapeStyle(
     () =>
       css`
         /* Explanation of this formula:
           - The 48px accounts for the total width of gaps: 2 gaps * 24px each.
           - The 0.333 is used to equally distribute width among 3 cards per row.
-          - The 294px ensures the card has a minimum width.
+          - The 348px ensures the card has a minimum width.
         */
-        width: max(calc((100% - 48px) * 0.333), 294px);
+        width: max(calc((100% - 48px) * 0.333), 348px);
       `
   )}
 `;
@@ -40,8 +41,8 @@ const StyledListItem = styled(Card)`
 `;
 
 const CardContainer = styled.div`
-  height: 215px;
-  padding: 24px;
+  height: calc(100% - 45px);
+  padding: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   display: flex;
   flex-direction: column;
   justify-content: space-between;

diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
@@ -1,34 +1,70 @@
 import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 
 const FieldContainer = styled.div<FieldContainerProps>`
-  width: ${({ isList }) => (isList ? "auto" : "100%")};
   display: flex;
   align-items: center;
   justify-content: flex-start;
   white-space: nowrap;
+  width: 100%;
   .value {
-    flex-grow: ${({ isList }) => (isList ? "0" : "1")};
-    text-align: ${({ isList }) => (isList ? "center" : "end")};
+    flex-grow: 1;
+    text-align: end;
     color: ${({ theme }) => theme.primaryText};
   }
+
   svg {
     fill: ${({ theme }) => theme.secondaryPurple};
     margin-right: 8px;
     width: 15px;
   }
+
   .link {
     color: ${({ theme }) => theme.primaryBlue};
     :hover {
       cursor: pointer;
     }
   }
+  ${({ isList }) =>
+    isList &&
+    css`
+      ${landscapeStyle(
+        () => css`
+          width: auto;
+          .value {
+            flex-grow: 0;
+            text-align: center;
+          }
+        `
+      )}
+    `};
+  ${({ isOverview, isJurorBalance }) =>
+    (isOverview || isJurorBalance) &&
+    css`
+      ${landscapeStyle(
+        () => css`
+          width: auto;
+          gap: 8px;
+          .value {
+            flex-grow: 0;
+            text-align: none;
+            font-weight: 600;
+          }
+          svg {
+            margin-right: 0;
+          }
+        `
+      )}
+    `};
 `;
 
 type FieldContainerProps = {
   width?: string;
   isList?: boolean;
+  isOverview?: boolean;
+  isJurorBalance?: boolean;
 };
 
 interface IField {
@@ -38,12 +74,23 @@ interface IField {
   link?: string;
   width?: string;
   displayAsList?: boolean;
+  isOverview?: boolean;
+  isJurorBalance?: boolean;
 }
 
-const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, displayAsList }) => {
+const Field: React.FC<IField> = ({
+  icon: Icon,
+  name,
+  value,
+  link,
+  width,
+  displayAsList,
+  isOverview,
+  isJurorBalance,
+}) => {
   return (
-    <FieldContainer isList={displayAsList} width={width}>
-      {!displayAsList && (
+    <FieldContainer isList={displayAsList} isOverview={isOverview} isJurorBalance={isJurorBalance} width={width}>
+      {(!displayAsList || isOverview || isJurorBalance) && (
         <>
           <Icon />
           <label>{name}:</label>
@@ -59,5 +106,4 @@ const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, display
     </FieldContainer>
   );
 };
-
 export default Field;
diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx
@@ -7,7 +7,7 @@ import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
 
 const Container = styled.div`
-  margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-top: calc(48px + (80 - 48) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
 
 const Title = styled.h1`
@@ -18,7 +18,6 @@ const DisputeContainer = styled.div`
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
-  justify-content: center;
 `;
 
 const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {