Merge pull request #2001 from kleros/chore(web)/style-and-button-changes

chore(web): style and button changes

Author: alcercu

web/README.md

@@ -23,7 +23,7 @@
 
 ### Pre-Requisites
 
-If you haven't already, you need to follow all the previous steps of the **Contributing** section of the repo's [Contribution Guidelines](../CONTRIBUTING.md).
+If you haven't already, you need to follow all the previous steps of the **Contributing** section of the repo's [Contribution Guidelines](../CONTRIBUTING.md)
 
 ### Getting Started
 

web/src/components/AllCasesButton.tsx

@@ -11,14 +11,23 @@ import DisputeView from "components/DisputeView";
 import { SkeletonDisputeCard } from "components/StyledSkeleton";
 
 import { Dispute_Filter } from "../graphql/graphql";
-import AllCasesButton from "./AllCasesButton";
+import SeeAllCasesButton from "./SeeAllCasesButton";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(28, 48)};
+  margin-top: ${responsiveSize(32, 48)};
 `;
 
-const Title = styled.h1`
+const TitleAndButtonContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px 12px;
   margin-bottom: ${responsiveSize(12, 24)};
+`;
+
+const Title = styled.h1`
+  margin-bottom: 0;
   font-size: ${responsiveSize(20, 24)};
 `;
 
@@ -30,34 +39,27 @@ const DisputeContainer = styled.div`
   gap: var(--gap);
 `;
 
-const ButtonContainer = styled.div`
-  display: flex;
-  margin-top: 16px;
-  justify-content: center;
-`;
-
 interface ILatestCases {
   title?: string;
   filters?: Dispute_Filter;
-  courtName?: string;
 }
 
-const LatestCases: React.FC<ILatestCases> = ({ title = "Latest Cases", filters, courtName }) => {
+const LatestCases: React.FC<ILatestCases> = ({ title = "Latest Cases", filters }) => {
   const { data } = useCasesQuery(0, 3, filters);
   const disputes: DisputeDetailsFragment[] = useMemo(() => data?.disputes as DisputeDetailsFragment[], [data]);
   const courtId = typeof filters?.court === "string" ? filters?.court : undefined;
 
   return isUndefined(disputes) || disputes.length > 0 ? (
     <Container>
-      <Title>{title}</Title>
+      <TitleAndButtonContainer>
+        <Title>{title}</Title>
+        <SeeAllCasesButton {...{ courtId }} />
+      </TitleAndButtonContainer>
       <DisputeContainer>
         {isUndefined(disputes)
           ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeView key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
-      <ButtonContainer>
-        <AllCasesButton {...{ courtId, courtName }} />
-      </ButtonContainer>
     </Container>
   ) : null;
 };

web/src/components/LatestCases.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { encodeURIFilter } from "utils/uri";
+
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
+import { InternalLink } from "./InternalLink";
+
+interface ISeeAllCasesButton {
+  courtId?: string;
+}
+
+const SeeAllCasesButton: React.FC<ISeeAllCasesButton> = ({ courtId }) => {
+  const filter = courtId ? { court: courtId } : {};
+  const link = `/cases/display/1/desc/${encodeURIFilter(filter)}`;
+  const labelText = "See all";
+
+  return (
+    <InternalLink to={link}>
+      <BlueIconTextButtonContainer>{labelText}</BlueIconTextButtonContainer>
+    </InternalLink>
+  );
+};
+
+export default SeeAllCasesButton;

web/src/components/SeeAllCasesButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
+import { InternalLink } from "./InternalLink";
+
+const SeeAllJurorsButton: React.FC = () => {
+  return (
+    <InternalLink to={"/jurors/1/desc/all"}>
+      <BlueIconTextButtonContainer>
+        <label>See all</label>
+      </BlueIconTextButtonContainer>
+    </InternalLink>
+  );
+};
+
+export default SeeAllJurorsButton;

web/src/components/SeeAllJurorsButton.tsx

@@ -149,11 +149,7 @@ const CourtDetails: React.FC = () => {
       <StyledCard>
         <Description />
       </StyledCard>
-      <LatestCases
-        {...{ courtName }}
-        title={`Latest Cases in ${getDescriptiveCourtName(courtName)}`}
-        filters={{ court: id }}
-      />
+      <LatestCases title={`Latest Cases in ${getDescriptiveCourtName(courtName)}`} filters={{ court: id }} />
       <JurorsStakedByCourt {...{ courtName }} />
       <ScrollTop />
     </Container>

web/src/pages/Courts/CourtDetails/index.tsx

@@ -12,14 +12,22 @@ import { SkeletonDisputeListItem } from "components/StyledSkeleton";
 
 import Header from "./Header";
 import JurorCard from "./JurorCard";
-import JurorsLeaderboardButton from "components/JurorsLeaderboardButton";
+import SeeAllJurorsButton from "components/SeeAllJurorsButton";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(24, 48)};
+  margin-top: ${responsiveSize(28, 48)};
 `;
 
-const Title = styled.h1`
+const TitleAndButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
   margin-bottom: ${responsiveSize(12, 24)};
+`;
+
+const Title = styled.h1`
+  margin-bottom: 0;
   font-size: ${responsiveSize(20, 24)};
 `;
 
@@ -40,12 +48,6 @@ export const StyledLabel = styled.label`
   font-size: 16px;
 `;
 
-const ButtonContainer = styled.div`
-  display: flex;
-  margin-top: 16px;
-  justify-content: center;
-`;
-
 const TopJurors: React.FC = () => {
   const { data: queryJurors } = useJurorsByCoherenceScore(0, 5, "coherenceScore", "desc");
 
@@ -56,7 +58,10 @@ const TopJurors: React.FC = () => {
 
   return (
     <Container>
-      <Title>Top Jurors</Title>
+      <TitleAndButtonContainer>
+        <Title>Top Jurors</Title>
+        <SeeAllJurorsButton />
+      </TitleAndButtonContainer>
       {!isUndefined(topJurors) && topJurors.length === 0 ? (
         <StyledLabel>No jurors found</StyledLabel>
       ) : (
@@ -67,9 +72,6 @@ const TopJurors: React.FC = () => {
             : [...Array(5)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
         </ListContainer>
       )}
-      <ButtonContainer>
-        <JurorsLeaderboardButton />
-      </ButtonContainer>
     </Container>
   );
 };