Skip to content

Commit 036e897

Browse files
committed
chore: style and button changes
1 parent 1ff55f8 commit 036e897

File tree

5 files changed

+71
-71
lines changed

5 files changed

+71
-71
lines changed

web/src/components/AllCasesButton.tsx

Lines changed: 0 additions & 45 deletions
This file was deleted.

web/src/components/LatestCases.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,23 @@ import DisputeView from "components/DisputeView";
1111
import { SkeletonDisputeCard } from "components/StyledSkeleton";
1212

1313
import { Dispute_Filter } from "../graphql/graphql";
14-
import AllCasesButton from "./AllCasesButton";
14+
import SeeAllCasesButton from "./SeeAllCasesButton";
1515

1616
const Container = styled.div`
17-
margin-top: ${responsiveSize(28, 48)};
17+
margin-top: ${responsiveSize(32, 48)};
1818
`;
1919

20-
const Title = styled.h1`
20+
const TitleAndButtonContainer = styled.div`
21+
display: flex;
22+
flex-wrap: wrap;
23+
flex-direction: row;
24+
align-items: center;
25+
gap: 4px 12px;
2126
margin-bottom: ${responsiveSize(12, 24)};
27+
`;
28+
29+
const Title = styled.h1`
30+
margin-bottom: 0;
2231
font-size: ${responsiveSize(20, 24)};
2332
`;
2433

@@ -30,12 +39,6 @@ const DisputeContainer = styled.div`
3039
gap: var(--gap);
3140
`;
3241

33-
const ButtonContainer = styled.div`
34-
display: flex;
35-
margin-top: 16px;
36-
justify-content: center;
37-
`;
38-
3942
interface ILatestCases {
4043
title?: string;
4144
filters?: Dispute_Filter;
@@ -49,15 +52,15 @@ const LatestCases: React.FC<ILatestCases> = ({ title = "Latest Cases", filters,
4952

5053
return isUndefined(disputes) || disputes.length > 0 ? (
5154
<Container>
52-
<Title>{title}</Title>
55+
<TitleAndButtonContainer>
56+
<Title>{title}</Title>
57+
<SeeAllCasesButton {...{ courtId, courtName }} />
58+
</TitleAndButtonContainer>
5359
<DisputeContainer>
5460
{isUndefined(disputes)
5561
? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
5662
: disputes.map((dispute) => <DisputeView key={dispute.id} {...dispute} overrideIsList />)}
5763
</DisputeContainer>
58-
<ButtonContainer>
59-
<AllCasesButton {...{ courtId, courtName }} />
60-
</ButtonContainer>
6164
</Container>
6265
) : null;
6366
};
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
3+
import { encodeURIFilter } from "utils/uri";
4+
5+
import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
6+
import { InternalLink } from "./InternalLink";
7+
8+
interface ISeeAllCasesButton {
9+
courtId?: string;
10+
}
11+
12+
const SeeAllCasesButton: React.FC<ISeeAllCasesButton> = ({ courtId }) => {
13+
const filter = courtId ? { court: courtId } : {};
14+
const link = `/cases/display/1/desc/${encodeURIFilter(filter)}`;
15+
const labelText = "See all";
16+
17+
return (
18+
<InternalLink to={link}>
19+
<BlueIconTextButtonContainer>{labelText}</BlueIconTextButtonContainer>
20+
</InternalLink>
21+
);
22+
};
23+
24+
export default SeeAllCasesButton;
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
3+
import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
4+
import { InternalLink } from "./InternalLink";
5+
6+
const SeeAllJurorsButton: React.FC = () => {
7+
return (
8+
<InternalLink to={"/jurors/1/desc/all"}>
9+
<BlueIconTextButtonContainer>
10+
<label>See all</label>
11+
</BlueIconTextButtonContainer>
12+
</InternalLink>
13+
);
14+
};
15+
16+
export default SeeAllJurorsButton;

web/src/pages/Home/TopJurors/index.tsx

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,22 @@ import { SkeletonDisputeListItem } from "components/StyledSkeleton";
1212

1313
import Header from "./Header";
1414
import JurorCard from "./JurorCard";
15-
import JurorsLeaderboardButton from "components/JurorsLeaderboardButton";
15+
import SeeAllJurorsButton from "components/SeeAllJurorsButton";
1616

1717
const Container = styled.div`
18-
margin-top: ${responsiveSize(24, 48)};
18+
margin-top: ${responsiveSize(28, 48)};
1919
`;
2020

21-
const Title = styled.h1`
21+
const TitleAndButtonContainer = styled.div`
22+
display: flex;
23+
flex-direction: row;
24+
align-items: center;
25+
gap: 12px;
2226
margin-bottom: ${responsiveSize(12, 24)};
27+
`;
28+
29+
const Title = styled.h1`
30+
margin-bottom: 0;
2331
font-size: ${responsiveSize(20, 24)};
2432
`;
2533

@@ -40,12 +48,6 @@ export const StyledLabel = styled.label`
4048
font-size: 16px;
4149
`;
4250

43-
const ButtonContainer = styled.div`
44-
display: flex;
45-
margin-top: 16px;
46-
justify-content: center;
47-
`;
48-
4951
const TopJurors: React.FC = () => {
5052
const { data: queryJurors } = useJurorsByCoherenceScore(0, 5, "coherenceScore", "desc");
5153

@@ -56,7 +58,10 @@ const TopJurors: React.FC = () => {
5658

5759
return (
5860
<Container>
59-
<Title>Top Jurors</Title>
61+
<TitleAndButtonContainer>
62+
<Title>Top Jurors</Title>
63+
<SeeAllJurorsButton />
64+
</TitleAndButtonContainer>
6065
{!isUndefined(topJurors) && topJurors.length === 0 ? (
6166
<StyledLabel>No jurors found</StyledLabel>
6267
) : (
@@ -67,9 +72,6 @@ const TopJurors: React.FC = () => {
6772
: [...Array(5)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
6873
</ListContainer>
6974
)}
70-
<ButtonContainer>
71-
<JurorsLeaderboardButton />
72-
</ButtonContainer>
7375
</Container>
7476
);
7577
};

0 commit comments

Comments
 (0)