feat(web): style cases page, courts page

Author: kemuru

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 + (24 - 4) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      `
+  )}
+`;
+
+const SearchBarContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -27,6 +43,15 @@ const StyledSearchbar = styled(Searchbar)`
   }
 `;
 
+const StyledDropdownCascader = styled(DropdownCascader)`
+  [class*="dropdown-container"] {
+    width: 240px;
+  }
+  [class*="cascader"] {
+    overflow: auto;
+  }
+`;
+
 const Search: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
@@ -54,17 +79,17 @@ const Search: React.FC = () => {
   }, [courtTreeData]);
 
   return (
-    <div>
-      <Container>
+    <Container>
+      <SearchBarContainer>
         <StyledSearchbar
           type="text"
           placeholder="Search By ID"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
-      </Container>
+      </SearchBarContainer>
       {items ? (
-        <DropdownCascader
+        <StyledDropdownCascader
           items={items}
           placeholder={"Select Court"}
           onSelect={(value) => {
@@ -76,7 +101,7 @@ const Search: React.FC = () => {
       ) : (
         <Skeleton width={240} height={42} />
       )}
-    </div>
+    </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/Courts/CourtDetails/index.tsx

@@ -23,10 +23,39 @@ import { usePnkFaucetWithdrewAlready, prepareWritePnkFaucet, usePnkBalanceOf } f
 
 const Container = styled.div``;
 
+const CourtHeader = styled.h1`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+`;
+
+const CourtInfo = styled.div`
+  display: flex:
+  flex-direction: column;
+  gap: 16px;
+
+  ${landscapeStyle(
+    () => css`
+      gap: 32px;
+    `
+  )};
+`;
+
 const ButtonContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+
+  ${landscapeStyle(
+    () => css`
+      align-items: flex-end;
+      gap: 32px;
+    `
+  )};
 `;
 
 const StyledCard = styled(Card)`
@@ -38,26 +67,13 @@ const StyledCard = styled(Card)`
 `;
 
 const StyledBreadcrumb = styled(Breadcrumb)`
-  margin-bottom: 12px;
   display: flex;
-  align-items: flex-start;
+  margin-top: 12px;
+  align-items: center;
 `;
 
 const StyledBreadcrumbSkeleton = styled.div`
-  margin-bottom: 12px;
-`;
-
-const CourtHeader = styled.h1`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-      justify-content: space-between;
-    `
-  )}
+  margin-top: 12px;
 `;
 
 const CourtDetails: React.FC = () => {
@@ -108,31 +124,33 @@ const CourtDetails: React.FC = () => {
     <Container>
       <StyledCard>
         <CourtHeader>
-          {policy ? policy.name : <StyledSkeleton width={200} />}
-          <HowItWorks
-            isMiniGuideOpen={isStakingMiniGuideOpen}
-            toggleMiniGuide={toggleStakingMiniGuide}
-            MiniGuideComponent={Staking}
-          />
-        </CourtHeader>
-        <ButtonContainer>
-          {items.length > 1 ? (
-            <StyledBreadcrumb items={items} />
-          ) : (
-            <StyledBreadcrumbSkeleton>
-              <StyledSkeleton width={100} />
-            </StyledBreadcrumbSkeleton>
-          )}
-          {chain?.id === DEFAULT_CHAIN && !claimed && (
-            <Button
-              variant="primary"
-              text={faucetCheck ? "Claim PNK" : "Empty Faucet"}
-              onClick={handleRequest}
-              isLoading={isSending}
-              disabled={isSending || claimed || !faucetCheck}
+          <CourtInfo>
+            {policy ? policy.name : <StyledSkeleton width={200} />}
+            {items.length > 1 ? (
+              <StyledBreadcrumb items={items} />
+            ) : (
+              <StyledBreadcrumbSkeleton>
+                <StyledSkeleton width={100} />
+              </StyledBreadcrumbSkeleton>
+            )}
+          </CourtInfo>
+          <ButtonContainer>
+            <HowItWorks
+              isMiniGuideOpen={isStakingMiniGuideOpen}
+              toggleMiniGuide={toggleStakingMiniGuide}
+              MiniGuideComponent={Staking}
             />
-          )}
-        </ButtonContainer>
+            {chain?.id === DEFAULT_CHAIN && !claimed && (
+              <Button
+                variant="primary"
+                text={faucetCheck ? "Claim PNK" : "Empty Faucet"}
+                onClick={handleRequest}
+                isLoading={isSending}
+                disabled={isSending || claimed || !faucetCheck}
+              />
+            )}
+          </ButtonContainer>
+        </CourtHeader>
         <hr />
         <Stats />
         <hr />