diff --git a/web/src/components/CasesDisplay/CasesListHeader.tsx b/web/src/components/CasesDisplay/CasesListHeader.tsx index bf5967a1b..ad19963b2 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))); + gap: calc(15vw + (40 - 15) * (min(max(100vw, 375px), 1250px) - 375px) / 875); width: 100%; height: 100%; `; @@ -16,10 +17,10 @@ const CasesData = styled.div` align-items: center; justify-content: space-around; width: 100%; - margin-left: calc(0px + (33) * (100vw - 370px) / (1250 - 370)); + margin-left: ${responsiveSize(0, 33)}; flex-wrap: wrap; padding: 0 3%; - gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300))); + gap: ${responsiveSize(24, 48, 300)}; `; const CaseTitle = styled.div` @@ -42,7 +43,7 @@ const CaseTitle = styled.div` `; const StyledLabel = styled.label` - padding-left: calc(4px + (8 - 4) * ((100vw - 300px) / (900 - 300))); + margin-left: ${responsiveSize(4, 8, 300, 900)}; `; const tooltipMsg = diff --git a/web/src/components/CasesDisplay/Search.tsx b/web/src/components/CasesDisplay/Search.tsx index 42c911d58..edafa0361 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); + gap: ${responsiveSize(4, 22)}; ` )} `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 03dd742e4..51a610ff1 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; + margin: ${responsiveSize(20, 24)}; `; const StyledTitle = styled.h1` - margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875) !important; + margin-bottom: ${responsiveSize(32, 48)}; `; interface ICasesDisplay extends ICasesGrid { diff --git a/web/src/components/DisputeCard/DisputeInfo.tsx b/web/src/components/DisputeCard/DisputeInfo.tsx index c50dab7ea..b37550f04 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))); + 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 c449806e9..1d51d99a6 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); + height: ${responsiveSize(280, 296)}; ${landscapeStyle( () => @@ -42,7 +43,7 @@ const StyledListItem = styled(Card)` const CardContainer = styled.div` height: calc(100% - 45px); - padding: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding: ${responsiveSize(20, 24)}; display: flex; flex-direction: column; justify-content: space-between; @@ -67,7 +68,7 @@ const ListTitle = styled.div` height: 100%; justify-content: start; align-items: center; - width: calc(30vw + (40 - 30) * ((100vw - 300px) / (1250 - 300))); + width: calc(30vw + (40 - 30) * (min(max(100vw, 300px), 1250px)- 300px) / 950); `; export const getPeriodEndTimestamp = ( diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index c6f8d0154..6c94196f8 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); + padding: ${responsiveSize(8, 24)}; > * { overflow-wrap: break-word; margin: 0; @@ -34,7 +35,7 @@ const BottomShade = styled.div` display: flex; align-items: center; gap: 16px; - padding: 12px calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding: 12px ${responsiveSize(8, 24)}; > * { flex-basis: 1; flex-shrink: 0; @@ -45,8 +46,7 @@ const BottomShade = styled.div` const StyledA = styled.a` display: flex; margin-left: auto; - gap: calc(5px + (6 - 5) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - + gap: ${responsiveSize(5, 6)}; ${landscapeStyle( () => css` > svg { diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 2439b910c..0b800a135 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); + margin-top: ${responsiveSize(48, 80)}; `; const Title = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + margin-bottom: ${responsiveSize(16, 48)}; `; const DisputeContainer = styled.div` diff --git a/web/src/components/Popup/Description/Appeal.tsx b/web/src/components/Popup/Description/Appeal.tsx index e994b96c1..f8f750e45 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))); + margin-left: ${responsiveSize(8, 44, 300)}; + margin-right: ${responsiveSize(8, 44, 300)}; color: ${({ theme }) => theme.secondaryText}; text-align: center; `; const StyledOptionFunded = styled.div` display: flex; - margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300))); - margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300))); - margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300))); + margin-bottom: ${responsiveSize(16, 32, 300)}; + margin-left: ${responsiveSize(8, 44, 300)}; + margin-right: ${responsiveSize(8, 44, 300)}; color: ${({ theme }) => theme.secondaryText}; text-align: center; `; diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx index e781a462b..d6b042a86 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))); + margin-bottom: ${responsiveSize(16, 32, 300)}; + margin-left: ${responsiveSize(8, 44, 300)}; + margin-right: ${responsiveSize(8, 44, 300)}; color: ${({ theme }) => theme.secondaryText}; text-align: center; `; @@ -30,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))); + margin-bottom: ${responsiveSize(0, 4, 300)}; `; const TotalStakeContainer = styled.div` @@ -38,12 +39,12 @@ const TotalStakeContainer = styled.div` font-size: 14px; align-items: center; justify-content: center; - margin-bottom: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300))); + margin-bottom: ${responsiveSize(8, 32, 300)}; `; const MyStakeContainer = styled.div` display: flex; - margin: 0px calc(4px + (8 - 4) * ((100vw - 300px) / (1250 - 300))); + margin: 0px ${responsiveSize(4, 8, 300)}; color: ${({ theme }) => theme.secondaryText}; `; diff --git a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx index 5ca4b4169..aaf7d4675 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))); + 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 df474c563..11003f32a 100644 --- a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx +++ b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx @@ -1,13 +1,13 @@ import React from "react"; import styled from "styled-components"; import InfoCircle from "tsx:svgs/icons/info-circle.svg"; +import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; gap: 4px; text-align: center; - margin: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300))); - margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300))); + margin: ${responsiveSize(8, 24, 300)} ${responsiveSize(8, 32, 300)} 0; font-size: 14px; font-weight: 400; line-height: 19px; diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 3f511fa26..e8571a0f3 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); + width: ${responsiveSize(700, 900)}; flex-direction: row; height: 500px; ` @@ -35,7 +36,7 @@ const LeftContainer = styled.div` display: grid; grid-template-rows: auto 1fr auto; width: 86vw; - padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding: ${responsiveSize(24, 32)}; padding-bottom: 32px; background-color: ${({ theme }) => theme.whiteBackground}; border-top-left-radius: 3px; @@ -44,7 +45,7 @@ const LeftContainer = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + width: ${responsiveSize(350, 450)}; height: 500px; ` )} @@ -60,7 +61,7 @@ const HowItWorks = styled.div` display: flex; align-items: center; gap: 8px; - margin-bottom: calc(32px + (64 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + margin-bottom: ${responsiveSize(32, 64)}; label { color: ${({ theme }) => theme.secondaryPurple}; @@ -97,7 +98,7 @@ const Close = styled.label` () => css` display: flex; position: absolute; - top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + top: ${responsiveSize(24, 32)}; right: 17px; display: flex; align-items: flex-end; @@ -121,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; @@ -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); + 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 40e213e33..614de6b9a 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,9 +12,8 @@ const Container = styled.div` `; const StyledPnkIcon = styled(PnkIcon)` - width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - + width: ${responsiveSize(220, 280)}; + height: ${responsiveSize(220, 252)}; [class$="stop-1"] { stop-color: ${({ theme }) => theme.primaryBlue}; } diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index d805a6a3a..81f7d1b7e 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,8 +21,7 @@ export const LeftContentContainer = styled.div` `; export const StyledImage = styled.div` - width: calc(260px + (460 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - + width: ${responsiveSize(260, 460)}; ${landscapeStyle( () => css` width: 389px; diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx index 0b1edfe64..1e3d58396 100644 --- a/web/src/components/Popup/index.tsx +++ b/web/src/components/Popup/index.tsx @@ -9,13 +9,11 @@ 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))); + margin: ${responsiveSize(12, 32)} ${responsiveSize(8, 12)} ${responsiveSize(12, 24)}; text-align: center; font-size: 24px; font-weight: 600; @@ -23,20 +21,20 @@ const Header = styled.h1` `; const IconContainer = styled.div` - width: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375)); + width: ${responsiveSize(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)); + width: ${responsiveSize(150, 228)}; + height: ${responsiveSize(150, 228)}; } `; const StyledButton = styled(Button)` - margin: calc(16px + (32 - 16) * ((100vw - 375px) / (1250 - 375))); + margin: ${responsiveSize(16, 32)}; `; const Container = styled.div` @@ -66,7 +64,7 @@ const Container = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; - width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375)); + width: ${responsiveSize(300, 600)}; ` )} `; @@ -74,9 +72,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))); + 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 79d1073c6..23a1d9ba7 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); + margin-bottom: ${responsiveSize(16, 30)}; ` )} `; diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx index 913a350a6..a38cb6906 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); + 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 05a24b52e..ec085ce2a 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); + 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 516b0779f..4e9456687 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); + 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 d118fa85b..6ee5dfd5a 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))); + gap: ${responsiveSize(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))); + 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 9aca796d5..eead0d5dd 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)); + width: ${responsiveSize(300, 480)}; max-height: 80vh; ` )} @@ -61,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; - width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)); + 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 63733174c..2d7a2788f 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))); + 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 0466aead9..d9b5d688f 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; @@ -44,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` - width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 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 0dd5c3cf5..a4ad9e43e 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)); + 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 16a7afa49..df5269829 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); + 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 2e5cd12b1..b409a9b17 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); + 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 f9b4c35ff..460dcee41 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx @@ -4,14 +4,14 @@ 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; 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}; @@ -48,7 +48,7 @@ const StyledPolicyIcon = styled(PolicyIcon)` const LinkContainer = styled.div` display: flex; - gap: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + 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 4c5154335..ef9a003d5 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); + 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 7f83833a1..a2e04429e 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -7,15 +7,14 @@ 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; width: 100%; 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); + padding: ${responsiveSize(16, 48)} 8px 0px ${responsiveSize(12, 22)}; background-color: ${({ theme }) => theme.whiteBackground}; ${landscapeStyle( @@ -26,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 ff7209c23..087ad4199 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); + padding: ${responsiveSize(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))); + 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 cb6b61a21..cb01e10de 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); + 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 038358e62..dcaef535a 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -3,13 +3,12 @@ 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); + 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 f7b3c34f8..0a8074cf1 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); + padding: ${responsiveSize(16, 32)}; + margin-top: ${responsiveSize(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..019c22ee9 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -3,13 +3,12 @@ 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); + 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 2c8902e2a..32fc30759 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); + 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 0e9942c88..9b5532faa 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); + 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 84eda39b9..b8044e543 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); + gap: ${responsiveSize(24, 64)}; height: 236px; ` )} diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index ee8408029..e66876de7 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -11,13 +11,12 @@ 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); + padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; max-width: 1780px; margin: 0 auto; `; @@ -26,7 +25,7 @@ const StyledCasesDisplay = styled(CasesDisplay)` margin-top: 64px; h1 { - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + margin-bottom: ${responsiveSize(16, 48)}; } `; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index 0fe20ba24..aaf0ab380 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); + margin-top: ${responsiveSize(44, 64)}; h1 { - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + margin-bottom: ${responsiveSize(16, 48)}; } `; diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx index 5e48f574c..c4a403284 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); + 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 86c3df690..2aaa686f9 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); + 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 937686535..f2102ba20 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; @@ -22,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; - column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350); + 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 cd8aa3ebc..5c560a0cb 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; @@ -20,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; - column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350); + 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 c7b2fee4f..ea66d657e 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); + margin-top: ${responsiveSize(64, 80)}; `; const Title = styled.h1` - margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + 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 962e71467..5f8909920 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -7,13 +7,12 @@ 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); + 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 new file mode 100644 index 000000000..0af044d8c --- /dev/null +++ b/web/src/styles/responsiveSize.ts @@ -0,0 +1,12 @@ +/** + * @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 + * + */ +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 + }))`;