refactor(web): update-responsiveSize-func

Author: tractorss

web/src/components/CasesDisplay/CasesListHeader.tsx

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

web/src/components/CasesDisplay/Search.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
     () =>
       css`
         flex-direction: row;
-        ${responsiveSize("gap", 4, 22)}
+        gap: ${responsiveSize(4, 22)};
       `
   )}
 `;

web/src/components/CasesDisplay/index.tsx

@@ -10,11 +10,11 @@ const Divider = styled.hr`
   border: none;
   height: 1px;
   background-color: ${({ theme }) => theme.stroke};
-  ${responsiveSize("margin", 20, 24)}
+  margin: ${responsiveSize(20, 24)};
 `;
 
 const StyledTitle = styled.h1`
-  ${responsiveSize("marginBottom", 32, 48)}
+  margin-bottom: ${responsiveSize(32, 48)};
 `;
 
 interface ICasesDisplay extends ICasesGrid {

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -57,7 +57,7 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolea
       ${landscapeStyle(
         () => css`
           flex-direction: row;
-          ${responsiveSize("gap", 4, 24, 300, 900)}
+          gap: ${responsiveSize(4, 24, 300, 900)};
           justify-content: space-around;
         `
       )}

web/src/components/DisputeCard/index.tsx

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

web/src/components/EvidenceCard.tsx

@@ -15,7 +15,7 @@ const StyledCard = styled(Card)`
 `;
 
 const TextContainer = styled.div`
-  ${responsiveSize("padding", 8, 24)}
+  padding: ${responsiveSize(8, 24)};
   > * {
     overflow-wrap: break-word;
     margin: 0;
@@ -35,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;
@@ -46,8 +46,7 @@ const BottomShade = styled.div`
 const StyledA = styled.a`
   display: flex;
   margin-left: auto;
-  ${responsiveSize("gap", 5, 6)}
-
+  gap: ${responsiveSize(5, 6)};
   ${landscapeStyle(
     () => css`
       > svg {

web/src/components/LatestCases.tsx

@@ -8,11 +8,11 @@ import { isUndefined } from "utils/index";
 import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
-  ${responsiveSize("marginTop", 48, 80)}
+  margin-top: ${responsiveSize(48, 80)};
 `;
 
 const Title = styled.h1`
-  ${responsiveSize("marginBottom", 16, 48)}
+  margin-bottom: ${responsiveSize(16, 48)};
 `;
 
 const DisputeContainer = styled.div`

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

@@ -9,17 +9,17 @@ const Container = styled.div`
 
 const StyledAmountFunded = styled.div`
   display: flex;
-  ${responsiveSize("marginLeft", 8, 44, 300)}
-  ${responsiveSize("marginRight", 8, 44, 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;
-  ${responsiveSize("marginBottom", 16, 32, 300)}
-  ${responsiveSize("marginLeft", 8, 44, 300)}
-  ${responsiveSize("marginRight", 8, 44, 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

@@ -20,9 +20,9 @@ const StyledKlerosLogo = styled(KlerosLogo)`
 
 const StyledTitle = styled.div`
   display: flex;
-  ${responsiveSize("marginBottom", 16, 32, 300)}
-  ${responsiveSize("marginLeft", 8, 44, 300)}
-  ${responsiveSize("marginRight", 8, 44, 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;
 `;
@@ -31,20 +31,20 @@ const AmountStakedOrWithdrawnContainer = styled.div`
   font-size: 24px;
   font-weight: 600;
   color: ${({ theme }) => theme.secondaryPurple};
-  ${responsiveSize("marginBottom", 0, 4, 300)}
+  margin-bottom: ${responsiveSize(0, 4, 300)};
 `;
 
 const TotalStakeContainer = styled.div`
   display: flex;
   font-size: 14px;
   align-items: center;
   justify-content: center;
-  ${responsiveSize("marginBottom", 8, 32, 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

@@ -6,9 +6,9 @@ const Container = styled.div`
   display: flex;
   color: ${({ theme }) => theme.secondaryText};
   text-align: center;
-  ${responsiveSize("marginLeft", 8, 44, 300)}
-  ${responsiveSize("marginRight", 8, 44, 300)}
-  ${responsiveSize("marginTop", 8, 24, 300)}
+  margin-top: ${responsiveSize(8, 24, 300)};
+  margin-right: ${responsiveSize(8, 44, 300)};
+  margin-left: ${responsiveSize(8, 44, 300)};
 `;
 
 const StakeWithdrawExtraInfo: React.FC = () => {