refactor: replace responsiveSize with clamp-based spacing utilities

Author: kyrers

web/src/components/InfoCard.tsx

@@ -1,7 +1,6 @@
+import clsx from "clsx";
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import InfoCircle from "svgs/icons/info-circle.svg";
-import { cn } from "src/utils";
 
 interface IInfoCard {
   msg: string;
@@ -11,12 +10,11 @@ interface IInfoCard {
 const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
   return (
     <div
-      className={cn(
-        "grid grid-cols-[16px_auto] items-center justify-start",
+      className={clsx(
+        "grid grid-cols-[16px_auto] gap-fluid-6-8-300 items-center justify-start",
         "text-start text-klerosUIComponentsSecondaryText",
         className
       )}
-      style={{ gap: responsiveSize(6, 8, 300) }}
     >
       <InfoCircle />
       {msg}

web/src/components/InformationCards/ItemInformationCard/index.tsx

@@ -4,7 +4,6 @@ import Skeleton from "react-loading-skeleton";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import ActionButton from "components/ActionButton";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
-import { responsiveSize } from "styles/responsiveSize";
 import { Policies } from "../RegistryInformationCard/Policies";
 import FieldsDisplay from "./FieldsDisplay";
 import StatusDisplay from "../StatusDisplay";
@@ -61,10 +60,7 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
           <StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
         </div>
       </div>
-      <hr
-        className="border-none h-px bg-klerosUIComponentsStroke mx-8"
-        style={{ marginBlock: responsiveSize(20, 28) }}
-      />
+      <hr className="border-none h-px bg-klerosUIComponentsStroke mx-8 my-fluid-20-28" />
       <div className="flex px-8 pb-3 flex-wrap gap-3 justify-between">
         {registerer?.id ? (
           <div className={aliasContainerStyle}>

web/src/components/InformationCards/RegistryInformationCard/Policies.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import Skeleton from "react-loading-skeleton";
 
 import PolicyIcon from "svgs/icons/policy.svg";
@@ -26,14 +24,13 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
     <div
       className={clsx(
         "flex flex-col justify-center lg:flex-row lg:justify-between",
-        "w-full py-6 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
+        "w-full py-6 px-fluid-24-32 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
       )}
-      style={{ paddingInline: responsiveSize(24, 32) }}
     >
       <p className="text-sm leading-6 text-klerosUIComponentsPrimaryBlue mb-4 lg:mb-0">
         Make sure you read and understand the Policies
       </p>
-      <div className="flex flex-wrap" style={{ gap: responsiveSize(16, 24) }}>
+      <div className="flex flex-wrap gap-fluid-16-24">
         {!isItem ? (
           <>
             {parentRegistryDetails ? (

web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx

@@ -4,7 +4,6 @@ import Skeleton from "react-loading-skeleton";
 import { RegistryDetails } from "context/RegistryDetailsContext";
 import StatusDisplay from "../StatusDisplay";
 import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "src/consts/chains";
-import { responsiveSize } from "src/styles/responsiveSize";
 import { isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
@@ -33,11 +32,8 @@ const TopInfo: React.FC<ITopInfo> = ({
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? ""));
   useEffect(() => setImageSrc(getIpfsUrl(logoURI ?? "")), [logoURI]);
   return (
-    <div
-      className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3"
-      style={{ paddingTop: responsiveSize(20, 24), paddingInline: responsiveSize(24, 32) }}
-    >
-      <div className="flex flex-col" style={{ rowGap: responsiveSize(8, 16) }}>
+    <div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3 pt-fluid-20-24 px-fluid-24-32">
+      <div className="flex flex-col gap-y-fluid-8-16">
         <div className="flex flex-wrap items-center gap-4">
           {isUndefined(logoURI) ? (
             <Skeleton width={125} height={125} borderRadius="62.5px" className="mb-2" />

web/src/components/InformationCards/RegistryInformationCard/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card, Copiable } from "@kleros/ui-components-library";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
@@ -71,11 +70,8 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
           registryAddress: parentRegistryAddress,
         }}
       />
-      <hr
-        className="border-none h-px bg-klerosUIComponentsStroke"
-        style={{ marginBlock: responsiveSize(20, 28), marginInline: responsiveSize(24, 32) }}
-      />
-      <div className="flex flex-wrap justify-between gap-5 pb-3" style={{ paddingInline: responsiveSize(24, 32) }}>
+      <hr className="border-none h-px bg-klerosUIComponentsStroke my-fluid-20-28 mx-fluid-24-32" />
+      <div className="flex flex-wrap justify-between gap-5 pb-3 px-fluid-24-32">
         <div className="flex flex-wrap gap-2 items-center leading-18px">
           <small className="text-sm font-semibold leading-18px text-klerosUIComponentsPrimaryText">Submitted by:</small>
           <Copiable copiableContent={registerer?.id ?? ""} tooltipProps={{ small: true }}>

web/src/components/ItemCard/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button, Card } from "@kleros/ui-components-library";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
-import { responsiveSize } from "styles/responsiveSize";
 import StatusBanner, { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 import ArrowIcon from "svgs/icons/arrow.svg";
 import { ItemDetailsFragment } from "src/graphql/graphql";
@@ -27,11 +26,10 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
       <div
         className={clsx(
           "grid grid-rows-[repeat(3,min-content)] grid-cols-[1fr_min-content]",
-          "w-full h-max p-4 gap-y-2 items-center",
+          "w-full h-max p-4 gap-y-2 gap-x-fluid-12-32-900 items-center",
           "lg:h-16 lg:justify-between lg:grid-rows-[1fr] lg:py-0 lg:px-8",
           landscapeGridColsCalc
         )}
-        style={{ columnGap: responsiveSize(12, 32, 900) }}
       >
         <div
           className={clsx(

web/src/components/RegistryCard/RegistryInfo.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import Skeleton from "react-loading-skeleton";
 import { Button } from "@kleros/ui-components-library";
 import ArrowIcon from "svgs/icons/arrow.svg";
@@ -35,15 +34,14 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
       className={cn(
         "flex flex-col justify-center items-center gap-2 h-[calc(100%-45px)]",
         isListView && [
-          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
+          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4 gap-x-fluid-8-24-900",
           "w-full h-max lg:h-16 p-4",
           "[&_img]:col-span-4",
           "lg:justify-between lg:grid-rows-[1fr] lg:px-8 lg:py-0",
           "lg:[&_img]:col-span-1",
           landscapeGridColsCalc,
         ]
       )}
-      style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}
     >
       {!imageLoaded ? (
         <Skeleton

web/src/components/StyledSkeleton.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Skeleton from "react-loading-skeleton";
-import { responsiveSize } from "styles/responsiveSize";
 
 export const HistorySkeletonCard = () => (
   <div className="flex flex-col gap-2">
@@ -11,17 +10,13 @@ export const HistorySkeletonCard = () => (
   </div>
 );
 
-export const SkeletonRegistryCard = () => (
-  <div className="w-full">
-    <Skeleton height={responsiveSize(270, 296)} />
-  </div>
-);
+export const SkeletonRegistryCard = () => <Skeleton className="w-full h-fluid-270-296" />;
 
 export const SkeletonJustificationCard = () => (
   <div className="flex flex-col gap-4 w-full">
-    <Skeleton className="ml-auto" height={24} width={responsiveSize(100, 160)} />
+    <Skeleton className="ml-auto w-fluid-100-160" height={24} />
     <Skeleton height={60} />
-    <Skeleton height={24} width={responsiveSize(60, 80)} />
+    <Skeleton className="w-fluid-60-80" height={24} />
   </div>
 );
 

web/src/global.css

@@ -38,22 +38,43 @@
   * Default max screen width is 1250px
   * Default min screen width is 375px
   */
+  --spacing-fluid-0-16: clamp(0px, calc(0px + (16 - 0) * (100vw - 375px) / (1250 - 375)), 16px);
+  --spacing-fluid-0-108: clamp(0px, calc(0px + (108 - 0) * (100vw - 375px) / (1250 - 375)), 108px);
   --spacing-fluid-0-132: clamp(0px, calc(0px + (132 - 0) * (100vw - 375px) / (1250 - 375)), 132px);
+  --spacing-fluid-4-8: clamp(4px, calc(4px + (8 - 4) * (100vw - 375px) / (1250 - 375)), 8px);
+  --spacing-fluid-6-8-300: clamp(6px, calc(6px + (8 - 6) * (100vw - 300px) / (1250 - 300)), 8px);
+  --spacing-fluid-8-16: clamp(8px, calc(8px + (16 - 8) * (100vw - 375px) / (1250 - 375)), 16px);
+  --spacing-fluid-8-24: clamp(8px, calc(8px + (24 - 8) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-8-24-900: clamp(8px, calc(8px + (24 - 8) * (100vw - 900px) / (1250 - 900)), 24px);
   --spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
+  --spacing-fluid-10-130: clamp(10px, calc(10px + (130 - 10) * (100vw - 375px) / (1250 - 375)), 130px);
+  --spacing-fluid-12-32-300: clamp(12px, calc(12px + (32 - 12) * (100vw - 300px) / (1250 - 300)), 32px);
+  --spacing-fluid-12-32-900: clamp(12px, calc(12px + (32 - 12) * (100vw - 900px) / (1250 - 900)), 32px);
+  --spacing-fluid-16-24: clamp(16px, calc(16px + (24 - 16) * (100vw - 375px) / (1250 - 375)), 24px);
   --spacing-fluid-16-30: clamp(16px, calc(16px + (30 - 16) * (100vw - 375px) / (1250 - 375)), 30px);
   --spacing-fluid-16-36-900: clamp(16px, calc(16px + (36 - 16) * (100vw - 900px) / (1250 - 900)), 36px);
   --spacing-fluid-16-54: clamp(16px, calc(16px + (54 - 16) * (100vw - 375px) / (1250 - 375)), 54px);
+  --spacing-fluid-20-24: clamp(20px, calc(20px + (24 - 20) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-20-28: clamp(20px, calc(20px + (28 - 20) * (100vw - 375px) / (1250 - 375)), 28px);
+  --spacing-fluid-24-28: clamp(24px, calc(24px + (28 - 24) * (100vw - 375px) / (1250 - 375)), 28px);
   --spacing-fluid-24-32: clamp(24px, calc(24px + (32 - 24) * (100vw - 375px) / (1250 - 375)), 32px);
+  --spacing-fluid-24-48: clamp(24px, calc(24px + (48 - 24) * (100vw - 375px) / (1250 - 375)), 48px);
   --spacing-fluid-24-32-900: clamp(24px, calc(24px + (32 - 24) * (100vw - 900px) / (1250 - 900)), 32px);
   --spacing-fluid-24-136: clamp(24px, calc(24px + (136 - 24) * (100vw - 375px) / (1250 - 375)), 136px);
   --spacing-fluid-25-65: clamp(25px, calc(25px + (65 - 25) * (100vw - 375px) / (1250 - 375)), 65px);
+  --spacing-fluid-32-24: clamp(24px, calc(32px + (24 - 32) * (100vw - 375px) / (1250 - 375)), 32px);
   --spacing-fluid-32-80: clamp(32px, calc(32px + (80 - 32) * (100vw - 375px) / (1250 - 375)), 80px);
+  --spacing-fluid-60-80: clamp(60px, calc(60px + (80 - 60) * (100vw - 375px) / (1250 - 375)), 80px);
+  --spacing-fluid-68-40: clamp(40px, calc(68px + (40 - 68) * (100vw - 375px) / (1250 - 375)), 68px);
   --spacing-fluid-76-96: clamp(76px, calc(76px + (96 - 76) * (100vw - 375px) / (1250 - 375)), 96px);
   --spacing-fluid-80-100-900: clamp(80px, calc(80px + (100 - 80) * (100vw - 900px) / (1250 - 900)), 100px);
+  --spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
   --spacing-fluid-100-150-900: clamp(100px, calc(100px + (150 - 100) * (100vw - 900px) / (1250 - 900)), 150px);
+  --spacing-fluid-100-160: clamp(100px, calc(100px + (160 - 100) * (100vw - 375px) / (1250 - 375)), 160px);
   --spacing-fluid-150-72: clamp(72px, calc(150px + (72 - 150) * (100vw - 375px) / (1250 - 375)), 150px);
   --spacing-fluid-150-180-900: clamp(150px, calc(150px + (180 - 150) * (100vw - 900px) / (1250 - 900)), 180px);
   --spacing-fluid-200-720: clamp(200px, calc(200px + (720 - 200) * (100vw - 375px) / (1250 - 375)), 720px);
+  --spacing-fluid-270-296: clamp(270px, calc(270px + (296 - 270) * (100vw - 375px) / (1250 - 375)), 296px);
   --spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
   --spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
   --spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);

web/src/layout/Header/DesktopHeader.tsx

@@ -8,8 +8,6 @@ import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import OverlayPortal from "components/OverlayPortal";
@@ -44,7 +42,7 @@ const DesktopHeader: React.FC = () => {
           <Explore />
         </div>
 
-        <div className="flex ml-2 [&_canvas]:w-5" style={{ gap: responsiveSize(4, 8) }}>
+        <div className="flex gap-fluid-4-8 ml-2 [&_canvas]:w-5">
           <div
             className="[&_label]:cursor-pointer [&_label]:text-white/80"
             onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}