From 036e89789509612eb59e7a4177c5da88cba06c33 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 19 May 2025 14:27:37 +0200 Subject: [PATCH 1/3] chore: style and button changes --- web/src/components/AllCasesButton.tsx | 45 ----------------------- web/src/components/LatestCases.tsx | 29 ++++++++------- web/src/components/SeeAllCasesButton.tsx | 24 ++++++++++++ web/src/components/SeeAllJurorsButton.tsx | 16 ++++++++ web/src/pages/Home/TopJurors/index.tsx | 28 +++++++------- 5 files changed, 71 insertions(+), 71 deletions(-) delete mode 100644 web/src/components/AllCasesButton.tsx create mode 100644 web/src/components/SeeAllCasesButton.tsx create mode 100644 web/src/components/SeeAllJurorsButton.tsx diff --git a/web/src/components/AllCasesButton.tsx b/web/src/components/AllCasesButton.tsx deleted file mode 100644 index 07bdb1115..000000000 --- a/web/src/components/AllCasesButton.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; - -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; -`; - -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} - - - - ); -}; - -export default AllCasesButton; diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 89783a327..6bd1a5219 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.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,12 +39,6 @@ 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; @@ -49,15 +52,15 @@ const LatestCases: React.FC = ({ title = "Latest Cases", filters, return isUndefined(disputes) || disputes.length > 0 ? ( - {title} + + {title} + + {isUndefined(disputes) ? Array.from({ length: 3 }).map((_, index) => ) : disputes.map((dispute) => )} - - - ) : null; }; diff --git a/web/src/components/SeeAllCasesButton.tsx b/web/src/components/SeeAllCasesButton.tsx new file mode 100644 index 000000000..8515619ab --- /dev/null +++ b/web/src/components/SeeAllCasesButton.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 = ({ courtId }) => { + const filter = courtId ? { court: courtId } : {}; + const link = `/cases/display/1/desc/${encodeURIFilter(filter)}`; + const labelText = "See all"; + + return ( + + {labelText} + + ); +}; + +export default SeeAllCasesButton; diff --git a/web/src/components/SeeAllJurorsButton.tsx b/web/src/components/SeeAllJurorsButton.tsx new file mode 100644 index 000000000..e18e77109 --- /dev/null +++ b/web/src/components/SeeAllJurorsButton.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer"; +import { InternalLink } from "./InternalLink"; + +const SeeAllJurorsButton: React.FC = () => { + return ( + + + + + + ); +}; + +export default SeeAllJurorsButton; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index 7e56c86a5..ff8bd798c 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/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 ( - Top Jurors + + Top Jurors + + {!isUndefined(topJurors) && topJurors.length === 0 ? ( No jurors found ) : ( @@ -67,9 +72,6 @@ const TopJurors: React.FC = () => { : [...Array(5)].map((_, i) => )} )} - - - ); }; From f20c9d43609ac2e4443b0fd79705dcfb48cc413e Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 19 May 2025 17:08:21 +0200 Subject: [PATCH 2/3] chore: remove unused code --- web/src/components/LatestCases.tsx | 5 ++--- web/src/pages/Courts/CourtDetails/index.tsx | 6 +----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 6bd1a5219..9f4133607 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -42,10 +42,9 @@ const DisputeContainer = styled.div` interface ILatestCases { title?: string; filters?: Dispute_Filter; - courtName?: string; } -const LatestCases: React.FC = ({ title = "Latest Cases", filters, courtName }) => { +const LatestCases: React.FC = ({ 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; @@ -54,7 +53,7 @@ const LatestCases: React.FC = ({ title = "Latest Cases", filters, {title} - + {isUndefined(disputes) diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 29d0070fc..448988711 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -149,11 +149,7 @@ const CourtDetails: React.FC = () => { - + From 7a5466b9e72f82d6d350c48ce49a98e51196dd7e Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 20 May 2025 15:28:44 +0200 Subject: [PATCH 3/3] chore: retrigger deploy preview --- web/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/README.md b/web/README.md index 61fe8c865..e6b643337 100644 --- a/web/README.md +++ b/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