refactor: improve maintainability of dynamic calculations

Author: kyrers

web/src/components/RegistryCard/RegistryInfo.tsx

@@ -18,6 +18,9 @@ interface IListInfo {
   isListView?: boolean;
 }
 
+const firstColWidthCalc = "calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))";
+const secondColWidthCalc = "calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))";
+
 const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? DEFAULT_LIST_LOGO));
@@ -36,7 +39,7 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
           "w-full h-max lg:h-16 p-4",
           "[&_h3]:col-span-4 [&_img]:col-span-4",
           "lg:justify-between lg:grid-rows-[1fr] lg:px-8",
-          "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_${firstColWidthCalc}_${secondColWidthCalc}_max-content]`,
           "lg:[&_img]:col-span-1 lg:[&_h3]:col-span-2",
         ]
       )}

web/src/components/StatDisplay.tsx

@@ -11,15 +11,11 @@ interface IStatDisplay {
   color: IColors;
 }
 
+const marginBottomCalc = "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={clsx(
-        "flex items-center gap-2 max-w-[192px]",
-        "lg:mb-[calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]"
-      )}
-      {...props}
-    >
+    <div className={clsx("flex items-center gap-2 max-w-[192px]", `lg:mb-[${marginBottomCalc}]`)} {...props}>
       <div
         className={cn(
           "flex items-center justify-center h-12 w-12 rounded-[50%]",

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

@@ -82,6 +82,8 @@ interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
+const widthCalc = "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());
@@ -95,7 +97,7 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
         "bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)]",
         "[&_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]",
-        "lg:w-[calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]"
+        `lg:w-[${widthCalc}]`
       )}
     >
       <h1 className="pt-6 text-2xl font-semibold leading-8">Kleros Solutions</h1>

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

@@ -18,6 +18,9 @@ const TABS = [
   },
 ];
 
+const inlinePaddingCalc = "calc(8px+(32-8)*((100vw-300px)/(1250-300)))";
+const widthCalc = "calc(300px+(424-300)*((100vw-300px)/(1250-300)))";
+
 const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
   const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
   const containerRef = useRef(null);
@@ -38,7 +41,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
     >
       <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
       <Tabs
-        className="py-0 px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))] max-w-[660px] w-[86vw] lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]"
+        className={clsx(`py-0 px-[${inlinePaddingCalc}]`, `max-w-[660px] w-[86vw] lg:w-[${widthCalc}]`)}
         currentValue={currentTab}
         items={TABS}
         callback={(n: number) => {

web/src/pages/Home/index.tsx

@@ -6,14 +6,16 @@ import Header from "./Header";
 import Stats from "./Stats";
 import HighlightedLists from "./Highlights";
 
+const inlinePaddingCalc = "calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))";
+
 const Home: React.FC = () => {
   return (
     <>
       <HeroImage />
       <div
         className={clsx(
           "w-full max-w-[1400px] mx-auto bg-klerosUIComponentsLightBackground px-4 pt-4 pb-10",
-          "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))] lg:pb-[60px]"
+          `lg:px-[${inlinePaddingCalc}] lg:pb-[60px]`
         )}
       >
         <Header />