From 007a5705601a38ba1d3783608bb6dd618003cd73 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 6 Dec 2023 22:15:15 +0530 Subject: [PATCH 1/2] refactor(web): extract-calc-to-ResponsiveSize-func --- .../CasesDisplay/CasesListHeader.tsx | 9 +++--- web/src/components/CasesDisplay/Search.tsx | 3 +- web/src/components/CasesDisplay/index.tsx | 5 ++-- .../components/DisputeCard/DisputeInfo.tsx | 3 +- web/src/components/DisputeCard/index.tsx | 7 +++-- web/src/components/EvidenceCard.tsx | 5 ++-- web/src/components/LatestCases.tsx | 5 ++-- .../components/Popup/Description/Appeal.tsx | 11 +++---- .../Popup/Description/StakeWithdraw.tsx | 11 +++---- .../ExtraInfo/StakeWithdrawExtraInfo.tsx | 7 +++-- .../ExtraInfo/VoteWithCommitExtraInfo.tsx | 3 +- .../MiniGuides/MainStructureTemplate.tsx | 13 +++++---- .../MiniGuides/Onboarding/PnkLogoAndTitle.tsx | 5 ++-- .../Popup/MiniGuides/PageContentsTemplate.tsx | 3 +- web/src/components/Popup/index.tsx | 26 +++++++++-------- web/src/components/StatDisplay.tsx | 3 +- web/src/components/StyledSkeleton.tsx | 3 +- .../components/Verdict/DisputeTimeline.tsx | 3 +- web/src/components/Verdict/VerdictBanner.tsx | 3 +- web/src/layout/Header/DesktopHeader.tsx | 8 +++-- web/src/layout/Header/navbar/DappList.tsx | 5 ++-- web/src/layout/Header/navbar/Explore.tsx | 3 +- .../Header/navbar/Menu/Settings/index.tsx | 3 +- web/src/layout/Header/navbar/Product.tsx | 3 +- .../pages/Cases/CaseDetails/Appeal/index.tsx | 3 +- .../Cases/CaseDetails/Evidence/index.tsx | 3 +- .../Cases/CaseDetails/Overview/Policies.tsx | 3 +- .../Cases/CaseDetails/Overview/index.tsx | 5 ++-- web/src/pages/Cases/CaseDetails/Timeline.tsx | 5 ++-- .../pages/Cases/CaseDetails/Voting/index.tsx | 5 ++-- web/src/pages/Cases/CaseDetails/index.tsx | 3 +- web/src/pages/Cases/index.tsx | 7 +++-- web/src/pages/Courts/CourtDetails/index.tsx | 5 ++-- web/src/pages/Courts/index.tsx | 8 +++-- web/src/pages/Dashboard/Courts/Header.tsx | 3 +- web/src/pages/Dashboard/JurorInfo/Header.tsx | 3 +- web/src/pages/Dashboard/JurorInfo/index.tsx | 3 +- web/src/pages/Dashboard/index.tsx | 10 ++++--- web/src/pages/Home/Community/index.tsx | 5 ++-- web/src/pages/Home/CourtOverview/Chart.tsx | 3 +- web/src/pages/Home/CourtOverview/Stats.tsx | 5 ++-- .../Home/TopJurors/Header/DesktopHeader.tsx | 3 +- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 3 +- web/src/pages/Home/TopJurors/index.tsx | 5 ++-- web/src/pages/Home/index.tsx | 7 +++-- web/src/styles/responsiveSize.ts | 29 +++++++++++++++++++ 46 files changed, 177 insertions(+), 99 deletions(-) create mode 100644 web/src/styles/responsiveSize.ts diff --git a/web/src/components/CasesDisplay/CasesListHeader.tsx b/web/src/components/CasesDisplay/CasesListHeader.tsx index bf5967a1b..b19347953 100644 --- a/web/src/components/CasesDisplay/CasesListHeader.tsx +++ b/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))); + ${responsiveSize("gap", 15, 40, 300, 1250, "vw")} 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)); + ${responsiveSize("marginLeft", 0, 33, 370)} flex-wrap: wrap; padding: 0 3%; - gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300))); + ${responsiveSize("gap", 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))); + ${responsiveSize("marginLeft", 4, 8, 300, 900)} `; const tooltipMsg = diff --git a/web/src/components/CasesDisplay/Search.tsx b/web/src/components/CasesDisplay/Search.tsx index 42c911d58..393430bd8 100644 --- a/web/src/components/CasesDisplay/Search.tsx +++ b/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); + ${responsiveSize("gap", 4, 22)} ` )} `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 03dd742e4..94361961f 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/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; + ${responsiveSize("margin", 20, 24)} `; const StyledTitle = styled.h1` - margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875) !important; + ${responsiveSize("marginBottom", 32, 48)} `; interface ICasesDisplay extends ICasesGrid { diff --git a/web/src/components/DisputeCard/DisputeInfo.tsx b/web/src/components/DisputeCard/DisputeInfo.tsx index c50dab7ea..f5e806b63 100644 --- a/web/src/components/DisputeCard/DisputeInfo.tsx +++ b/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))); + ${responsiveSize("gap", 4, 24, 300, 900)} justify-content: space-around; ` )} diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx index c449806e9..e9bbbfc4a 100644 --- a/web/src/components/DisputeCard/index.tsx +++ b/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); + ${responsiveSize("height", 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); + ${responsiveSize("padding", 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))); + ${responsiveSize("width", 30, 40, 300, 1250, "vw")} `; export const getPeriodEndTimestamp = ( diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index c6f8d0154..9ba922bca 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -7,6 +7,7 @@ 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%; @@ -14,7 +15,7 @@ const StyledCard = styled(Card)` `; const TextContainer = styled.div` - padding: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 8, 24)} > * { overflow-wrap: break-word; margin: 0; @@ -45,7 +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); + ${responsiveSize("gap", 5, 6)} ${landscapeStyle( () => css` diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 2439b910c..b0d2492e1 100644 --- a/web/src/components/LatestCases.tsx +++ b/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); + ${responsiveSize("marginTop", 48, 80)} `; const Title = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 48)} `; const DisputeContainer = styled.div` diff --git a/web/src/components/Popup/Description/Appeal.tsx b/web/src/components/Popup/Description/Appeal.tsx index e994b96c1..3c1d0aca0 100644 --- a/web/src/components/Popup/Description/Appeal.tsx +++ b/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))); + ${responsiveSize("marginLeft", 8, 44, 300)} + ${responsiveSize("marginRight", 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))); + ${responsiveSize("marginBottom", 16, 32, 300)} + ${responsiveSize("marginLeft", 8, 44, 300)} + ${responsiveSize("marginRight", 8, 44, 300)} color: ${({ theme }) => theme.secondaryText}; text-align: center; `; diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx index e781a462b..9a02d2c92 100644 --- a/web/src/components/Popup/Description/StakeWithdraw.tsx +++ b/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))); + ${responsiveSize("marginBottom", 16, 32, 300)} + ${responsiveSize("marginLeft", 8, 44, 300)} + ${responsiveSize("marginRight", 8, 44, 300)} color: ${({ theme }) => theme.secondaryText}; text-align: center; `; @@ -30,7 +31,7 @@ const AmountStakedOrWithdrawnContainer = styled.div` font-size: 24px; font-weight: 600; color: ${({ theme }) => theme.secondaryPurple}; - margin-bottom: calc(0px + (4 - 0) * ((100vw - 300px) / (1250 - 300))); + ${responsiveSize("marginBottom", 0, 4, 300)} `; const TotalStakeContainer = styled.div` @@ -38,7 +39,7 @@ const TotalStakeContainer = styled.div` font-size: 14px; align-items: center; justify-content: center; - margin-bottom: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300))); + ${responsiveSize("marginBottom", 8, 32, 300)} `; const MyStakeContainer = styled.div` diff --git a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx index 5ca4b4169..c52e4a1c5 100644 --- a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx +++ b/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))); + ${responsiveSize("marginLeft", 8, 44, 300)} + ${responsiveSize("marginRight", 8, 44, 300)} + ${responsiveSize("marginTop", 8, 24, 300)} `; const StakeWithdrawExtraInfo: React.FC = () => { diff --git a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx index df474c563..f2343c19d 100644 --- a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx +++ b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx @@ -1,13 +1,14 @@ 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))); + ${responsiveSize("marginTop", 8, 24, 300)} font-size: 14px; font-weight: 400; line-height: 19px; diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 3f511fa26..4ad51e664 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/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); + ${responsiveSize("width", 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); + ${responsiveSize("padding", 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); + ${responsiveSize("width", 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); + ${responsiveSize("marginBottom", 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); + ${responsiveSize("top", 24, 32)} right: 17px; display: flex; align-items: flex-end; @@ -129,7 +130,7 @@ const RightContainer = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("width", 350, 450)} height: 500px; ` )} diff --git a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx index 40e213e33..a69ddf18b 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx +++ b/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,8 +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); + ${responsiveSize("width", 220, 280)} + ${responsiveSize("height", 220, 252)} [class$="stop-1"] { stop-color: ${({ theme }) => theme.primaryBlue}; diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index d805a6a3a..e3bf070ea 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/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,7 +21,7 @@ export const LeftContentContainer = styled.div` `; export const StyledImage = styled.div` - width: calc(260px + (460 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("width", 260, 460)} ${landscapeStyle( () => css` diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx index 0b1edfe64..32224d159 100644 --- a/web/src/components/Popup/index.tsx +++ b/web/src/components/Popup/index.tsx @@ -9,13 +9,14 @@ import VoteWithoutCommit from "./Description/VoteWithoutCommit"; import Appeal from "./Description/Appeal"; import VoteWithCommitExtraInfo from "./ExtraInfo/VoteWithCommitExtraInfo"; import StakeWithdrawExtraInfo from "./ExtraInfo/StakeWithdrawExtraInfo"; +import { responsiveSize } from "styles/responsiveSize"; const Header = styled.h1` display: flex; - margin-top: calc(12px + (32 - 12) * ((100vw - 375px) / (1250 - 375))); - margin-bottom: calc(12px + (24 - 12) * ((100vw - 375px) / (1250 - 375))); - margin-left: calc(8px + (12 - 8) * ((100vw - 375px) / (1250 - 375))); - margin-right: calc(8px + (12 - 8) * ((100vw - 375px) / (1250 - 375))); + ${responsiveSize("marginTop", 12, 32)} + ${responsiveSize("marginBottom", 12, 24)} + ${responsiveSize("marginLeft", 8, 12)} + ${responsiveSize("marginRight", 8, 12)} text-align: center; font-size: 24px; font-weight: 600; @@ -23,20 +24,21 @@ const Header = styled.h1` `; const IconContainer = styled.div` - width: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375)); + ${responsiveSize("width", 150, 228)} + display: flex; align-items: center; justify-content: center; svg { display: inline-block; - width: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375)); - height: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375)); + ${responsiveSize("width", 150, 228)} + ${responsiveSize("height", 150, 228)} } `; const StyledButton = styled(Button)` - margin: calc(16px + (32 - 16) * ((100vw - 375px) / (1250 - 375))); + ${responsiveSize("margin", 16, 32)} `; const Container = styled.div` @@ -66,7 +68,7 @@ const Container = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375)); + ${responsiveSize("width", 300, 600)} ` )} `; @@ -74,9 +76,9 @@ const Container = styled.div` const VoteDescriptionContainer = styled.div` display: flex; flex-direction: column; - margin-bottom: calc(16px + (32 - 16) * ((100vw - 375px) / (1250 - 375))); - margin-left: calc(8px + (32 - 8) * ((100vw - 375px) / (1250 - 375))); - margin-right: calc(8px + (32 - 8) * ((100vw - 375px) / (1250 - 375))); + ${responsiveSize("marginBottom", 16, 32)} + ${responsiveSize("marginLeft", 8, 32)} + ${responsiveSize("marginRight", 8, 32)} color: ${({ theme }) => theme.secondaryText}; text-align: center; line-height: 21.8px; diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx index 79d1073c6..8d6014b1e 100644 --- a/web/src/components/StatDisplay.tsx +++ b/web/src/components/StatDisplay.tsx @@ -1,6 +1,7 @@ import React from "react"; import { landscapeStyle } from "styles/landscapeStyle"; import styled, { useTheme, css } from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; @@ -10,7 +11,7 @@ const Container = styled.div` ${landscapeStyle( () => css` - margin-bottom: calc(16px + (30 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 30)} ` )} `; diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx index 913a350a6..6f6ebf749 100644 --- a/web/src/components/StyledSkeleton.tsx +++ b/web/src/components/StyledSkeleton.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import Skeleton from "react-loading-skeleton"; +import { responsiveSize } from "styles/responsiveSize"; export const StyledSkeleton = styled(Skeleton)` z-index: 0; @@ -24,7 +25,7 @@ const SkeletonDisputeCardContainer = styled.div` `; const StyledSkeletonDisputeCard = styled(Skeleton)` - height: calc(272px + (296 - 270) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("height", 270, 296)} `; const StyledSkeletonDisputeListItem = styled(Skeleton)` diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx index 05a24b52e..667306584 100644 --- a/web/src/components/Verdict/DisputeTimeline.tsx +++ b/web/src/components/Verdict/DisputeTimeline.tsx @@ -12,6 +12,7 @@ import { useDisputeTemplate } from "queries/useDisputeTemplate"; import { useVotingHistory } from "queries/useVotingHistory"; import { getVoteChoice } from "pages/Cases/CaseDetails/Voting/VotingHistory"; import { getLocalRounds } from "utils/getLocalRounds"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; @@ -27,7 +28,7 @@ const StyledTimeline = styled(CustomTimeline)` const EnforcementContainer = styled.div` display: flex; gap: 8px; - margin-top: calc(12px + (24 - 12) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginTop", 12, 24)} fill: ${({ theme }) => theme.secondaryText}; small { diff --git a/web/src/components/Verdict/VerdictBanner.tsx b/web/src/components/Verdict/VerdictBanner.tsx index 516b0779f..d246b7882 100644 --- a/web/src/components/Verdict/VerdictBanner.tsx +++ b/web/src/components/Verdict/VerdictBanner.tsx @@ -2,11 +2,12 @@ import React from "react"; import styled from "styled-components"; import ClosedCaseIcon from "assets/svgs/icons/check-circle-outline.svg"; import HourglassIcon from "assets/svgs/icons/hourglass.svg"; +import { responsiveSize } from "styles/responsiveSize"; const BannerContainer = styled.div` display: flex; gap: 8px; - margin-bottom: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 24)} svg { width: 16px; height: 16px; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index d118fa85b..9bc8942f6 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -15,6 +15,7 @@ import Help from "./navbar/Menu/Help"; import Settings from "./navbar/Menu/Settings"; import { Overlay } from "components/Overlay"; import { PopupContainer } from "."; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: none; @@ -46,7 +47,8 @@ const MiddleSide = styled.div` const RightSide = styled.div` display: flex; - gap: calc(8px + (16 - 8) * ((100vw - 300px) / (1024 - 300))); + ${responsiveSize("gap", 8, 16, 300, 1024)} + margin-left: 8px; canvas { width: 20px; @@ -57,8 +59,8 @@ const LightButtonContainer = styled.div` display: flex; align-items: center; width: 16px; - margin-left: calc(4px + (8 - 4) * ((100vw - 375px) / (1250 - 375))); - margin-right: calc(12px + (16 - 12) * ((100vw - 375px) / (1250 - 375))); + ${responsiveSize("marginLeft", 4, 8)} + ${responsiveSize("marginRight", 12, 16)} `; const StyledLink = styled(Link)` diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx index 9aca796d5..f11b84a84 100644 --- a/web/src/layout/Header/navbar/DappList.tsx +++ b/web/src/layout/Header/navbar/DappList.tsx @@ -12,6 +12,7 @@ import POH from "svgs/icons/poh-image.png"; import Vea from "svgs/icons/vea.svg"; import Tokens from "svgs/icons/tokens.svg"; import Product from "./Product"; +import { responsiveSize } from "styles/responsiveSize"; const Header = styled.h1` display: flex; @@ -52,7 +53,7 @@ const Container = styled.div` left: 0; right: auto; transform: none; - width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)); + ${responsiveSize("width", 300, 480)} max-height: 80vh; ` )} @@ -67,7 +68,7 @@ const ItemsDiv = styled.div` justify-items: center; max-width: 480px; min-width: 300px; - width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)); + ${responsiveSize("width", 300, 480)} grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); `; diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index 63733174c..4160411b4 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -3,6 +3,7 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { Link, useLocation } from "react-router-dom"; import { useOpenContext } from "../MobileHeader"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; @@ -12,7 +13,7 @@ const Container = styled.div` ${landscapeStyle( () => css` flex-direction: row; - gap: calc(4px + (16 - 4) * ((100vw - 375px) / (1250 - 375))); + ${responsiveSize("gap", 4, 16)} ` )}; `; diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index 0466aead9..eedf4858a 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx @@ -7,6 +7,7 @@ import NotificationSettings from "./Notifications"; import { useFocusOutside } from "hooks/useFocusOutside"; import { Overlay } from "components/Overlay"; import { ISettings } from "../../index"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; @@ -50,7 +51,7 @@ const StyledTabs = styled(Tabs)` ${landscapeStyle( () => css` - width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300))); + ${responsiveSize("width", 300, 424, 300)} ` )} `; diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx index 0dd5c3cf5..b5fb9d7f9 100644 --- a/web/src/layout/Header/navbar/Product.tsx +++ b/web/src/layout/Header/navbar/Product.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.a` cursor: pointer; @@ -15,7 +16,7 @@ const Container = styled.a` transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } gap: 8px; - width: calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)); + ${responsiveSize("width", 100, 130)} white-space: nowrap; background-color: ${({ theme }) => theme.lightBackground}; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx index 16a7afa49..e0f08bd99 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx @@ -6,9 +6,10 @@ import Classic from "./Classic"; import { Periods } from "consts/periods"; import AppealHistory from "./AppealHistory"; import { ClassicAppealProvider } from "hooks/useClassicAppealContext"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 16, 32)} `; export const AppealHeader = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 2e5cd12b1..2c0eb9a97 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -10,6 +10,7 @@ import { SkeletonEvidenceCard } from "components/StyledSkeleton"; import EvidenceCard from "components/EvidenceCard"; import { EnsureChain } from "components/EnsureChain"; import { isUndefined } from "utils/index"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; @@ -18,7 +19,7 @@ const Container = styled.div` gap: 16px; align-items: center; - padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 16, 32)} `; const StyledButton = styled(Button)` diff --git a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx index f9b4c35ff..7e794fed3 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx @@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle"; import { IPFS_GATEWAY } from "consts/index"; import PolicyIcon from "svgs/icons/policy.svg"; import { isUndefined } from "utils/index"; +import { responsiveSize } from "styles/responsiveSize"; const ShadeArea = styled.div` display: flex; @@ -48,7 +49,7 @@ const StyledPolicyIcon = styled(PolicyIcon)` const LinkContainer = styled.div` display: flex; - gap: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("gap", 8, 24)} `; interface IPolicies { diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx index 4c5154335..c2d35bda2 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx @@ -13,14 +13,15 @@ import { useVotingHistory } from "hooks/queries/useVotingHistory"; import { getLocalRounds } from "utils/getLocalRounds"; import { DisputeContext } from "./DisputeContext"; import { Policies } from "./Policies"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; height: auto; display: flex; flex-direction: column; - gap: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("gap", 16, 32)} + ${responsiveSize("padding", 16, 32)} `; const Divider = styled.hr` diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx index 7f83833a1..6dc632d58 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -7,6 +7,7 @@ import { Box, Steps } from "@kleros/ui-components-library"; import { StyledSkeleton } from "components/StyledSkeleton"; import { useCountdown } from "hooks/useCountdown"; import { secondsToDayHourMinute } from "utils/date"; +import { responsiveSize } from "styles/responsiveSize"; const TimeLineContainer = styled(Box)` display: block; @@ -14,8 +15,8 @@ const TimeLineContainer = styled(Box)` height: 98px; border-radius: 0px; padding: 20px 8px 0px 8px; - margin-top: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - margin-bottom: calc(12px + (22 - 12) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginTop", 16, 48)} + ${responsiveSize("marginBottom", 12, 22)} background-color: ${({ theme }) => theme.whiteBackground}; ${landscapeStyle( diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index ff7209c23..3004face6 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -16,9 +16,10 @@ import { getPeriodEndTimestamp } from "components/DisputeCard"; import { useDisputeKitClassicIsVoteActive } from "hooks/contracts/generated"; import VoteIcon from "assets/svgs/icons/voted.svg"; import InfoCircle from "tsx:svgs/icons/info-circle.svg"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 16, 32)} `; const InfoContainer = styled.div` @@ -26,7 +27,7 @@ const InfoContainer = styled.div` flex-direction: row; color: ${({ theme }) => theme.secondaryText}; align-items: center; - gap: calc(4px + (8 - 4) * ((100vw - 300px) / (1250 - 300))); + ${responsiveSize("gap", 4, 8, 300)} svg { min-width: 16px; diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index cb6b61a21..4cbbf9da8 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -10,6 +10,7 @@ import Overview from "./Overview"; import Tabs from "./Tabs"; import Timeline from "./Timeline"; import Voting from "./Voting"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div``; @@ -20,7 +21,7 @@ const StyledCard = styled(Card)` `; const Header = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 48)} `; const CaseDetails: React.FC = () => { diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index 038358e62..7333bcfcb 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -3,13 +3,14 @@ import styled from "styled-components"; import { Routes, Route } from "react-router-dom"; import CaseDetails from "./CaseDetails"; import CasesFetcher from "./CasesFetcher"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 24, 136)} + ${responsiveSize("paddingTop", 32, 80)} + ${responsiveSize("paddingBottom", 76, 96)} max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index f7b3c34f8..cc46e385d 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -20,6 +20,7 @@ import StakePanel from "./StakePanel"; import HowItWorks from "components/HowItWorks"; import Staking from "components/Popup/MiniGuides/Staking"; import { usePnkFaucetWithdrewAlready, prepareWritePnkFaucet, usePnkBalanceOf } from "hooks/contracts/generated"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div``; @@ -59,10 +60,10 @@ const ButtonContainer = styled.div` `; const StyledCard = styled(Card)` - margin-top: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 16, 32)} + ${responsiveSize("marginTop", 16, 24)} width: 100%; height: auto; - padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); min-height: 100px; `; diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index 4461e2eff..c63d022a7 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -3,13 +3,15 @@ import styled from "styled-components"; import { Routes, Route, Navigate } from "react-router-dom"; import TopSearch from "./TopSearch"; import CourtDetails from "./CourtDetails"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 24, 136)} + ${responsiveSize("paddingTop", 32, 80)} + ${responsiveSize("paddingBottom", 76, 96)} + max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx index 2c8902e2a..a09b5ea8b 100644 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle"; import { formatUnits } from "viem"; import { isUndefined } from "utils/index"; import LockerIcon from "svgs/icons/locker.svg"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; @@ -12,7 +13,7 @@ const Container = styled.div` gap: 12px; align-items: flex-start; justify-content: space-between; - margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 32, 48)} ${landscapeStyle( () => css` diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index 0e9942c88..beda43f69 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -5,12 +5,13 @@ import { useToggle } from "react-use"; import XIcon from "svgs/socialmedia/x.svg"; import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; flex-direction: column; justify-content: flex-start; - margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 32, 48)} gap: 12px; ${landscapeStyle( diff --git a/web/src/pages/Dashboard/JurorInfo/index.tsx b/web/src/pages/Dashboard/JurorInfo/index.tsx index 84eda39b9..746ba81f4 100644 --- a/web/src/pages/Dashboard/JurorInfo/index.tsx +++ b/web/src/pages/Dashboard/JurorInfo/index.tsx @@ -9,6 +9,7 @@ import PixelArt from "./PixelArt"; import { useAccount } from "wagmi"; import { useUserQuery } from "queries/useUser"; import { getUserLevelData } from "utils/userLevelCalculation"; +import { responsiveSize } from "styles/responsiveSize"; // import StakingRewards from "./StakingRewards"; const Container = styled.div``; @@ -27,7 +28,7 @@ const Card = styled(_Card)` ${landscapeStyle( () => css` flex-direction: row; - gap: calc(24px + (64 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("gap", 24, 64)} height: 236px; ` )} diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index ee8408029..1daa60677 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -11,13 +11,15 @@ import CasesDisplay from "components/CasesDisplay"; import ConnectWallet from "components/ConnectWallet"; import JurorInfo from "./JurorInfo"; import Courts from "./Courts"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 24, 136)} + ${responsiveSize("paddingTop", 32, 80)} + ${responsiveSize("paddingBottom", 76, 96)} + max-width: 1780px; margin: 0 auto; `; @@ -26,7 +28,7 @@ const StyledCasesDisplay = styled(CasesDisplay)` margin-top: 64px; h1 { - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 48)} } `; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index 0fe20ba24..b9fd2ee4f 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -4,12 +4,13 @@ import { landscapeStyle } from "styles/landscapeStyle"; import { Card } from "@kleros/ui-components-library"; import { Element } from "./Element"; import { section } from "consts/community-elements"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - margin-top: calc(44px + (64 - 44) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginTop", 44, 64)} h1 { - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 48)} } `; diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx index 5e48f574c..6e29a65eb 100644 --- a/web/src/pages/Home/CourtOverview/Chart.tsx +++ b/web/src/pages/Home/CourtOverview/Chart.tsx @@ -5,9 +5,10 @@ import { DropdownSelect } from "@kleros/ui-components-library"; import { StyledSkeleton } from "components/StyledSkeleton"; import { formatUnits } from "viem"; import { useHomePageContext } from "hooks/useHomePageContext"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 32, 48)} display: flex; flex-direction: column; `; diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx index 86c3df690..f7f9c6e85 100644 --- a/web/src/pages/Home/CourtOverview/Stats.tsx +++ b/web/src/pages/Home/CourtOverview/Stats.tsx @@ -15,13 +15,14 @@ import { calculateSubtextRender } from "utils/calculateSubtextRender"; import { CoinIds } from "consts/coingecko"; import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext"; import { useCoinPrice } from "hooks/useCoinPrice"; +import { responsiveSize } from "styles/responsiveSize"; const StyledCard = styled(Card)` width: auto; height: fit-content; gap: 32px; - padding: calc(16px + (30 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-left: calc(16px + (35 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 16, 30)} + ${responsiveSize("paddingLeft", 16, 35)} padding-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx index 937686535..dcff93a05 100644 --- a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx @@ -6,6 +6,7 @@ import Rewards from "./Rewards"; import Coherency from "./Coherency"; import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: none; @@ -24,7 +25,7 @@ const Container = styled.div` grid-template-columns: min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350)) auto; - column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350); + ${responsiveSize("columnGap", 12, 28, 900)} align-items: center; ` )} diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index cd8aa3ebc..d58c3f6a0 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -6,6 +6,7 @@ import JurorTitle from "./JurorTitle"; import Rewards from "./Rewards"; import Coherency from "./Coherency"; import JurorLevel from "./JurorLevel"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: none; @@ -22,7 +23,7 @@ const Container = styled.div` grid-template-columns: min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350)) auto; - column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350); + ${responsiveSize("columnGap", 12, 28, 900)} ` )} `; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index c7b2fee4f..0251ac564 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -6,13 +6,14 @@ import JurorCard from "./JurorCard"; import { isUndefined } from "utils/index"; import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginTop", 64, 80)} `; const Title = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("marginBottom", 16, 48)} `; const ListContainer = styled.div` diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 962e71467..23dbd78f3 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -7,13 +7,14 @@ import HeroImage from "./HeroImage"; import { HomePageProvider } from "hooks/useHomePageContext"; import { getOneYearAgoTimestamp } from "utils/date"; import TopJurors from "./TopJurors"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: calc(24px + (132 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-top: calc(32px + (72 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ${responsiveSize("padding", 24, 132)} + ${responsiveSize("paddingTop", 32, 72)} + ${responsiveSize("paddingBottom", 76, 96)} max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/styles/responsiveSize.ts b/web/src/styles/responsiveSize.ts new file mode 100644 index 000000000..6b0a03fd9 --- /dev/null +++ b/web/src/styles/responsiveSize.ts @@ -0,0 +1,29 @@ +import { css, CSSProperties } from "styled-components"; + +//supported font types +type FontType = "px" | "rem" | "em" | "vw" | "vh" | "%" | "pt"; + +/** + * @description this func applies repsonsivenexx to a css property, the value will range from minSize to maxSize + * @param property the css property to apply responsive sizes too + * @param minSize the minimum value of the property + * @param maxSize max value of the property + * @param minScreen the min screen width at which the property will be at minSize + * @param maxScreen the max screen width at which the property will be at maxSize + * @param fontType + * @returns + * + */ +export const responsiveSize = ( + property: keyof CSSProperties, + minSize: number, + maxSize: number, + minScreen: number = 375, + maxScreen: number = 1250, + fontType: FontType = "px" +) => + css({ + [property]: `calc(${minSize}${fontType} + (${maxSize} - ${minSize}) * (min(max(100vw, ${minScreen}${fontType}), ${maxScreen}${fontType}) - ${minScreen}${fontType}) / (${ + maxScreen - minScreen + }))`, + }); From 609c49aa2afbc29847f65973f5fd01f14df738ed Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 12 Dec 2023 15:32:42 +0530 Subject: [PATCH 2/2] refactor(web): update-responsiveSize-func --- .../CasesDisplay/CasesListHeader.tsx | 8 +++--- web/src/components/CasesDisplay/Search.tsx | 2 +- web/src/components/CasesDisplay/index.tsx | 4 +-- .../components/DisputeCard/DisputeInfo.tsx | 2 +- web/src/components/DisputeCard/index.tsx | 6 ++--- web/src/components/EvidenceCard.tsx | 7 +++-- web/src/components/LatestCases.tsx | 4 +-- .../components/Popup/Description/Appeal.tsx | 10 +++---- .../Popup/Description/StakeWithdraw.tsx | 12 ++++----- .../ExtraInfo/StakeWithdrawExtraInfo.tsx | 6 ++--- .../ExtraInfo/VoteWithCommitExtraInfo.tsx | 3 +-- .../MiniGuides/MainStructureTemplate.tsx | 14 +++++----- .../MiniGuides/Onboarding/PnkLogoAndTitle.tsx | 5 ++-- .../Popup/MiniGuides/PageContentsTemplate.tsx | 3 +-- web/src/components/Popup/index.tsx | 22 +++++++-------- web/src/components/StatDisplay.tsx | 2 +- web/src/components/StyledSkeleton.tsx | 2 +- .../components/Verdict/DisputeTimeline.tsx | 2 +- web/src/components/Verdict/FinalDecision.tsx | 3 ++- web/src/components/Verdict/VerdictBanner.tsx | 2 +- web/src/layout/Header/DesktopHeader.tsx | 6 ++--- web/src/layout/Header/navbar/DappList.tsx | 6 ++--- web/src/layout/Header/navbar/Explore.tsx | 2 +- .../FormContactDetails/index.tsx | 3 ++- .../Header/navbar/Menu/Settings/index.tsx | 4 +-- web/src/layout/Header/navbar/Product.tsx | 2 +- .../pages/Cases/CaseDetails/Appeal/index.tsx | 2 +- .../Cases/CaseDetails/Evidence/index.tsx | 2 +- .../Cases/CaseDetails/Overview/Policies.tsx | 5 ++-- .../Cases/CaseDetails/Overview/index.tsx | 4 +-- web/src/pages/Cases/CaseDetails/Timeline.tsx | 6 ++--- .../pages/Cases/CaseDetails/Voting/index.tsx | 4 +-- web/src/pages/Cases/CaseDetails/index.tsx | 2 +- web/src/pages/Cases/index.tsx | 4 +-- web/src/pages/Courts/CourtDetails/Stats.tsx | 3 ++- web/src/pages/Courts/CourtDetails/index.tsx | 4 +-- web/src/pages/Courts/index.tsx | 5 +--- web/src/pages/Dashboard/Courts/Header.tsx | 2 +- web/src/pages/Dashboard/JurorInfo/Header.tsx | 2 +- web/src/pages/Dashboard/JurorInfo/index.tsx | 2 +- web/src/pages/Dashboard/index.tsx | 7 ++--- web/src/pages/Home/Community/index.tsx | 4 +-- web/src/pages/Home/CourtOverview/Chart.tsx | 2 +- web/src/pages/Home/CourtOverview/Stats.tsx | 4 +-- .../Home/TopJurors/Header/DesktopHeader.tsx | 4 +-- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 4 +-- web/src/pages/Home/TopJurors/index.tsx | 4 +-- web/src/pages/Home/index.tsx | 4 +-- web/src/styles/responsiveSize.ts | 27 ++++--------------- 49 files changed, 107 insertions(+), 142 deletions(-) diff --git a/web/src/components/CasesDisplay/CasesListHeader.tsx b/web/src/components/CasesDisplay/CasesListHeader.tsx index b19347953..ad19963b2 100644 --- a/web/src/components/CasesDisplay/CasesListHeader.tsx +++ b/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 = diff --git a/web/src/components/CasesDisplay/Search.tsx b/web/src/components/CasesDisplay/Search.tsx index 393430bd8..edafa0361 100644 --- a/web/src/components/CasesDisplay/Search.tsx +++ b/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)}; ` )} `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 94361961f..51a610ff1 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/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 { diff --git a/web/src/components/DisputeCard/DisputeInfo.tsx b/web/src/components/DisputeCard/DisputeInfo.tsx index f5e806b63..b37550f04 100644 --- a/web/src/components/DisputeCard/DisputeInfo.tsx +++ b/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; ` )} diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx index e9bbbfc4a..1d51d99a6 100644 --- a/web/src/components/DisputeCard/index.tsx +++ b/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 = ( diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index 9ba922bca..6c94196f8 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/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 { diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index b0d2492e1..0b800a135 100644 --- a/web/src/components/LatestCases.tsx +++ b/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` diff --git a/web/src/components/Popup/Description/Appeal.tsx b/web/src/components/Popup/Description/Appeal.tsx index 3c1d0aca0..f8f750e45 100644 --- a/web/src/components/Popup/Description/Appeal.tsx +++ b/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; `; diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx index 9a02d2c92..d6b042a86 100644 --- a/web/src/components/Popup/Description/StakeWithdraw.tsx +++ b/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,7 +31,7 @@ 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` @@ -39,12 +39,12 @@ const TotalStakeContainer = styled.div` 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}; `; diff --git a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx index c52e4a1c5..aaf7d4675 100644 --- a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx +++ b/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 = () => { diff --git a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx index f2343c19d..11003f32a 100644 --- a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx +++ b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx @@ -7,8 +7,7 @@ const Container = styled.div` display: flex; gap: 4px; text-align: center; - margin: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300))); - ${responsiveSize("marginTop", 8, 24, 300)} + margin: ${responsiveSize(8, 24, 300)} ${responsiveSize(8, 32, 300)} 0; font-size: 14px; font-weight: 400; line-height: 19px; diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 4ad51e664..e8571a0f3 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -25,7 +25,7 @@ const Container = styled.div<{ isVisible: boolean }>` () => css` overflow-y: hidden; top: 50%; - ${responsiveSize("width", 700, 900)} + width: ${responsiveSize(700, 900)}; flex-direction: row; height: 500px; ` @@ -36,7 +36,7 @@ const LeftContainer = styled.div` display: grid; grid-template-rows: auto 1fr auto; width: 86vw; - ${responsiveSize("padding", 24, 32)} + padding: ${responsiveSize(24, 32)}; padding-bottom: 32px; background-color: ${({ theme }) => theme.whiteBackground}; border-top-left-radius: 3px; @@ -45,7 +45,7 @@ const LeftContainer = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - ${responsiveSize("width", 350, 450)} + width: ${responsiveSize(350, 450)}; height: 500px; ` )} @@ -61,7 +61,7 @@ const HowItWorks = styled.div` display: flex; align-items: center; gap: 8px; - ${responsiveSize("marginBottom", 32, 64)} + margin-bottom: ${responsiveSize(32, 64)}; label { color: ${({ theme }) => theme.secondaryPurple}; @@ -98,7 +98,7 @@ const Close = styled.label` () => css` display: flex; position: absolute; - ${responsiveSize("top", 24, 32)} + top: ${responsiveSize(24, 32)}; right: 17px; display: flex; align-items: flex-end; @@ -122,7 +122,7 @@ 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; @@ -130,7 +130,7 @@ const RightContainer = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - ${responsiveSize("width", 350, 450)} + width: ${responsiveSize(350, 450)}; height: 500px; ` )} diff --git a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx index a69ddf18b..614de6b9a 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx @@ -12,9 +12,8 @@ const Container = styled.div` `; const StyledPnkIcon = styled(PnkIcon)` - ${responsiveSize("width", 220, 280)} - ${responsiveSize("height", 220, 252)} - + width: ${responsiveSize(220, 280)}; + height: ${responsiveSize(220, 252)}; [class$="stop-1"] { stop-color: ${({ theme }) => theme.primaryBlue}; } diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index e3bf070ea..81f7d1b7e 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx @@ -21,8 +21,7 @@ export const LeftContentContainer = styled.div` `; export const StyledImage = styled.div` - ${responsiveSize("width", 260, 460)} - + width: ${responsiveSize(260, 460)}; ${landscapeStyle( () => css` width: 389px; diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx index 32224d159..1e3d58396 100644 --- a/web/src/components/Popup/index.tsx +++ b/web/src/components/Popup/index.tsx @@ -13,10 +13,7 @@ import { responsiveSize } from "styles/responsiveSize"; const Header = styled.h1` display: flex; - ${responsiveSize("marginTop", 12, 32)} - ${responsiveSize("marginBottom", 12, 24)} - ${responsiveSize("marginLeft", 8, 12)} - ${responsiveSize("marginRight", 8, 12)} + margin: ${responsiveSize(12, 32)} ${responsiveSize(8, 12)} ${responsiveSize(12, 24)}; text-align: center; font-size: 24px; font-weight: 600; @@ -24,21 +21,20 @@ const Header = styled.h1` `; const IconContainer = styled.div` - ${responsiveSize("width", 150, 228)} - + width: ${responsiveSize(150, 228)}; display: flex; align-items: center; justify-content: center; svg { display: inline-block; - ${responsiveSize("width", 150, 228)} - ${responsiveSize("height", 150, 228)} + width: ${responsiveSize(150, 228)}; + height: ${responsiveSize(150, 228)}; } `; const StyledButton = styled(Button)` - ${responsiveSize("margin", 16, 32)} + margin: ${responsiveSize(16, 32)}; `; const Container = styled.div` @@ -68,7 +64,7 @@ const Container = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - ${responsiveSize("width", 300, 600)} + width: ${responsiveSize(300, 600)}; ` )} `; @@ -76,9 +72,9 @@ const Container = styled.div` const VoteDescriptionContainer = styled.div` display: flex; flex-direction: column; - ${responsiveSize("marginBottom", 16, 32)} - ${responsiveSize("marginLeft", 8, 32)} - ${responsiveSize("marginRight", 8, 32)} + margin-bottom: ${responsiveSize(16, 32)}; + margin-left: ${responsiveSize(8, 12)}; + margin-right: ${responsiveSize(8, 12)}; color: ${({ theme }) => theme.secondaryText}; text-align: center; line-height: 21.8px; diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx index 8d6014b1e..23a1d9ba7 100644 --- a/web/src/components/StatDisplay.tsx +++ b/web/src/components/StatDisplay.tsx @@ -11,7 +11,7 @@ const Container = styled.div` ${landscapeStyle( () => css` - ${responsiveSize("marginBottom", 16, 30)} + margin-bottom: ${responsiveSize(16, 30)}; ` )} `; diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx index 6f6ebf749..a38cb6906 100644 --- a/web/src/components/StyledSkeleton.tsx +++ b/web/src/components/StyledSkeleton.tsx @@ -25,7 +25,7 @@ const SkeletonDisputeCardContainer = styled.div` `; const StyledSkeletonDisputeCard = styled(Skeleton)` - ${responsiveSize("height", 270, 296)} + height: ${responsiveSize(270, 296)}; `; const StyledSkeletonDisputeListItem = styled(Skeleton)` diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx index 667306584..ec085ce2a 100644 --- a/web/src/components/Verdict/DisputeTimeline.tsx +++ b/web/src/components/Verdict/DisputeTimeline.tsx @@ -28,7 +28,7 @@ const StyledTimeline = styled(CustomTimeline)` const EnforcementContainer = styled.div` display: flex; gap: 8px; - ${responsiveSize("marginTop", 12, 24)} + margin-top: ${responsiveSize(12, 24)}; fill: ${({ theme }) => theme.secondaryText}; small { diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index d3b0eec95..da988eb78 100644 --- a/web/src/components/Verdict/FinalDecision.tsx +++ b/web/src/components/Verdict/FinalDecision.tsx @@ -8,6 +8,7 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { useDisputeTemplate } from "queries/useDisputeTemplate"; import LightButton from "../LightButton"; import VerdictBanner from "./VerdictBanner"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; @@ -74,7 +75,7 @@ const Divider = styled.hr` border: none; height: 1px; background-color: ${({ theme }) => theme.stroke}; - margin: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0px; + margin: ${responsiveSize(16, 32)} 0px; `; interface IFinalDecision { diff --git a/web/src/components/Verdict/VerdictBanner.tsx b/web/src/components/Verdict/VerdictBanner.tsx index d246b7882..4e9456687 100644 --- a/web/src/components/Verdict/VerdictBanner.tsx +++ b/web/src/components/Verdict/VerdictBanner.tsx @@ -7,7 +7,7 @@ import { responsiveSize } from "styles/responsiveSize"; const BannerContainer = styled.div` display: flex; gap: 8px; - ${responsiveSize("marginBottom", 16, 24)} + margin-bottom: ${responsiveSize(16, 24)}; svg { width: 16px; height: 16px; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 9bc8942f6..6ee5dfd5a 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -47,7 +47,7 @@ const MiddleSide = styled.div` const RightSide = styled.div` display: flex; - ${responsiveSize("gap", 8, 16, 300, 1024)} + gap: ${responsiveSize(8, 16, 300, 1024)}; margin-left: 8px; canvas { @@ -59,8 +59,8 @@ const LightButtonContainer = styled.div` display: flex; align-items: center; width: 16px; - ${responsiveSize("marginLeft", 4, 8)} - ${responsiveSize("marginRight", 12, 16)} + margin-left: ${responsiveSize(4, 8)}; + margin-right: ${responsiveSize(12, 16)}; `; const StyledLink = styled(Link)` diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx index f11b84a84..eead0d5dd 100644 --- a/web/src/layout/Header/navbar/DappList.tsx +++ b/web/src/layout/Header/navbar/DappList.tsx @@ -53,7 +53,7 @@ const Container = styled.div` left: 0; right: auto; transform: none; - ${responsiveSize("width", 300, 480)} + width: ${responsiveSize(300, 480)}; max-height: 80vh; ` )} @@ -62,13 +62,13 @@ const Container = styled.div` const ItemsDiv = styled.div` display: grid; overflow-y: auto; - padding: 16px calc(8px + (24 - 8) * ((100vw - 480px) / (1250 - 480))); + padding: 16px ${responsiveSize(8, 24, 480)}; row-gap: 8px; column-gap: 2px; justify-items: center; max-width: 480px; min-width: 300px; - ${responsiveSize("width", 300, 480)} + width: ${responsiveSize(300, 480)}; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); `; diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index 4160411b4..2d7a2788f 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -13,7 +13,7 @@ const Container = styled.div` ${landscapeStyle( () => css` flex-direction: row; - ${responsiveSize("gap", 4, 16)} + gap: ${responsiveSize(4, 16)}; ` )}; `; diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx index 7bed3fa07..aa9c16750 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx @@ -7,12 +7,13 @@ import FormContact from "./FormContact"; import messages from "../../../../../../../consts/eip712-messages"; import { EMAIL_REGEX, TELEGRAM_REGEX } from "../../../../../../../consts/index"; import { ISettings } from "../../../index"; +import { responsiveSize } from "styles/responsiveSize"; const FormContainer = styled.form` position: relative; display: flex; flex-direction: column; - padding: 0 calc(12px + (32 - 12) * ((100vw - 300px) / (1250 - 300))); + padding: 0 ${responsiveSize(12, 32, 300)}; padding-bottom: 16px; `; diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index eedf4858a..d9b5d688f 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx @@ -45,13 +45,13 @@ const StyledSettingsText = styled.div` `; const StyledTabs = styled(Tabs)` - padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300))); + padding: 0 ${responsiveSize(8, 32, 300)}; width: 86vw; max-width: 660px; ${landscapeStyle( () => css` - ${responsiveSize("width", 300, 424, 300)} + width: ${responsiveSize(300, 424, 300)}; ` )} `; diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx index b5fb9d7f9..a4ad9e43e 100644 --- a/web/src/layout/Header/navbar/Product.tsx +++ b/web/src/layout/Header/navbar/Product.tsx @@ -16,7 +16,7 @@ const Container = styled.a` transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } gap: 8px; - ${responsiveSize("width", 100, 130)} + width: ${responsiveSize(100, 130)}; white-space: nowrap; background-color: ${({ theme }) => theme.lightBackground}; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx index e0f08bd99..df5269829 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx @@ -9,7 +9,7 @@ import { ClassicAppealProvider } from "hooks/useClassicAppealContext"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - ${responsiveSize("padding", 16, 32)} + padding: ${responsiveSize(16, 32)}; `; export const AppealHeader = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 2c0eb9a97..b409a9b17 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -19,7 +19,7 @@ const Container = styled.div` gap: 16px; align-items: center; - ${responsiveSize("padding", 16, 32)} + padding: ${responsiveSize(16, 32)}; `; const StyledButton = styled(Button)` diff --git a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx index 7e794fed3..460dcee41 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx @@ -11,8 +11,7 @@ const ShadeArea = styled.div` flex-direction: column; justify-content: center; width: 100%; - padding: calc(16px + (20 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875) - calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)}; margin-top: 16px; background-color: ${({ theme }) => theme.mediumBlue}; @@ -49,7 +48,7 @@ const StyledPolicyIcon = styled(PolicyIcon)` const LinkContainer = styled.div` display: flex; - ${responsiveSize("gap", 8, 24)} + gap: ${responsiveSize(8, 24)}; `; interface IPolicies { diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx index c2d35bda2..ef9a003d5 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx @@ -20,8 +20,8 @@ const Container = styled.div` height: auto; display: flex; flex-direction: column; - ${responsiveSize("gap", 16, 32)} - ${responsiveSize("padding", 16, 32)} + gap: ${responsiveSize(16, 32)}; + padding: ${responsiveSize(16, 32)}; `; const Divider = styled.hr` diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx index 6dc632d58..a2e04429e 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -14,9 +14,7 @@ const TimeLineContainer = styled(Box)` width: 100%; height: 98px; border-radius: 0px; - padding: 20px 8px 0px 8px; - ${responsiveSize("marginTop", 16, 48)} - ${responsiveSize("marginBottom", 12, 22)} + padding: ${responsiveSize(16, 48)} 8px 0px ${responsiveSize(12, 22)}; background-color: ${({ theme }) => theme.whiteBackground}; ${landscapeStyle( @@ -27,7 +25,7 @@ const TimeLineContainer = styled(Box)` )} `; -const StyledSteps = styled(Steps)`d +const StyledSteps = styled(Steps)` display: flex; justify-content: space-between; width: 85%; diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 3004face6..087ad4199 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -19,7 +19,7 @@ import InfoCircle from "tsx:svgs/icons/info-circle.svg"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - ${responsiveSize("padding", 16, 32)} + padding: ${responsiveSize(16, 32)}; `; const InfoContainer = styled.div` @@ -27,7 +27,7 @@ const InfoContainer = styled.div` flex-direction: row; color: ${({ theme }) => theme.secondaryText}; align-items: center; - ${responsiveSize("gap", 4, 8, 300)} + gap: ${responsiveSize(4, 8, 300)}; svg { min-width: 16px; diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index 4cbbf9da8..cb01e10de 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -21,7 +21,7 @@ const StyledCard = styled(Card)` `; const Header = styled.h1` - ${responsiveSize("marginBottom", 16, 48)} + margin-bottom: ${responsiveSize(16, 48)}; `; const CaseDetails: React.FC = () => { diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index 7333bcfcb..dcaef535a 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -8,9 +8,7 @@ import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - ${responsiveSize("padding", 24, 136)} - ${responsiveSize("paddingTop", 32, 80)} - ${responsiveSize("paddingBottom", 76, 96)} + padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index 532f8a1be..58c36f39e 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -16,6 +16,7 @@ import VoteStake from "svgs/icons/vote-stake.svg"; import PNKIcon from "svgs/icons/pnk.svg"; import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg"; import EthereumIcon from "svgs/icons/ethereum.svg"; +import { responsiveSize } from "styles/responsiveSize"; const StyledCard = styled.div` width: auto; @@ -23,7 +24,7 @@ const StyledCard = styled.div` display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - padding: calc(0px + (32 - 0) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0; + padding: ${responsiveSize(0, 32)} 0; padding-bottom: 0px; ${landscapeStyle( diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index cc46e385d..0a8074cf1 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -60,8 +60,8 @@ const ButtonContainer = styled.div` `; const StyledCard = styled(Card)` - ${responsiveSize("padding", 16, 32)} - ${responsiveSize("marginTop", 16, 24)} + padding: ${responsiveSize(16, 32)}; + margin-top: ${responsiveSize(16, 24)}; width: 100%; height: auto; min-height: 100px; diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index c63d022a7..019c22ee9 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -8,10 +8,7 @@ import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - ${responsiveSize("padding", 24, 136)} - ${responsiveSize("paddingTop", 32, 80)} - ${responsiveSize("paddingBottom", 76, 96)} - + padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx index a09b5ea8b..32fc30759 100644 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -13,7 +13,7 @@ const Container = styled.div` gap: 12px; align-items: flex-start; justify-content: space-between; - ${responsiveSize("marginBottom", 32, 48)} + margin-bottom: ${responsiveSize(32, 48)}; ${landscapeStyle( () => css` diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index beda43f69..9b5532faa 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -11,7 +11,7 @@ const Container = styled.div` display: flex; flex-direction: column; justify-content: flex-start; - ${responsiveSize("marginBottom", 32, 48)} + margin-bottom: ${responsiveSize(32, 48)}; gap: 12px; ${landscapeStyle( diff --git a/web/src/pages/Dashboard/JurorInfo/index.tsx b/web/src/pages/Dashboard/JurorInfo/index.tsx index 746ba81f4..b8044e543 100644 --- a/web/src/pages/Dashboard/JurorInfo/index.tsx +++ b/web/src/pages/Dashboard/JurorInfo/index.tsx @@ -28,7 +28,7 @@ const Card = styled(_Card)` ${landscapeStyle( () => css` flex-direction: row; - ${responsiveSize("gap", 24, 64)} + gap: ${responsiveSize(24, 64)}; height: 236px; ` )} diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index 1daa60677..e66876de7 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -16,10 +16,7 @@ import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - ${responsiveSize("padding", 24, 136)} - ${responsiveSize("paddingTop", 32, 80)} - ${responsiveSize("paddingBottom", 76, 96)} - + padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; max-width: 1780px; margin: 0 auto; `; @@ -28,7 +25,7 @@ const StyledCasesDisplay = styled(CasesDisplay)` margin-top: 64px; h1 { - ${responsiveSize("marginBottom", 16, 48)} + margin-bottom: ${responsiveSize(16, 48)}; } `; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index b9fd2ee4f..aaf0ab380 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -7,10 +7,10 @@ import { section } from "consts/community-elements"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - ${responsiveSize("marginTop", 44, 64)} + margin-top: ${responsiveSize(44, 64)}; h1 { - ${responsiveSize("marginBottom", 16, 48)} + margin-bottom: ${responsiveSize(16, 48)}; } `; diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx index 6e29a65eb..c4a403284 100644 --- a/web/src/pages/Home/CourtOverview/Chart.tsx +++ b/web/src/pages/Home/CourtOverview/Chart.tsx @@ -8,7 +8,7 @@ import { useHomePageContext } from "hooks/useHomePageContext"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - ${responsiveSize("marginBottom", 32, 48)} + margin-bottom: ${responsiveSize(32, 48)}; display: flex; flex-direction: column; `; diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx index f7f9c6e85..2aaa686f9 100644 --- a/web/src/pages/Home/CourtOverview/Stats.tsx +++ b/web/src/pages/Home/CourtOverview/Stats.tsx @@ -21,8 +21,8 @@ const StyledCard = styled(Card)` width: auto; height: fit-content; gap: 32px; - ${responsiveSize("padding", 16, 30)} - ${responsiveSize("paddingLeft", 16, 35)} + padding: ${responsiveSize(16, 30)}; + padding-left: ${responsiveSize(16, 35)}; padding-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx index dcff93a05..f2102ba20 100644 --- a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx @@ -23,9 +23,9 @@ const Container = styled.div` css` display: grid; grid-template-columns: - min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350)) + min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto; - ${responsiveSize("columnGap", 12, 28, 900)} + column-gap: ${responsiveSize(12, 28, 900)}; align-items: center; ` )} diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index d58c3f6a0..5c560a0cb 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -21,9 +21,9 @@ const Container = styled.div` () => css` display: grid; grid-template-columns: - min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350)) + min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto; - ${responsiveSize("columnGap", 12, 28, 900)} + column-gap: ${responsiveSize(12, 28, 900)}; ` )} `; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index 0251ac564..ea66d657e 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -9,11 +9,11 @@ import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` - ${responsiveSize("marginTop", 64, 80)} + margin-top: ${responsiveSize(64, 80)}; `; const Title = styled.h1` - ${responsiveSize("marginBottom", 16, 48)} + margin-bottom: ${responsiveSize(16, 48)}; `; const ListContainer = styled.div` diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 23dbd78f3..5f8909920 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -12,9 +12,7 @@ import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - ${responsiveSize("padding", 24, 132)} - ${responsiveSize("paddingTop", 32, 72)} - ${responsiveSize("paddingBottom", 76, 96)} + padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/styles/responsiveSize.ts b/web/src/styles/responsiveSize.ts index 6b0a03fd9..0af044d8c 100644 --- a/web/src/styles/responsiveSize.ts +++ b/web/src/styles/responsiveSize.ts @@ -1,29 +1,12 @@ -import { css, CSSProperties } from "styled-components"; - -//supported font types -type FontType = "px" | "rem" | "em" | "vw" | "vh" | "%" | "pt"; - /** - * @description this func applies repsonsivenexx to a css property, the value will range from minSize to maxSize - * @param property the css property to apply responsive sizes too + * @description this func applies repsonsiveness to a css property, the value will range from minSize to maxSize * @param minSize the minimum value of the property * @param maxSize max value of the property * @param minScreen the min screen width at which the property will be at minSize * @param maxScreen the max screen width at which the property will be at maxSize - * @param fontType - * @returns * */ -export const responsiveSize = ( - property: keyof CSSProperties, - minSize: number, - maxSize: number, - minScreen: number = 375, - maxScreen: number = 1250, - fontType: FontType = "px" -) => - css({ - [property]: `calc(${minSize}${fontType} + (${maxSize} - ${minSize}) * (min(max(100vw, ${minScreen}${fontType}), ${maxScreen}${fontType}) - ${minScreen}${fontType}) / (${ - maxScreen - minScreen - }))`, - }); +export const responsiveSize = (minSize: number, maxSize: number, minScreen: number = 375, maxScreen: number = 1250) => + `calc(${minSize}px + (${maxSize} - ${minSize}) * (min(max(100vw, ${minScreen}px), ${maxScreen}px) - ${minScreen}px) / (${ + maxScreen - minScreen + }))`;