Skip to content

Commit edbee9d

Browse files
alcercualcercu
authored
Merge pull request #1350 from kleros/refactor(web)/extract-calc-to-ResponsiveSize-function
refactor(web): extract-calc-to-ResponsiveSize-func
2 parents 4a007e3 + 49498e2 commit edbee9d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+160
-117
lines changed

‎web/src/components/CasesDisplay/CasesListHeader.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import React from "react";
22
import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import WithHelpTooltip from "components/WithHelpTooltip";
5+
import { responsiveSize } from "styles/responsiveSize";
56

67
const Container = styled.div`
78
display: flex;
89
justify-content: space-between;
9-
gap: calc(15vw + (40 - 15) * ((100vw - 300px) / (1250 - 300)));
10+
gap: calc(15vw + (40 - 15) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
1011
width: 100%;
1112
height: 100%;
1213
`;
@@ -16,10 +17,10 @@ const CasesData = styled.div`
1617
align-items: center;
1718
justify-content: space-around;
1819
width: 100%;
19-
margin-left: calc(0px + (33) * (100vw - 370px) / (1250 - 370));
20+
margin-left: ${responsiveSize(0, 33)};
2021
flex-wrap: wrap;
2122
padding: 0 3%;
22-
gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300)));
23+
gap: ${responsiveSize(24, 48, 300)};
2324
`;
2425

