Merge pull request #1305 from kleros/feat(web)/mobile-version-my-cour…

…ts-dashboard

feat(web): style my courts (in dashboard) for desktop version

web/src/components/CasesDisplay/Search.tsx

@@ -1,14 +1,30 @@
 import React, { useMemo, useState } from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { useNavigate, useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
-import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
 import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
 import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  ${landscapeStyle(
+    () =>
+      css`
+        flex-direction: row;
+        gap: calc(4px + (22 - 4) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      `
+  )}
+`;
+
+const SearchBarContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -54,15 +70,7 @@ const Search: React.FC = () => {
   }, [courtTreeData]);
 
   return (
-    <div>
-      <Container>
-        <StyledSearchbar
-          type="text"
-          placeholder="Search By ID"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </Container>
+    <Container>
       {items ? (
         <DropdownCascader
           items={items}
@@ -76,7 +84,15 @@ const Search: React.FC = () => {
       ) : (
         <Skeleton width={240} height={42} />
       )}
-    </div>
+      <SearchBarContainer>
+        <StyledSearchbar
+          type="text"
+          placeholder="Search By ID"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </SearchBarContainer>
+    </Container>
   );
 };
 

web/src/components/CasesDisplay/Stats.tsx

@@ -7,13 +7,17 @@ const FieldWrapper = styled.div`
 `;
 
 const SeparatorLabel = styled.label`
-  margin-left: 8px;
-  margin-right: 8px;
+  margin: 0 8px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryText};
 `;
 
 const Field: React.FC<{ label: string; value: string }> = ({ label, value }) => (
   <FieldWrapper>
-    <label>{label}</label>
+    <StyledLabel>{label}</StyledLabel>
     <small>{value}</small>
   </FieldWrapper>
 );

web/src/components/CasesDisplay/StatsAndFilters.tsx

@@ -7,7 +7,8 @@ const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 8px;
+  margin-top: 11px;
+  justify-content: space-between;
 `;
 
 const StatsAndFilters: React.FC<IStats> = ({ totalDisputes, closedDisputes }) => (

web/src/components/CasesDisplay/index.tsx

@@ -4,9 +4,16 @@ import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
 import CasesGrid, { ICasesGrid } from "./CasesGrid";
 
-const StyledHR = styled.hr`
-  margin-top: 24px;
-  margin-bottom: 24px;
+const Divider = styled.hr`
+  display: flex;
+  border: none;
+  height: 1px;
+  background-color: ${({ theme }) => theme.stroke};
+  margin: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0;
+`;
+
+const StyledTitle = styled.h1`
+  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
 
 interface ICasesDisplay extends ICasesGrid {
@@ -29,10 +36,10 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
 }) => {
   return (
     <div {...{ className }}>
-      <h1>{title}</h1>
+      <StyledTitle>{title}</StyledTitle>
       <Search />
       <StatsAndFilters totalDisputes={numberDisputes ?? 0} closedDisputes={numberClosedDisputes ?? 0} />
-      <StyledHR />
+      <Divider />
 
       {disputes?.length === 0 ? (
         <h1>No cases found</h1>

web/src/pages/Home/TopJurors/Header/HowItWorks.tsx → web/src/components/HowItWorks.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import styled from "styled-components";
-import { useToggle } from "react-use";
 import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
-import Level from "components/Popup/MiniGuides/Level";
 
 const Container = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
+  color: ${({ theme }) => theme.primaryBlue};
 
   &,
   & * {
     cursor: pointer;
   }
 
+  &:hover {
+    text-decoration: underline;
+  }
+
   svg {
     path {
       fill: ${({ theme }) => theme.primaryBlue};
@@ -25,15 +28,20 @@ const StyledLabel = styled.label`
   color: ${({ theme }) => theme.primaryBlue};
 `;
 
-const HowItWorks: React.FC = () => {
-  const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false);
+interface IHowItWorks {
+  isMiniGuideOpen: boolean;
+  toggleMiniGuide: () => void;
+  MiniGuideComponent: React.ComponentType<{ toggleMiniGuide: () => void }>;
+}
+
+const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, MiniGuideComponent }) => {
   return (
     <>
-      <Container onClick={() => toggleIsLevelMiniGuidesOpen()}>
+      <Container onClick={toggleMiniGuide}>
         <BookOpenIcon />
         <StyledLabel> How it works </StyledLabel>
       </Container>
-      {isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
+      {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>
   );
 };

web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+import CrowdfundAppealSvg from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal.svg";
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)`
+  [class$="rect-bg"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="path-1"],
+  [class$="path-2"],
+  [class$="path-3"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+
+  [class$="rect-fg"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="rect-accent"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  [class$="path-4"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+
+  [class$="path-5"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+`;
+
+const CrowdfundAppeal: React.FC = () => <StyledImage as={StyledCrowdfundAppealSvg} />;
+
+export default CrowdfundAppeal;

web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import styled from "styled-components";
+import PayoffSimulatorSvg from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator.svg";
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledPayoffSimulatorSvg = styled(PayoffSimulatorSvg)`
+  [class$="circle-1"] {
+    fill: ${({ theme }) => theme.successLight};
+  }
+
+  [class$="rect-2"] {
+    fill: ${({ theme }) => theme.mediumBlue};
+  }
+
+  [class$="circle-2"] {
+    fill: ${({ theme }) => theme.mediumPurple};
+  }
+
+  [class$="rect-1"],
+  [class$="rect-5"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="rect-6"],
+  [class$="rect-7"],
+  [class$="rect-8"] {
+    fill: ${({ theme }) => theme.white};
+  }
+
+  [class$="path-2"] {
+    fill: ${({ theme }) => theme.success};
+  }
+
+  [class$="path-3"],
+  [class$="path-16"] {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+
+  [class$="path-11"],
+  [class$="path-13"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+
+  [class$="path-4"],
+  [class$="path-5"],
+  [class$="path-6"],
+  [class$="path-7"],
+  [class$="path-8"],
+  [class$="path-9"],
+  [class$="path-10"],
+  [class$="path-12"],
+  [class$="path-14"],
+  [class$="path-15"],
+  [class$="path-17"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+
+  [class$="rect-3"],
+  [class$="rect-4"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  [class$="line-1"],
+  [class$="line-2"],
+  [class$="path-1"] {
+    stroke: ${({ theme }) => theme.mediumBlue};
+  }
+
+  [class$="path-1"] {
+    fill: ${({ theme }) => theme.lightBlue};
+  }
+`;
+
+const PayoffSimulator: React.FC = () => <StyledImage as={StyledPayoffSimulatorSvg} />;
+
+export default PayoffSimulator;

web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import styled from "styled-components";
+import StageOneSvg from "tsx:assets/svgs/mini-guides/appeal/stage-one.svg";
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledStageOneSvg = styled(StageOneSvg)`
+  [class$="rect-1"],
+  [class$="rect-2"],
+  [class$="rect-6"],
+  [class$="circle-1"],
+  [class$="circle-2"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+
+  [class$="rect-4"],
+  [class$="rect-8"] {
+    fill: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="rect-5"],
+  [class$="path-9"],
+  [class$="path-10"] {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+
+  [class$="rect-9"],
+  [class$="circle-3"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  [class$="rect-10"] {
+    fill: ${({ theme }) => theme.lightBlue};
+    stroke: ${({ theme }) => theme.mediumBlue};
+  }
+
+  [class$="rect-11"],
+  [class$="rect-12"] {
+    fill: ${({ theme }) => theme.white};
+  }
+
+  [class$="path-2"],
+  [class$="path-6"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+
+  [class$="path-1"],
+  [class$="path-5"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+
+  [class$="path-3"],
+  [class$="path-4"] {
+    fill: ${({ theme }) => theme.success};
+  }
+
+  [class$="path-7"],
+  [class$="path-8"] {
+    fill: ${({ theme }) => theme.warning};
+  }
+
+  [class$="rect-3"],
+  [class$="rect-7"],
+  [class$="circle-1"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="circle-2"] {
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const StageOne: React.FC = () => <StyledImage as={StyledStageOneSvg} />;
+
+export default StageOne;