Merge pull request #1350 from kleros/refactor(web)/extract-calc-to-Re…

…sponsiveSize-function

refactor(web): extract-calc-to-ResponsiveSize-func

web/src/components/CasesDisplay/CasesListHeader.tsx

@@ -2,11 +2,12 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import WithHelpTooltip from "components/WithHelpTooltip";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
-  gap: calc(15vw + (40 - 15) * ((100vw - 300px) / (1250 - 300)));
+  gap: calc(15vw + (40 - 15) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   width: 100%;
   height: 100%;
 `;
@@ -16,10 +17,10 @@ const CasesData = styled.div`
   align-items: center;
   justify-content: space-around;
   width: 100%;
-  margin-left: calc(0px + (33) * (100vw - 370px) / (1250 - 370));
+  margin-left: ${responsiveSize(0, 33)};
   flex-wrap: wrap;
   padding: 0 3%;
-  gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300)));
+  gap: ${responsiveSize(24, 48, 300)};
 `;
 
 const CaseTitle = styled.div`
@@ -42,7 +43,7 @@ const CaseTitle = styled.div`
 `;
 
 const StyledLabel = styled.label`
-  padding-left: calc(4px + (8 - 4) * ((100vw - 300px) / (900 - 300)));
+  margin-left: ${responsiveSize(4, 8, 300, 900)};
 `;
 
 const tooltipMsg =

web/src/components/CasesDisplay/Search.tsx

@@ -8,6 +8,7 @@ import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
 import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
@@ -18,7 +19,7 @@ const Container = styled.div`
     () =>
       css`
         flex-direction: row;