2526
const CaseTitle = styled.div`
@@ -42,7 +43,7 @@ const CaseTitle = styled.div`
4243
`;
4344

4445
const StyledLabel = styled.label`
45-
padding-left: calc(4px + (8 - 4) * ((100vw - 300px) / (900 - 300)));
46+
margin-left: ${responsiveSize(4, 8, 300, 900)};
4647
`;
4748

4849
const tooltipMsg =

‎web/src/components/CasesDisplay/Search.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
88
import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
99
import { isUndefined } from "utils/index";
1010
import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
11+
import { responsiveSize } from "styles/responsiveSize";
1112

1213
const Container = styled.div`
1314
display: flex;
@@ -18,7 +19,7 @@ const Container = styled.div`
1819
() =>
1920
css`
2021
flex-direction: row;
21-
gap: calc(4px + (22 - 4) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
22+
gap: ${responsiveSize(4, 22)};
2223
`
2324
)}
2425
`;

‎web/src/components/CasesDisplay/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@ import styled from "styled-components";
33
import Search from "./Search";
44
import StatsAndFilters from "./StatsAndFilters";
55
import CasesGrid, { ICasesGrid } from "./CasesGrid";
6+
import { responsiveSize } from "styles/responsiveSize";
67

78
const Divider = styled.hr`
89
display: flex;
910
border: none;
1011
height: 1px;
1112
background-color: ${({ theme }) => theme.stroke};
12-
margin: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0;
13+
margin: ${responsiveSize(20, 24)};
1314
`;
1415

1516
const StyledTitle = styled.h1`
16-
margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875) !important;
17+
margin-bottom: ${responsiveSize(32, 48)};
1718
`;
1819

1920
interface ICasesDisplay extends ICasesGrid {

‎web/src/components/DisputeCard/DisputeInfo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import RoundIcon from "svgs/icons/round.svg";
1111
import Field from "../Field";
1212
import { getCourtsPath } from "pages/Courts/CourtDetails";
1313
import { useCourtTree } from "hooks/queries/useCourtTree";
14+
import { responsiveSize } from "styles/responsiveSize";
1415

1516
const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
1617
display: flex;
@@ -56,7 +57,7 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolea
5657
${landscapeStyle(
5758
() => css`
5859
flex-direction: row;
59-
gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
60+
gap: ${responsiveSize(4, 24, 300, 900)};
6061
justify-content: space-around;
6162
`
6263
)}

‎web/src/components/DisputeCard/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ import DisputeInfo from "./DisputeInfo";
1515
import PeriodBanner from "./PeriodBanner";
1616
import { isUndefined } from "utils/index";
1717
import { getLocalRounds } from "utils/getLocalRounds";
18+
import { responsiveSize } from "styles/responsiveSize";
1819

1920
const StyledCard = styled(Card)`
2021
width: 100%;
21-
height: calc(280px + (296 - 280) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
22+
height: ${responsiveSize(280, 296)};
2223
2324
${landscapeStyle(
2425
() =>
@@ -42,7 +43,7 @@ const StyledListItem = styled(Card)`
4243

4344
const CardContainer = styled.div`
4445
height: calc(100% - 45px);
45-
padding: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
46+
padding: ${responsiveSize(20, 24)};
4647
display: flex;
4748
flex-direction: column;
4849
justify-content: space-between;
@@ -67,7 +68,7 @@ const ListTitle = styled.div`
6768
height: 100%;
6869
justify-content: start;
6970
align-items: center;
70-
width: calc(30vw + (40 - 30) * ((100vw - 300px) / (1250 - 300)));
71+
width: calc(30vw + (40 - 30) * (min(max(100vw, 300px), 1250px)- 300px) / 950);
7172
`;
7273

7374
export const getPeriodEndTimestamp = (

‎web/src/components/EvidenceCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import AttachmentIcon from "svgs/icons/attachment.svg";
77
import { useIPFSQuery } from "hooks/useIPFSQuery";
88
import { shortenAddress } from "utils/shortenAddress";
99
import { IPFS_GATEWAY } from "consts/index";
10+
import { responsiveSize } from "styles/responsiveSize";
1011

1112
const StyledCard = styled(Card)`
1213
width: 100%;
1314
height: auto;
1415
`;
1516

1617
const TextContainer = styled.div`
17-
padding: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
18+
padding: ${responsiveSize(8, 24)};
1819
> * {
1920
overflow-wrap: break-word;
2021
margin: 0;
@@ -34,7 +35,7 @@ const BottomShade = styled.div`
3435
display: flex;
3536
align-items: center;
3637
gap: 16px;
37-
padding: 12px calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
38+
padding: 12px ${responsiveSize(8, 24)};
3839
> * {
3940
flex-basis: 1;
4041
flex-shrink: 0;
@@ -45,8 +46,7 @@ const BottomShade = styled.div`
4546
const StyledA = styled.a`
4647
display: flex;
4748
margin-left: auto;
48-
gap: calc(5px + (6 - 5) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
49-
49+
gap: ${responsiveSize(5, 6)};
5050
${landscapeStyle(
5151
() => css`
5252
> svg {

‎web/src/components/LatestCases.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
55
import DisputeCard from "components/DisputeCard";
66
import { SkeletonDisputeCard } from "components/StyledSkeleton";
77
import { isUndefined } from "utils/index";
8+
import { responsiveSize } from "styles/responsiveSize";
89

910
const Container = styled.div`
10-
margin-top: calc(48px + (80 - 48) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
11+
margin-top: ${responsiveSize(48, 80)};
1112
`;
1213

1314
const Title = styled.h1`
14-
margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
15+
margin-bottom: ${responsiveSize(16, 48)};
1516
`;
1617

1718
const DisputeContainer = styled.div`

‎web/src/components/Popup/Description/Appeal.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { responsiveSize } from "styles/responsiveSize";
34

45
const Container = styled.div`
56
display: flex;
@@ -8,17 +9,17 @@ const Container = styled.div`
89

910
const StyledAmountFunded = styled.div`
1011
display: flex;
11-
margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
12-
margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
12+
margin-left: ${responsiveSize(8, 44, 300)};
13+
margin-right: ${responsiveSize(8, 44, 300)};
1314
color: ${({ theme }) => theme.secondaryText};
1415
text-align: center;
1516
`;
1617

1718
const StyledOptionFunded = styled.div`
1819
display: flex;
19-
margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
20-
margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
21-
margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
20+
margin-bottom: ${responsiveSize(16, 32, 300)};
21+
margin-left: ${responsiveSize(8, 44, 300)};
22+
margin-right: ${responsiveSize(8, 44, 300)};
2223
color: ${({ theme }) => theme.secondaryText};
2324
text-align: center;
2425
`;

‎web/src/components/Popup/Description/StakeWithdraw.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useAccount } from "wagmi";
55
import { isUndefined } from "utils/index";
66
import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
77
import KlerosLogo from "tsx:svgs/icons/kleros.svg";
8+
import { responsiveSize } from "styles/responsiveSize";
89

910
const Container = styled.div`
1011
display: flex;
@@ -19,9 +20,9 @@ const StyledKlerosLogo = styled(KlerosLogo)`
1920

2021
const StyledTitle = styled.div`
2122
display: flex;
22-
margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
23-
margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
24-
margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
23+
margin-bottom: ${responsiveSize(16, 32, 300)};
24+
margin-left: ${responsiveSize(8, 44, 300)};
25+
margin-right: ${responsiveSize(8, 44, 300)};
2526
color: ${({ theme }) => theme.secondaryText};
2627
text-align: center;
2728
`;
@@ -30,20 +31,20 @@ const AmountStakedOrWithdrawnContainer = styled.div`
3031
font-size: 24px;
3132
font-weight: 600;
3233
color: ${({ theme }) => theme.secondaryPurple};
33-
margin-bottom: calc(0px + (4 - 0) * ((100vw - 300px) / (1250 - 300)));
34+
margin-bottom: ${responsiveSize(0, 4, 300)};
3435
`;
3536

3637
const TotalStakeContainer = styled.div`
3738
display: flex;
3839
font-size: 14px;
3940
align-items: center;
4041
justify-content: center;
41-
margin-bottom: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
42+
margin-bottom: ${responsiveSize(8, 32, 300)};
4243
`;
4344

4445
const MyStakeContainer = styled.div`
4546
display: flex;
46-
margin: 0px calc(4px + (8 - 4) * ((100vw - 300px) / (1250 - 300)));
47+
margin: 0px ${responsiveSize(4, 8, 300)};
4748
color: ${({ theme }) => theme.secondaryText};
4849
`;
4950

‎web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { responsiveSize } from "styles/responsiveSize";
34

45
const Container = styled.div`
56
display: flex;
67
color: ${({ theme }) => theme.secondaryText};
78
text-align: center;
8-
margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
9-
margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
10-
margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300)));
9+
margin-top: ${responsiveSize(8, 24, 300)};
10+
margin-right: ${responsiveSize(8, 44, 300)};
11+
margin-left: ${responsiveSize(8, 44, 300)};
1112
`;
1213

1314
const StakeWithdrawExtraInfo: React.FC = () => {

0 commit comments

Comments
 (0)