From 5ea528fa05e66b54e8721da6ea46b25642b63da6 Mon Sep 17 00:00:00 2001 From: kyrers Date: Fri, 12 Dec 2025 23:29:01 +0000 Subject: [PATCH 1/5] refactor: migrate `calc` to `clamp` as tailwind utilities --- .../RegistryInformationCard/TopInfo.tsx | 9 +++-- web/src/components/ItemCard/index.tsx | 9 ++--- .../components/RegistryCard/RegistryInfo.tsx | 2 +- web/src/components/StatDisplay.tsx | 4 +-- web/src/global.css | 34 +++++++++++++++++++ web/src/layout/Header/navbar/DappList.tsx | 9 ++--- .../Header/navbar/Menu/Settings/index.tsx | 9 ++--- web/src/pages/AllLists/index.tsx | 2 +- web/src/pages/AttachmentDisplay/index.tsx | 12 ++----- web/src/pages/Home/Stats/index.tsx | 8 ++--- web/src/pages/Home/index.tsx | 4 +-- web/src/pages/Settings/index.tsx | 9 ++--- .../ItemField/FieldInput/AddressInput.tsx | 4 +-- .../ItemField/FieldInput/FileInput.tsx | 12 +++---- .../ItemField/FieldInput/ImageInput.tsx | 12 +++---- .../ItemField/FieldInput/LinkInput.tsx | 4 +-- .../ItemField/FieldInput/LongTextInput.tsx | 4 +-- .../ItemField/FieldInput/NumberInput.tsx | 4 +-- .../ItemField/FieldInput/TextInput.tsx | 4 +-- .../ItemField/FieldInput/constants.ts | 2 -- web/src/pages/SubmitItem/Policy/Info.tsx | 10 +----- web/src/pages/SubmitItem/index.tsx | 7 ++-- .../SubmitList/DeployList/ListDetails.tsx | 8 ++--- .../SubmitList/ItemParameters/CustomName.tsx | 5 ++- .../SubmitList/ItemParameters/Deposit.tsx | 4 +-- .../ItemParameters/Fields/index.tsx | 5 ++- .../SubmitList/ListParameters/Description.tsx | 5 ++- .../SubmitList/ListParameters/LogoUpload.tsx | 6 ++-- .../SubmitList/ListParameters/Policy.tsx | 6 ++-- .../pages/SubmitList/ListParameters/Title.tsx | 5 ++- web/src/pages/SubmitList/constants.ts | 4 +-- web/src/pages/SubmitList/index.tsx | 17 ++++------ 32 files changed, 106 insertions(+), 133 deletions(-) delete mode 100644 web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts diff --git a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx b/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx index 2b6d2d5d..4069791e 100644 --- a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx +++ b/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 = ({ )}
{id !== "" ? ( diff --git a/web/src/components/ItemCard/index.tsx b/web/src/components/ItemCard/index.tsx index 1aa13682..4e85d11b 100644 --- a/web/src/components/ItemCard/index.tsx +++ b/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 = ({ id, status, disputed, props }) => { style={{ columnGap: responsiveSize(12, 32, 900) }} >
{sortedProps.map((prop) => prop.isIdentifier && )} diff --git a/web/src/components/RegistryCard/RegistryInfo.tsx b/web/src/components/RegistryCard/RegistryInfo.tsx index 2df62fad..1d4323f8 100644 --- a/web/src/components/RegistryCard/RegistryInfo.tsx +++ b/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 = ({ title, totalItems, logoURI, status, isListView = false }) => { const [imageLoaded, setImageLoaded] = useState(false); diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx index fb1379da..415070db 100644 --- a/web/src/components/StatDisplay.tsx +++ b/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 = ({ title, text, subtext, icon: Icon, color, ...props }) => { return ( -
+
void; } -const landscapeWidthCalc = "lg:w-[calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]"; - const DappList: React.FC = ({ toggleIsDappListOpen }) => { const containerRef = useRef(null); useClickAway(containerRef, () => toggleIsDappListOpen()); @@ -97,17 +95,16 @@ const DappList: React.FC = ({ 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]" )} >

Kleros Solutions

{ITEMS.map((item) => { return ; diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index f066ae8f..3c530fd1 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/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 = ({ toggleIsSettingsOpen }) => { const containerRef = useRef(null); const location = useLocation(); @@ -37,7 +34,7 @@ const Settings: React.FC = ({ toggleIsSettingsOpen }) => { return (
= ({ toggleIsSettingsOpen }) => { >
Settings
div:first-child]:px-scale-8-32-300")} items={[TABS[0], { ...TABS[1], content: }]} />
diff --git a/web/src/pages/AllLists/index.tsx b/web/src/pages/AllLists/index.tsx index fa97a59f..38421c13 100644 --- a/web/src/pages/AllLists/index.tsx +++ b/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 = () => (
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 (
diff --git a/web/src/pages/Home/Stats/index.tsx b/web/src/pages/Home/Stats/index.tsx index bca8386c..b60997d4 100644 --- a/web/src/pages/Home/Stats/index.tsx +++ b/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 = () => { {stats.map(({ title, coinId, text, subtext, color, icon }, i) => { return ; diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index c4ccf0bb..dee83932 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -6,8 +6,6 @@ import Header from "./Header"; import Stats from "./Stats"; import HighlightedLists from "./Highlights"; -const landscapeInlinePaddingCalc = "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]"; - const Home: React.FC = () => { return ( <> @@ -15,7 +13,7 @@ const Home: React.FC = () => {
diff --git a/web/src/pages/Settings/index.tsx b/web/src/pages/Settings/index.tsx index 6ec2914d..1d838b39 100644 --- a/web/src/pages/Settings/index.tsx +++ b/web/src/pages/Settings/index.tsx @@ -1,17 +1,14 @@ import React from "react"; import { Route, Routes } from "react-router-dom"; import EmailConfirmation from "./EmailConfirmation"; -import { cn } from "src/utils"; - -const landscapePaddingInlineCalc = "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]"; +import clsx from "clsx"; const Settings: React.FC = () => { return (
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx index f4a8dacc..17e3be02 100644 --- a/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx +++ b/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx @@ -3,8 +3,6 @@ import { IFieldInput } from "."; import { isAddress } from "viem"; import { TextField } from "@kleros/ui-components-library"; import { responsiveSize } from "src/styles/responsiveSize"; -import { cn } from "src/utils"; -import { LANDSCAPE_WIDTH_CALC } from "./constants"; const AddressInput: React.FC = ({ fieldProp, handleWrite }) => { const [address, setAddress] = useState(fieldProp.value ?? ""); @@ -25,7 +23,7 @@ const AddressInput: React.FC = ({ fieldProp, handleWrite }) => { return ( = ({ fieldProp, handleWrite }) => { const { uploadFile, roleRestrictions } = useAtlasProvider(); @@ -27,11 +27,9 @@ const FileInput: React.FC = ({ fieldProp, handleWrite }) => { return ( = ({ fieldProp, handleWrite }) => { const { uploadFile, roleRestrictions } = useAtlasProvider(); @@ -28,11 +28,9 @@ const ImageInput: React.FC = ({ fieldProp, handleWrite }) => { return ( = ({ fieldProp, handleWrite }) => { const [link, setLink] = useState(fieldProp.value ?? ""); @@ -25,7 +23,7 @@ const LinkInput: React.FC = ({ fieldProp, handleWrite }) => { = ({ fieldProp, handleWrite }) => { return (