-        gap: calc(4px + (22 - 4) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        gap: ${responsiveSize(4, 22)};
       `
   )}
 `;

web/src/components/CasesDisplay/index.tsx

@@ -3,17 +3,18 @@ import styled from "styled-components";
 import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
 import CasesGrid, { ICasesGrid } from "./CasesGrid";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Divider = styled.hr`
   display: flex;
   border: none;
   height: 1px;
   background-color: ${({ theme }) => theme.stroke};
-  margin: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0;
+  margin: ${responsiveSize(20, 24)};
 `;
 
 const StyledTitle = styled.h1`
-  margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875) !important;
+  margin-bottom: ${responsiveSize(32, 48)};
 `;
 
 interface ICasesDisplay extends ICasesGrid {

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -11,6 +11,7 @@ import RoundIcon from "svgs/icons/round.svg";
 import Field from "../Field";
 import { getCourtsPath } from "pages/Courts/CourtDetails";
 import { useCourtTree } from "hooks/queries/useCourtTree";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
   display: flex;
@@ -56,7 +57,7 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolea
       ${landscapeStyle(
         () => css`
           flex-direction: row;
-          gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
+          gap: ${responsiveSize(4, 24, 300, 900)};
           justify-content: space-around;
         `
       )}

web/src/components/DisputeCard/index.tsx

@@ -15,10 +15,11 @@ import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
 import { isUndefined } from "utils/index";
 import { getLocalRounds } from "utils/getLocalRounds";
+import { responsiveSize } from "styles/responsiveSize";
 
 const StyledCard = styled(Card)`
   width: 100%;
-  height: calc(280px + (296 - 280) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  height: ${responsiveSize(280, 296)};
 
   ${landscapeStyle(
     () =>
@@ -42,7 +43,7 @@ const StyledListItem = styled(Card)`
 
 const CardContainer = styled.div`
   height: calc(100% - 45px);
-  padding: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: ${responsiveSize(20, 24)};
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -67,7 +68,7 @@ const ListTitle = styled.div`
   height: 100%;
   justify-content: start;
   align-items: center;
-  width: calc(30vw + (40 - 30) * ((100vw - 300px) / (1250 - 300)));
+  width: calc(30vw + (40 - 30) * (min(max(100vw, 300px), 1250px)- 300px) / 950);
 `;
 
 export const getPeriodEndTimestamp = (

web/src/components/EvidenceCard.tsx

@@ -7,14 +7,15 @@ import AttachmentIcon from "svgs/icons/attachment.svg";
 import { useIPFSQuery } from "hooks/useIPFSQuery";
 import { shortenAddress } from "utils/shortenAddress";
 import { IPFS_GATEWAY } from "consts/index";
+import { responsiveSize } from "styles/responsiveSize";
 
 const StyledCard = styled(Card)`
   width: 100%;
   height: auto;
 `;
 
 const TextContainer = styled.div`
-  padding: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: ${responsiveSize(8, 24)};
   > * {
     overflow-wrap: break-word;
     margin: 0;
@@ -34,7 +35,7 @@ const BottomShade = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 12px calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: 12px ${responsiveSize(8, 24)};
   > * {
     flex-basis: 1;
     flex-shrink: 0;
@@ -45,8 +46,7 @@ const BottomShade = styled.div`
 const StyledA = styled.a`
   display: flex;
   margin-left: auto;
-  gap: calc(5px + (6 - 5) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-
+  gap: ${responsiveSize(5, 6)};
   ${landscapeStyle(
     () => css`
       > svg {

web/src/components/LatestCases.tsx

@@ -5,13 +5,14 @@ import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
 import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
-  margin-top: calc(48px + (80 - 48) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-top: ${responsiveSize(48, 80)};
 `;
 
 const Title = styled.h1`
-  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-bottom: ${responsiveSize(16, 48)};
 `;
 
 const DisputeContainer = styled.div`

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

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
@@ -8,17 +9,17 @@ const Container = styled.div`
 
 const StyledAmountFunded = styled.div`
   display: flex;
-  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-left: ${responsiveSize(8, 44, 300)};
+  margin-right: ${responsiveSize(8, 44, 300)};
   color: ${({ theme }) => theme.secondaryText};
   text-align: center;
 `;
 
 const StyledOptionFunded = styled.div`
   display: flex;
-  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
-  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-bottom: ${responsiveSize(16, 32, 300)};
+  margin-left: ${responsiveSize(8, 44, 300)};
+  margin-right: ${responsiveSize(8, 44, 300)};
   color: ${({ theme }) => theme.secondaryText};
   text-align: center;
 `;

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

@@ -5,6 +5,7 @@ import { useAccount } from "wagmi";
 import { isUndefined } from "utils/index";
 import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
 import KlerosLogo from "tsx:svgs/icons/kleros.svg";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
@@ -19,9 +20,9 @@ const StyledKlerosLogo = styled(KlerosLogo)`
 
 const StyledTitle = styled.div`
   display: flex;
-  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
-  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-bottom: ${responsiveSize(16, 32, 300)};
+  margin-left: ${responsiveSize(8, 44, 300)};
+  margin-right: ${responsiveSize(8, 44, 300)};
   color: ${({ theme }) => theme.secondaryText};
   text-align: center;
 `;
@@ -30,20 +31,20 @@ const AmountStakedOrWithdrawnContainer = styled.div`
   font-size: 24px;
   font-weight: 600;
   color: ${({ theme }) => theme.secondaryPurple};
-  margin-bottom: calc(0px + (4 - 0) * ((100vw - 300px) / (1250 - 300)));
+  margin-bottom: ${responsiveSize(0, 4, 300)};
 `;
 
 const TotalStakeContainer = styled.div`
   display: flex;
   font-size: 14px;
   align-items: center;
   justify-content: center;
-  margin-bottom: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-bottom: ${responsiveSize(8, 32, 300)};
 `;
 
 const MyStakeContainer = styled.div`
   display: flex;
-  margin: 0px calc(4px + (8 - 4) * ((100vw - 300px) / (1250 - 300)));
+  margin: 0px ${responsiveSize(4, 8, 300)};
   color: ${({ theme }) => theme.secondaryText};
 `;
 

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

@@ -1,13 +1,14 @@
 import React from "react";
 import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
   color: ${({ theme }) => theme.secondaryText};
   text-align: center;
-  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-top: ${responsiveSize(8, 24, 300)};
+  margin-right: ${responsiveSize(8, 44, 300)};
+  margin-left: ${responsiveSize(8, 44, 300)};
 `;
 
 const StakeWithdrawExtraInfo: React.FC = () => {

web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import styled from "styled-components";
 import InfoCircle from "tsx:svgs/icons/info-circle.svg";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
   gap: 4px;
   text-align: center;
-  margin: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin: ${responsiveSize(8, 24, 300)} ${responsiveSize(8, 32, 300)} 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 19px;

web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx

@@ -5,6 +5,7 @@ import { CompactPagination } from "@kleros/ui-components-library";
 import { Overlay } from "components/Overlay";
 import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
 import { useFocusOutside } from "hooks/useFocusOutside";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div<{ isVisible: boolean }>`
   display: ${({ isVisible }) => (isVisible ? "flex" : "none")};
@@ -24,7 +25,7 @@ const Container = styled.div<{ isVisible: boolean }>`
     () => css`
       overflow-y: hidden;
       top: 50%;
-      width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      width: ${responsiveSize(700, 900)};
       flex-direction: row;
       height: 500px;
     `
@@ -35,7 +36,7 @@ const LeftContainer = styled.div`
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: 86vw;
-  padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: ${responsiveSize(24, 32)};
   padding-bottom: 32px;
   background-color: ${({ theme }) => theme.whiteBackground};
   border-top-left-radius: 3px;
@@ -44,7 +45,7 @@ const LeftContainer = styled.div`
   ${landscapeStyle(
     () => css`
       overflow-y: hidden;
-      width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      width: ${responsiveSize(350, 450)};
       height: 500px;
     `
   )}
@@ -60,7 +61,7 @@ const HowItWorks = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: calc(32px + (64 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-bottom: ${responsiveSize(32, 64)};
 
   label {
     color: ${({ theme }) => theme.secondaryPurple};
@@ -97,7 +98,7 @@ const Close = styled.label`
     () => css`
       display: flex;
       position: absolute;
-      top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      top: ${responsiveSize(24, 32)};
       right: 17px;
       display: flex;
       align-items: flex-end;
@@ -121,15 +122,15 @@ const RightContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 17px;
+  padding: ${responsiveSize(24, 32)} 17px;
   background-color: ${({ theme }) => theme.mediumBlue};
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 
   ${landscapeStyle(
     () => css`
       overflow-y: hidden;
-      width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      width: ${responsiveSize(350, 450)};
       height: 500px;
     `
   )}

web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import PnkIcon from "tsx:assets/svgs/styled/pnk.svg";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
@@ -11,9 +12,8 @@ const Container = styled.div`
 `;
 
 const StyledPnkIcon = styled(PnkIcon)`
-  width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-
+  width: ${responsiveSize(220, 280)};
+  height: ${responsiveSize(220, 252)};
   [class$="stop-1"] {
     stop-color: ${({ theme }) => theme.primaryBlue};
   }

web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import MainStructureTemplate from "./MainStructureTemplate";
+import { responsiveSize } from "styles/responsiveSize";
 
 export const ParagraphsContainer = styled.div`
   display: flex;
@@ -20,8 +21,7 @@ export const LeftContentContainer = styled.div`
 `;
 
 export const StyledImage = styled.div`
-  width: calc(260px + (460 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-
+  width: ${responsiveSize(260, 460)};
   ${landscapeStyle(
     () => css`
       width: 389px;