refactor: refactored ReactDOMStyle.make

src/CardUtils.res

@@ -586,7 +586,7 @@ let setRightIconForCvc = (~cardEmpty, ~cardInvalid, ~color, ~cardComplete) => {
   if cardEmpty {
     <Icon size=brandIconSize name="cvc-empty" />
   } else if cardInvalid {
-    <div style={ReactDOMStyle.make(~color, ())}>
+    <div style={color: color}>
       <Icon size=brandIconSize name="cvc-invalid" />
     </div>
   } else if cardComplete {

src/Components/Accordion.res

@@ -36,21 +36,20 @@ let make = (
   )
   <div
     className={`AccordionItem flex flex-col`}
-    style={ReactDOMStyle.make(
-      ~minHeight="60px",
-      ~width="-webkit-fill-available",
-      ~padding="20px",
-      ~cursor="pointer",
-      ~marginBottom=layoutClass.spacedAccordionItems ? themeObj.spacingAccordionItem : "",
-      ~border=`1px solid ${themeObj.borderColor}`,
-      ~borderRadius={borderRadiusStyle},
-      ~borderBottomStyle=borderBottom ? "solid" : "hidden",
-      (),
-    )}
+    style={
+      minHeight: "60px",
+      width: "-webkit-fill-available",
+      padding: "20px",
+      cursor: "pointer",
+      marginBottom: layoutClass.spacedAccordionItems ? themeObj.spacingAccordionItem : "",
+      border: `1px solid ${themeObj.borderColor}`,
+      borderRadius: {borderRadiusStyle},
+      borderBottomStyle: borderBottom ? "solid" : "hidden",
+    }
     onClick={_ => setSelectedOption(_ => paymentOption.paymentMethodName)}>
     <div
       className={`flex flex-row items-center ${accordionClass}`}
-      style={ReactDOMStyle.make(~columnGap=themeObj.spacingUnit, ())}>
+      style={columnGap: themeObj.spacingUnit}>
       <RenderIf condition=layoutClass.radios>
         <Radio checked=radioClass />
       </RenderIf>

src/Components/AccordionContainer.res

@@ -20,35 +20,34 @@ module Loader = {
         <div
           className={`AccordionItem flex flex-row gap-3 animate-pulse cursor-default place-items-center`}
           key={i->Belt.Int.toString}
-          style={ReactDOMStyle.make(
-            ~minWidth="80px",
-            ~minHeight="60px",
-            ~overflowWrap="hidden",
-            ~borderRadius={borderStyle},
-            ~border=`1px solid ${themeObj.borderColor}`,
-            ~borderBottomStyle={
+          style={
+            minWidth: "80px",
+            minHeight: "60px",
+            overflowWrap: "hidden",
+            borderRadius: {borderStyle},
+            border: `1px solid ${themeObj.borderColor}`,
+            borderBottomStyle: {
               (i == cardShimmerCount - 2 && !layoutClass.spacedAccordionItems) ||
                 layoutClass.spacedAccordionItems
                 ? "solid"
                 : "hidden"
             },
-            ~borderTopStyle={i == 0 && !layoutClass.spacedAccordionItems ? "hidden" : "solid"},
-            ~width="100%",
-            ~paddingLeft="25px",
-            ~marginBottom=layoutClass.spacedAccordionItems ? themeObj.spacingAccordionItem : "",
-            ~cursor="pointer",
-            (),
-          )}>
+            borderTopStyle: {i == 0 && !layoutClass.spacedAccordionItems ? "hidden" : "solid"},
+            width: "100%",
+            paddingLeft: "25px",
+            marginBottom: layoutClass.spacedAccordionItems ? themeObj.spacingAccordionItem : "",
+            cursor: "pointer",
+          }>
           <Shimmer classname="opacity-50 h-5 w-[10%] rounded-full">
             <div
               className="w-full h-full animate-pulse"
-              style={ReactDOMStyle.make(~backgroundColor=themeObj.colorPrimary, ~opacity="10%", ())}
+              style={backgroundColor: themeObj.colorPrimary, opacity: "10%"}
             />
           </Shimmer>
           <Shimmer classname="opacity-50 h-2 w-[30%] rounded-full">
             <div
               className="w-full h-full animate-pulse"
-              style={ReactDOMStyle.make(~backgroundColor=themeObj.colorPrimary, ~opacity="10%", ())}
+              style={backgroundColor: themeObj.colorPrimary, opacity: "10%"}
             />
           </Shimmer>
         </div>
@@ -122,12 +121,11 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
   <div className="w-full">
     <div
       className="AccordionContainer flex flex-col overflow-auto no-scrollbar"
-      style={ReactDOMStyle.make(
-        ~marginTop=themeObj.spacingAccordionItem,
-        ~width="-webkit-fill-available",
-        ~marginBottom=themeObj.spacingAccordionItem,
-        (),
-      )}>
+      style={
+        marginTop: themeObj.spacingAccordionItem,
+        width: "-webkit-fill-available",
+        marginBottom: themeObj.spacingAccordionItem,
+      }>
       {cardOptionDetails
       ->Array.mapWithIndex((payOption, i) => {
         let isActive = payOption.paymentMethodName == selectedOption
@@ -167,19 +165,17 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
       <button
         className="AccordionMore flex overflow-auto no-scrollbar"
         onClick={_ => setShowMore(_ => !showMore)}
-        style={ReactDOMStyle.make(
-          ~borderRadius=themeObj.borderRadius,
-          ~marginTop=themeObj.spacingUnit,
-          ~columnGap=themeObj.spacingUnit,
-          ~minHeight="60px",
-          ~minWidth="150px",
-          ~width="100%",
-          ~padding="20px",
-          ~cursor="pointer",
-          (),
-        )}>
-        <div
-          className="flex flex-row" style={ReactDOMStyle.make(~columnGap=themeObj.spacingUnit, ())}>
+        style={
+          borderRadius: themeObj.borderRadius,
+          marginTop: themeObj.spacingUnit,
+          columnGap: themeObj.spacingUnit,
+          minHeight: "60px",
+          minWidth: "150px",
+          width: "100%",
+          padding: "20px",
+          cursor: "pointer",
+        }>
+        <div className="flex flex-row" style={columnGap: themeObj.spacingUnit}>
           <div className="m-2">
             <Icon size=10 name="arrow-down" />
           </div>

src/Components/AddBankAccount.res

@@ -7,19 +7,18 @@ module ToolTip = {
     <RenderIf condition={openTip}>
       <button
         className="h-auto max-w-20 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
-        style={ReactDOMStyle.make(
-          ~background=themeObj.colorBackground,
-          ~color=themeObj.colorDanger,
-          ~fontSize=themeObj.fontSizeBase,
-          ~padding=`${themeObj.spacingUnit} ${themeObj.spacingUnit->Utils.addSize(
+        style={
+          background: themeObj.colorBackground,
+          color: themeObj.colorDanger,
+          fontSize: themeObj.fontSizeBase,
+          padding: `${themeObj.spacingUnit} ${themeObj.spacingUnit->Utils.addSize(
               7.0,
               Utils.Pixel,
             )}`,
-          ~border=`1px solid ${themeObj.borderColor}`,
-          ~borderRadius=themeObj.borderRadius,
-          ~boxShadow=`0px 0px 8px ${themeObj.borderColor}`,
-          (),
-        )}
+          border: `1px solid ${themeObj.borderColor}`,
+          borderRadius: themeObj.borderRadius,
+          boxShadow: `0px 0px 8px ${themeObj.borderColor}`,
+        }
         onClick={ev => onclick(ev)}
         ref={forwardRef->ReactDOM.Ref.domRef}>
         {React.string("Remove account")}
@@ -46,14 +45,13 @@ let make = (~modalData, ~setModalData) => {
     className={`PickerItem flex flex-row justify-between items-center ${isDataAvailable
         ? ""
         : "cursor-pointer"}`}
-    style={ReactDOMStyle.make(
-      ~marginTop=themeObj.spacingGridColumn,
-      ~padding=themeObj.spacingUnit->addSize(11.0, Pixel),
-      ~color={
+    style={
+      marginTop: themeObj.spacingGridColumn,
+      padding: themeObj.spacingUnit->addSize(11.0, Pixel),
+      color: {
         isDataAvailable ? themeObj.colorTextSecondary : themeObj.colorPrimary
       },
-      (),
-    )}
+    }
     onClick={_ => isDataAvailable ? () : openModal()}>
     {switch modalData {
     | Some(data: ACHTypes.data) =>

src/Components/AddressPaymentInput.res

@@ -205,8 +205,7 @@ let make = (~paymentType, ~className="") => {
   let hasDefaulltValues =
     line2.value !== "" || city.value !== "" || postalCode.value !== "" || state.value !== ""
 
-  <div
-    className="flex flex-col" style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+  <div className="flex flex-col" style={gridGap: themeObj.spacingGridColumn}>
     <RenderIf condition={showField(showDetails.address, Line1) == Auto}>
       <PaymentField
         fieldName=localeString.line1Label
@@ -228,9 +227,7 @@ let make = (~paymentType, ~className="") => {
       />
     </RenderIf>
     <RenderIf condition={showOtherFileds || hasDefaulltValues}>
-      <div
-        className="flex flex-col animate-slowShow"
-        style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+      <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
         <RenderIf condition={showField(showDetails.address, Line2) == Auto}>
           <PaymentField
             fieldName=localeString.line2Label
@@ -250,9 +247,7 @@ let make = (~paymentType, ~className="") => {
             placeholder=localeString.line2Placeholder
           />
         </RenderIf>
-        <div
-          className="flex flex-row"
-          style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridRow, ())}>
+        <div className="flex flex-row" style={gridGap: themeObj.spacingGridRow}>
           <RenderIf condition={showField(showDetails.address, Country) == Auto}>
             <PaymentDropDownField
               fieldName=localeString.countryLabel
@@ -276,9 +271,7 @@ let make = (~paymentType, ~className="") => {
             }}
           </RenderIf>
         </div>
-        <div
-          className="flex flex-row"
-          style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridRow, ())}>
+        <div className="flex flex-row" style={gridGap: themeObj.spacingGridRow}>
           <RenderIf condition={showField(showDetails.address, City) == Auto}>
             <PaymentField
               fieldName=localeString.cityLabel

src/Components/Block.res

@@ -13,17 +13,16 @@ let make = (~topElement=?, ~bottomElement=?, ~padding="p-5", ~className="") => {
   | (Some(_), Some(_)) =>
     <div
       className={"BlockDivider"}
-      style={ReactDOMStyle.make(
-        ~marginTop=themeObj.spacingUnit,
-        ~marginBottom=themeObj.spacingUnit,
-        (),
-      )}
+      style={
+        marginTop: themeObj.spacingUnit,
+        marginBottom: themeObj.spacingUnit,
+      }
     />
   | (_, _) => React.null
   }
   <div
     className={`Block flex flex-col ${padding} ${className}`}
-    style={ReactDOMStyle.make(~lineHeight=themeObj.fontLineHeight, ())}>
+    style={lineHeight: themeObj.fontLineHeight}>
     <div className="BlockTop"> {topBlock} </div>
     {divider}
     <div className="BlockAction"> {actionBlock} </div>

src/Components/DropdownField.res

@@ -54,26 +54,24 @@ let make = (
         isSpacedInnerLayout}>
         <div
           className={`Label `}
-          style={ReactDOMStyle.make(
-            ~fontWeight=themeObj.fontWeightNormal,
-            ~fontSize=themeObj.fontSizeLg,
-            ~marginBottom="5px",
-            ~opacity="0.6",
-            (),
-          )}>
+          style={
+            fontWeight: themeObj.fontWeightNormal,
+            fontSize: themeObj.fontSizeLg,
+            marginBottom: "5px",
+            opacity: "0.6",
+          }>
           {React.string(fieldName)}
         </div>
       </RenderIf>
       <div className="relative">
         <select
           ref={dropdownRef->ReactDOM.Ref.domRef}
-          style={ReactDOMStyle.make(
-            ~background=disabled ? disbaledBG : themeObj.colorBackground,
-            ~opacity=disabled ? "35%" : "",
-            ~padding=themeObj.spacingUnit,
-            ~width="100%",
-            (),
-          )}
+          style={
+            background: disabled ? disbaledBG : themeObj.colorBackground,
+            opacity: disabled ? "35%" : "",
+            padding: themeObj.spacingUnit,
+            width: "100%",
+          }
           name=""
           value
           disabled={readOnly || disabled}
@@ -89,29 +87,27 @@ let make = (
         <RenderIf condition={config.appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} absolute bottom-0 ml-3 ${focusClass}`}
-            style={ReactDOMStyle.make(
-              ~marginBottom={
+            style={
+              marginBottom: {
                 inputFocused || value->String.length > 0 ? "" : themeObj.spacingUnit
               },
-              ~fontSize={
+              fontSize: {
                 inputFocused || value->String.length > 0 ? themeObj.fontSizeXs : ""
               },
-              ~opacity="0.6",
-              (),
-            )}>
+              opacity: "0.6",
+            }>
             {React.string(fieldName)}
           </div>
         </RenderIf>
         <div
           className="self-center absolute"
-          style={ReactDOMStyle.make(
-            ~opacity=disabled ? "35%" : "",
-            ~color=themeObj.colorText,
-            ~left=localeString.localeDirection == "rtl" ? "1%" : "97%",
-            ~top="42%",
-            ~marginLeft=localeString.localeDirection == "rtl" ? "1rem" : "-1rem",
-            (),
-          )}>
+          style={
+            opacity: disabled ? "35%" : "",
+            color: themeObj.colorText,
+            left: localeString.localeDirection == "rtl" ? "1%" : "97%",
+            top: "42%",
+            marginLeft: localeString.localeDirection == "rtl" ? "1rem" : "-1rem",
+          }>
           <Icon size=10 name={"arrow-down"} />
         </div>
       </div>