diff --git a/web/src/components/AllCasesButton.tsx b/web/src/components/AllCasesButton.tsx index 137e2dae5..07bdb1115 100644 --- a/web/src/components/AllCasesButton.tsx +++ b/web/src/components/AllCasesButton.tsx @@ -4,20 +4,39 @@ import styled from "styled-components"; import DocIcon from "svgs/icons/doc.svg"; +import { encodeURIFilter } from "utils/uri"; +import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName"; + import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer"; import { InternalLink } from "./InternalLink"; const StyledDocIcon = styled(DocIcon)` width: 16px; height: 16px; + margin-right: 8px; +`; + +const IconAndTextContainer = styled.div` + display: inline-block; `; -const AllCasesButton: React.FC = () => { +interface IAllCasesButton { + courtId?: string; + courtName?: string; +} + +const AllCasesButton: React.FC = ({ courtId, courtName }) => { + const filter = courtId ? { court: courtId } : {}; + const link = `/cases/display/1/desc/${encodeURIFilter(filter)}`; + const labelText = courtId ? `All Cases in ${getDescriptiveCourtName(courtName)}` : "All Cases"; + return ( - + - - + + + {labelText} + ); diff --git a/web/src/components/BlueIconTextButtonContainer.tsx b/web/src/components/BlueIconTextButtonContainer.tsx index 9976cee62..ca9d45d8d 100644 --- a/web/src/components/BlueIconTextButtonContainer.tsx +++ b/web/src/components/BlueIconTextButtonContainer.tsx @@ -5,6 +5,7 @@ export const BlueIconTextButtonContainer = styled.div` ${hoverShortTransitionTiming} display: flex; align-items: center; + text-align: center; font-size: 14px; font-weight: 400; gap: 8px; diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 0f9b85eb5..89783a327 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -36,20 +36,27 @@ const ButtonContainer = styled.div` justify-content: center; `; -const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => { +interface ILatestCases { + title?: string; + filters?: Dispute_Filter; + courtName?: string; +} + +const LatestCases: React.FC = ({ title = "Latest Cases", filters, courtName }) => { 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 ? ( - Latest Cases + {title} {isUndefined(disputes) ? Array.from({ length: 3 }).map((_, index) => ) : disputes.map((dispute) => )} - + ) : null; diff --git a/web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/index.tsx b/web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/index.tsx index 07f1b7079..8abc6e816 100644 --- a/web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/index.tsx +++ b/web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/index.tsx @@ -2,6 +2,9 @@ import React from "react"; import styled from "styled-components"; import { responsiveSize } from "styles/responsiveSize"; + +import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName"; + import Search from "./Search"; import DisplayJurors from "./DisplayJurors"; @@ -18,10 +21,7 @@ const Title = styled.h1` const JurorsStakedByCourt: React.FC<{ courtName: string | undefined }> = ({ courtName }) => { return ( - - Jurors Staked in {courtName} - {courtName?.toLowerCase().endsWith("court") || courtName?.toLowerCase().startsWith("corte") ? null : " Court"} - + Jurors Staked in {getDescriptiveCourtName(courtName)} diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 93689e50e..29d0070fc 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -8,6 +8,8 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library"; import { isProductionDeployment } from "consts/index"; +import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName"; + import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree"; import { landscapeStyle } from "styles/landscapeStyle"; @@ -147,7 +149,11 @@ const CourtDetails: React.FC = () => { - + diff --git a/web/src/utils/getDescriptiveCourtName.ts b/web/src/utils/getDescriptiveCourtName.ts new file mode 100644 index 000000000..6c41c256b --- /dev/null +++ b/web/src/utils/getDescriptiveCourtName.ts @@ -0,0 +1,5 @@ +export const getDescriptiveCourtName = (courtName?: string): string => { + if (!courtName) return ""; + const lc = courtName.toLowerCase(); + return lc.endsWith("court") || lc.startsWith("corte") ? courtName : `${courtName} Court`; +};