refactor: migrate calc to clamp as tailwind utilities

Author: kyrers

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

@@ -5,13 +5,13 @@ 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 { cn, isUndefined } from "src/utils";
+import { isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
 import { Link } from "react-router-dom";
+import clsx from "clsx";
 
-const landscapeColumnGapCalc = "lg:gap-x-[calc(24px+(32-24)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
 interface ITopInfo
   extends Pick<
     RegistryDetails,
@@ -60,10 +60,9 @@ const TopInfo: React.FC<ITopInfo> = ({
         )}
       </div>
       <div
-        className={cn(
+        className={clsx(
           "flex flex-row flex-wrap shrink gap-8 items-start pt-5",
-          "lg:shrink-0 lg:gap-y-0",
-          landscapeColumnGapCalc
+          "lg:shrink-0 lg:gap-x-fluid-24-32-900 lg:gap-y-0"
         )}
       >
         {id !== "" ? (

web/src/components/ItemCard/index.tsx

@@ -9,9 +9,7 @@ import ItemField from "./ItemField";
 import { cn } from "src/utils";
 import clsx from "clsx";
 
-const landscapeGridColsCalc =
-  "lg:grid-cols-[1fr_calc(150px+(180-150)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
-const landscapeGapCalc = "lg:gap-[calc(16px+(36-16)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
+const landscapeGridColsCalc = "lg:grid-cols-[1fr_var(--spacing-fluid-150-180-900)_max-content]";
 
 interface IItemCard extends ItemDetailsFragment {}
 
@@ -37,10 +35,9 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
         style={{ columnGap: responsiveSize(12, 32, 900) }}
       >
         <div
-          className={cn(
+          className={clsx(
             "flex flex-col justify-between items-start gap-4 w-fit col-span-2",
-            "lg:flex-row lg:items-center lg:col-span-1",
-            landscapeGapCalc
+            "lg:flex-row lg:items-center lg:col-span-1 lg:gap-fluid-16-36-900"
           )}
         >
           {sortedProps.map((prop) => prop.isIdentifier && <ItemField key={prop.label} {...prop} />)}

web/src/components/RegistryCard/RegistryInfo.tsx

@@ -19,7 +19,7 @@ interface IListInfo {
 }
 
 const landscapeGridColsCalc =
-  "lg:grid-cols-[auto_1fr_calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
+  "lg:grid-cols-[auto_1fr_var(--spacing-fluid-80-100-900)_var(--spacing-fluid-100-150-900)_max-content]";
 
 const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
   const [imageLoaded, setImageLoaded] = useState(false);

web/src/components/StatDisplay.tsx

@@ -10,11 +10,9 @@ interface IStatDisplay {
   color: IColors;
 }
 
-const landscapeMarginBottomCalc = "lg:mb-[calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
   return (
-    <div className={cn("flex items-center gap-2 max-w-[192px]", landscapeMarginBottomCalc)} {...props}>
+    <div className="flex items-center gap-2 max-w-[192px] lg:mb-fluid-16-30" {...props}>
       <div
         className={cn(
           "flex items-center justify-center h-12 w-12 rounded-[50%]",

web/src/global.css

@@ -24,6 +24,40 @@
   --max-width-landscape: 87.5rem;
   --shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
   --leading-18px: 18px;
+
+  /* 
+  * Spacing utils for custom sizing
+  * Default max screen width is 1250px
+  * Default min screen width is 375px
+  */
+  --spacing-scale-8-32-300: calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300));
+  --spacing-scale-300-424-300: calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300));
+
+  /* 
+  * Spacing utils for resposive resizing
+  * Default max screen width is 1250px
+  * Default min screen width is 375px
+  */
+  --spacing-fluid-0-32: clamp(0px, calc(0px + (132 - 0) * (100vw - 375px) / (1250 - 375)), 132px);
+  --spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
+  --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-24-32: clamp(24px, calc(24px + (32 - 24) * (100vw - 375px) / (1250 - 375)), 32px);
+  --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-80: clamp(32px, calc(32px + (80 - 32) * (100vw - 375px) / (1250 - 375)), 80px);
+  --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-150-900: clamp(100px, calc(100px + (150 - 100) * (100vw - 900px) / (1250 - 900)), 150px);
+  --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-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);
+  --spacing-fluid-442-700-900: clamp(442px, calc(442px + (700 - 442) * (100vw - 900px) / (1250 - 900)), 700px);
 }
 
 .dark {

web/src/layout/Header/navbar/DappList.tsx

@@ -82,8 +82,6 @@ interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
-const landscapeWidthCalc = "lg:w-[calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsDappListOpen());
@@ -97,17 +95,16 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
         "border border-klerosUIComponentsStroke rounded-[3px]",
         "bg-klerosUIComponentsWhiteBackground shadow-custom",
         "[&_svg]:visible",
-        "lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]",
-        landscapeWidthCalc
+        "lg:w-fluid-300-480 lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]"
       )}
     >
       <h1 className="pt-6 mb-4">Kleros Solutions</h1>
       <div
         className={clsx(
           "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))]",
-          "overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px]"
+          "overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center w-fluid-300-480"
         )}
-        style={{ padding: `4px ${responsiveSize(8, 24)} 16px`, width: responsiveSize(300, 480) }}
+        style={{ padding: `4px ${responsiveSize(8, 24)} 16px` }}
       >
         {ITEMS.map((item) => {
           return <Product {...item} key={item.text} />;

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -5,7 +5,7 @@ import General from "./General";
 import NotificationSettings from "./Notifications";
 import { ISettings } from "../../index";
 import { useLocation, useNavigate } from "react-router-dom";
-import { cn } from "src/utils";
+import clsx from "clsx";
 
 const TABS = [
   {
@@ -22,9 +22,6 @@ const TABS = [
   },
 ];
 
-const tabListInlinePaddingCalc = "[&>div:first-child]:px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))]";
-const landscapeWidthCalc = "lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]";
-
 const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const containerRef = useRef(null);
   const location = useLocation();
@@ -37,7 +34,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   return (
     <div
       ref={containerRef}
-      className={cn(
+      className={clsx(
         "flex flex-col absolute max-h-[80vh] overflow-y-auto",
         "top-[5%] left-1/2 transform -translate-x-1/2 z-1 rounded-[3px]",
         "bg-klerosUIComponentsWhiteBackground border border-solid border-klerosUIComponentsStroke",
@@ -46,7 +43,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
     >
       <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
       <Tabs
-        className={cn("py-0 max-w-[660px] w-[86vw]", landscapeWidthCalc, tabListInlinePaddingCalc)}
+        className={clsx("py-0 max-w-[660px] w-[86vw] lg:w-scale-300-424-300", "[&>div:first-child]:px-scale-8-32-300")}
         items={[TABS[0], { ...TABS[1], content: <NotificationSettings {...{ toggleIsSettingsOpen }} /> }]}
       />
     </div>

web/src/pages/AllLists/index.tsx

@@ -10,7 +10,7 @@ import ItemDisplay from "./ItemDisplay";
 import Breadcrumb from "./StyledBreadcrumb";
 import clsx from "clsx";
 
-const landscapePaddingCalc = "lg:p-[48px_calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))_60px]";
+const landscapePaddingCalc = "lg:p-[48px_var(--spacing-fluid-0-32)_60px]";
 
 const AllLists: React.FC = () => (
   <div

web/src/pages/AttachmentDisplay/index.tsx

@@ -6,25 +6,19 @@ import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
 import Header from "./Header";
-import { cn } from "src/utils";
+import clsx from "clsx";
 
 const FileViewer = lazy(() => import("components/FileViewer"));
 
-const paddingCalc = "p-[calc(24px+(136-24)*(min(max(100vw,375px),1250px)-375px)/875)]";
-const paddingTopCalc = "pt-[calc(32px+(80-32)*(min(max(100vw,375px),1250px)-375px)/875)]";
-const paddingBottomCalc = "pb-[calc(76px+(96-76)*(min(max(100vw,375px),1250px)-375px)/875)]";
-
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
 
   const url = searchParams.get("url");
   return (
     <div
-      className={cn(
+      className={clsx(
         "w-full max-w-landscape my-0 mx-auto bg-klerosUIComponentsLightBackground",
-        paddingCalc,
-        paddingTopCalc,
-        paddingBottomCalc
+        "p-fluid-24-136 pt-fluid-32-80 pb-fluid-76-96"
       )}
     >
       <div className="flex flex-col gap-2 w-full">

web/src/pages/Home/Stats/index.tsx

@@ -5,7 +5,6 @@ import PaperIcon from "svgs/icons/paper.svg";
 import ListIcon from "svgs/icons/list.svg";
 import DollarIcon from "svgs/icons/dollar.svg";
 import JurorIcon from "svgs/icons/user.svg";
-import { responsiveSize } from "styles/responsiveSize";
 import { useCoinPrice } from "hooks/useCoinPrice";
 import { CoinIds } from "consts/coingecko";
 import { useCounter } from "hooks/queries/useCounter";
@@ -72,12 +71,9 @@ const Stats = () => {
     <Card
       className={clsx(
         "grid grid-cols-[repeat(auto-fit,minmax(190px,1fr))] gap-8",
-        "w-full h-fit mb-16 pb-4! lg:gap-0 lg:pb-0!"
+        "w-full h-fit mb-16 lg:gap-0",
+        "p-fluid-16-30 pl-fluid-16-54 pb-4! lg:pb-0!"
       )}
-      style={{
-        padding: responsiveSize(16, 30),
-        paddingLeft: responsiveSize(16, 54),
-      }}
     >
       {stats.map(({ title, coinId, text, subtext, color, icon }, i) => {
         return <StatDisplay key={i} {...{ title, color, icon, text, subtext }} />;