From 2b047b2085c98eb21877b82d239e91379fb59850 Mon Sep 17 00:00:00 2001
From: Arush <arush.kapoor@juspay.in>
Date: Fri, 10 May 2024 00:57:30 +0530
Subject: [PATCH] refactor: refactored ReactDOMStyle.make

---
 src/CardUtils.res                       |  2 +-
 src/Components/Accordion.res            | 23 ++++---
 src/Components/AccordionContainer.res   | 66 +++++++++----------
 src/Components/AddBankAccount.res       | 30 ++++-----
 src/Components/AddressPaymentInput.res  | 15 ++---
 src/Components/Block.res                | 11 ++--
 src/Components/DropdownField.res        | 52 +++++++--------
 src/Components/DynamicFields.res        | 42 ++++++------
 src/Components/InfoElement.res          | 15 ++---
 src/Components/Input.res                | 18 +++---
 src/Components/InputField.res           | 17 +++--
 src/Components/Loader.res               |  9 ++-
 src/Components/Modal.res                | 20 +++---
 src/Components/PayNowButton.res         | 34 +++++-----
 src/Components/PaymentDropDownField.res | 67 +++++++++----------
 src/Components/PaymentField.res         | 52 +++++++--------
 src/Components/PaymentInputField.res    | 54 +++++++---------
 src/Components/PaymentShimmer.res       |  2 +-
 src/Components/SavedCardItem.res        | 49 ++++++--------
 src/Components/SavedMethods.res         | 39 ++++++-----
 src/Components/Terms.res                |  4 +-
 src/PaymentElement.res                  | 15 ++---
 src/PaymentOptions.res                  | 57 ++++++++--------
 src/Payments/ACHBankDebit.res           | 17 ++---
 src/Payments/ACHBankTransfer.res        |  4 +-
 src/Payments/BacsBankDebit.res          |  6 +-
 src/Payments/BacsBankTransfer.res       |  4 +-
 src/Payments/BankDebitModal.res         | 86 ++++++++++++-------------
 src/Payments/BankTransfersPopup.res     | 24 ++++---
 src/Payments/BecsBankDebit.res          |  4 +-
 src/Payments/Boleto.res                 |  4 +-
 src/Payments/CardPayment.res            | 46 ++++++-------
 src/Payments/GPay.res                   |  2 +-
 src/Payments/KlarnaPayment.res          |  7 +-
 src/Payments/PayPal.res                 | 21 +++---
 src/Payments/PaymentMethodsWrapper.res  |  2 +-
 src/Payments/QRCodeDisplay.res          | 13 ++--
 src/Payments/SepaBankDebit.res          |  7 +-
 src/Payments/SepaBankTransfer.res       |  4 +-
 src/Payments/VoucherDisplay.res         | 11 ++--
 src/RenderPaymentMethods.res            | 19 +++---
 src/SingleLineCardPayment.res           |  4 +-
 src/TabCard.res                         | 15 ++---
 src/ThreeDSAuth.res                     |  5 +-
 src/orca-log-catcher/ErrorBoundary.res  | 19 +++---
 45 files changed, 453 insertions(+), 564 deletions(-)

diff --git a/src/CardUtils.res b/src/CardUtils.res
index 20d6196e3..8843e523a 100644
--- a/src/CardUtils.res
+++ b/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 {
diff --git a/src/Components/Accordion.res b/src/Components/Accordion.res
index 37de1d309..b9f540c64 100644
--- a/src/Components/Accordion.res
+++ b/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>
diff --git a/src/Components/AccordionContainer.res b/src/Components/AccordionContainer.res
index a2fd9cf77..3a9ba173d 100644
--- a/src/Components/AccordionContainer.res
+++ b/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>
diff --git a/src/Components/AddBankAccount.res b/src/Components/AddBankAccount.res
index beff33042..b87462ac0 100644
--- a/src/Components/AddBankAccount.res
+++ b/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) =>
diff --git a/src/Components/AddressPaymentInput.res b/src/Components/AddressPaymentInput.res
index a24b4d0d0..56285728e 100644
--- a/src/Components/AddressPaymentInput.res
+++ b/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
diff --git a/src/Components/Block.res b/src/Components/Block.res
index 3dfbb4398..5e5060569 100644
--- a/src/Components/Block.res
+++ b/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>
diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
index 539063a3a..5cfa4cca2 100644
--- a/src/Components/DropdownField.res
+++ b/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>
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index f1344d92b..c92e9323f 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -336,11 +336,10 @@ let make = (
         <div
           key={`outside-billing-${index->Int.toString}`}
           className="flex flex-col w-full place-content-between"
-          style={ReactDOMStyle.make(
-            ~marginTop=index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "",
-            ~gridColumnGap=themeObj.spacingGridRow,
-            (),
-          )}>
+          style={
+            marginTop: index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "",
+            gridColumnGap: themeObj.spacingGridRow,
+          }>
           {switch item {
           | CardNumber =>
             <PaymentInputField
@@ -453,12 +452,11 @@ let make = (
             <>
               <RenderIf condition={!isSpacedInnerLayout}>
                 <div
-                  style={ReactDOMStyle.make(
-                    ~marginBottom="5px",
-                    ~fontSize=themeObj.fontSizeLg,
-                    ~opacity="0.6",
-                    (),
-                  )}>
+                  style={
+                    marginBottom: "5px",
+                    fontSize: themeObj.fontSizeLg,
+                    opacity: "0.6",
+                  }>
                   {item->getCustomFieldName->Option.getOr("")->React.string}
                 </div>
               </RenderIf>
@@ -492,19 +490,17 @@ let make = (
       <RenderIf condition={isRenderDynamicFieldsInsideBilling}>
         <div
           className={`${spacedStylesForBiilingDetails} w-full text-left`}
-          style={ReactDOMStyle.make(
-            ~border={isSpacedInnerLayout ? `1px solid ${themeObj.borderColor}` : ""},
-            ~borderRadius={isSpacedInnerLayout ? themeObj.borderRadius : ""},
-            ~margin={isSpacedInnerLayout ? `10px 0` : ""},
-            (),
-          )}>
+          style={
+            border: {isSpacedInnerLayout ? `1px solid ${themeObj.borderColor}` : ""},
+            borderRadius: {isSpacedInnerLayout ? themeObj.borderRadius : ""},
+            margin: {isSpacedInnerLayout ? `10px 0` : ""},
+          }>
           <div
-            style={ReactDOMStyle.make(
-              ~marginBottom="5px",
-              ~fontSize=themeObj.fontSizeLg,
-              ~opacity="0.6",
-              (),
-            )}>
+            style={
+              marginBottom: "5px",
+              fontSize: themeObj.fontSizeLg,
+              opacity: "0.6",
+            }>
             {React.string(localeString.billingDetailsText)}
           </div>
           <div
diff --git a/src/Components/InfoElement.res b/src/Components/InfoElement.res
index 68968e84d..9c01d239d 100644
--- a/src/Components/InfoElement.res
+++ b/src/Components/InfoElement.res
@@ -3,20 +3,17 @@ let make = () => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let selectedOption =
     Recoil.useRecoilValueFromAtom(RecoilAtoms.selectedOptionAtom)->PaymentModeType.paymentMode
-  <div
-    className="flex flex-row w-full pr-3 gap-3"
-    style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+  <div className="flex flex-row w-full pr-3 gap-3" style={color: themeObj.colorText}>
     <div>
       <Icon name="redirect" size=55 shouldMirrorIcon={localeString.localeDirection === "rtl"} />
     </div>
     <div
       className="self-center"
-      style={ReactDOMStyle.make(
-        ~fontSize=themeObj.fontSizeLg,
-        ~opacity="60%",
-        ~fontWeight=themeObj.fontWeightLight,
-        (),
-      )}>
+      style={
+        fontSize: themeObj.fontSizeLg,
+        opacity: "60%",
+        fontWeight: themeObj.fontWeightLight,
+      }>
       {switch selectedOption {
       | ACHTransfer
       | BacsTransfer
diff --git a/src/Components/Input.res b/src/Components/Input.res
index 90a4f0f34..954a22e46 100644
--- a/src/Components/Input.res
+++ b/src/Components/Input.res
@@ -58,20 +58,18 @@ let make = (
     ""
   }
 
-  <div
-    className={` flex flex-col w-full`} style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+  <div className={` flex flex-col w-full`} style={color: themeObj.colorText}>
     <RenderIf condition={fieldName->String.length > 0}>
-      <div style={ReactDOMStyle.make()}> {React.string(fieldName)} </div>
+      <div> {React.string(fieldName)} </div>
     </RenderIf>
-    <div className="flex flex-row " style={ReactDOMStyle.make(~direction, ())}>
+    <div className="flex flex-row " style={direction: direction}>
       <input
         id
-        style={ReactDOMStyle.make(
-          ~background=themeObj.colorBackground,
-          ~padding=themeObj.spacingUnit,
-          ~width="100%",
-          (),
-        )}
+        style={
+          background: themeObj.colorBackground,
+          padding: themeObj.spacingUnit,
+          width: "100%",
+        }
         disabled=options.disabled
         ref={inputRef->ReactDOM.Ref.domRef}
         type_
diff --git a/src/Components/InputField.res b/src/Components/InputField.res
index c603b9728..9dca321c4 100644
--- a/src/Components/InputField.res
+++ b/src/Components/InputField.res
@@ -115,17 +115,16 @@ let make = (
 
   <div className={` flex flex-col w-full`}>
     <RenderIf condition={fieldName->String.length > 0}>
-      <div style={ReactDOMStyle.make()}> {React.string(fieldName)} </div>
+      <div> {React.string(fieldName)} </div>
     </RenderIf>
-    <div className="flex flex-row " style={ReactDOMStyle.make(~direction, ())}>
+    <div className="flex flex-row " style={direction: direction}>
       <input
         id
-        style={ReactDOMStyle.make(
-          ~background="transparent",
-          ~width="-webkit-fill-available",
-          ~color=textColor,
-          (),
-        )}
+        style={
+          background: "transparent",
+          width: "-webkit-fill-available",
+          color: textColor,
+        }
         disabled=options.disabled
         ref={inputRef->ReactDOM.Ref.domRef}
         type_
@@ -144,7 +143,7 @@ let make = (
     {switch errorString {
     | Some(val) =>
       <RenderIf condition={val->String.length > 0}>
-        <div className="py-1" style={ReactDOMStyle.make()}> {React.string(val)} </div>
+        <div className="py-1"> {React.string(val)} </div>
       </RenderIf>
     | None => React.null
     }}
diff --git a/src/Components/Loader.res b/src/Components/Loader.res
index bfb920930..b14c7b117 100644
--- a/src/Components/Loader.res
+++ b/src/Components/Loader.res
@@ -8,11 +8,10 @@ let make = (~showText=true) => {
       ->Array.mapWithIndex((item, i) => {
         <Icon
           size=52
-          style={ReactDOMStyle.make(
-            ~animation="slowShow 1.5s ease-in-out infinite",
-            ~animationDelay={((i + 1) * 180)->Belt.Int.toString ++ "ms"},
-            (),
-          )}
+          style={
+            animation: "slowShow 1.5s ease-in-out infinite",
+            animationDelay: {((i + 1) * 180)->Belt.Int.toString ++ "ms"},
+          }
           name=item
           key={i->Belt.Int.toString}
         />
diff --git a/src/Components/Modal.res b/src/Components/Modal.res
index be5f65339..ae38c39b0 100644
--- a/src/Components/Modal.res
+++ b/src/Components/Modal.res
@@ -46,24 +46,22 @@ let make = (
     </div>
   <div
     className="h-screen w-screen bg-black/40 flex m-auto items-center backdrop-blur-sm overflow-scroll"
-    style={ReactDOMStyle.make(
-      ~transition="opacity .35s ease .1s,background-color 600ms linear",
-      ~opacity=!openModal ? "0" : "100",
-      (),
-    )}>
+    style={
+      transition: "opacity .35s ease .1s,background-color 600ms linear",
+      opacity: !openModal ? "0" : "100",
+    }>
     {loaderUI}
     {<div
       className={`w-full h-full sm:h-auto sm:w-[55%] md:w-[45%] lg:w-[35%] xl:w-[32%] 2xl:w-[27%]  m-auto bg-white flex flex-col justify-start sm:justify-center px-5 pb-5 md:pb-6 pt-4 md:pt-7 rounded-none sm:rounded-md relative overflow-scroll ${animate}`}
-      style={ReactDOMStyle.make(
-        ~transition="opacity .35s ease .1s,transform .35s ease .1s,-webkit-transform .35s ease .1s",
-        ~opacity=!openModal ? "0" : "100",
-        ~backgroundColor={
+      style={
+        transition: "opacity .35s ease .1s,transform .35s ease .1s,-webkit-transform .35s ease .1s",
+        opacity: !openModal ? "0" : "100",
+        backgroundColor: {
           themeObj.colorBackground === "transparent"
             ? ""
             : themeObj.colorBackground->Utils.rgbaTorgb
         },
-        (),
-      )}>
+      }>
       <div className="absolute top-0 left-0 w-full flex flex-col">
         <RenderIf condition={testMode && !Window.isProd}>
           <div
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
index 0c411e645..27d1f743f 100644
--- a/src/Components/PayNowButton.res
+++ b/src/Components/PayNowButton.res
@@ -4,9 +4,7 @@ module Loader = {
   @react.component
   let make = () => {
     let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-    <div
-      className=" w-8 h-8 animate-spin"
-      style={ReactDOMStyle.make(~color=themeObj.colorTextSecondary, ())}>
+    <div className=" w-8 h-8 animate-spin" style={color: themeObj.colorTextSecondary}>
       <Icon size=32 name="loader" />
     </div>
   }
@@ -46,24 +44,22 @@ let make = () => {
       disabled=isPayNowButtonDisable
       onClick=handleOnClick
       className={`w-full flex flex-row justify-center items-center`}
-      style={ReactDOMStyle.make(
-        ~borderRadius=themeObj.buttonBorderRadius,
-        ~backgroundColor=themeObj.buttonBackgroundColor,
-        ~height=themeObj.buttonHeight,
-        ~cursor={isPayNowButtonDisable ? "not-allowed" : "pointer"},
-        ~opacity={isPayNowButtonDisable ? "0.6" : "1"},
-        ~width=themeObj.buttonWidth,
-        ~borderColor=themeObj.buttonBorderColor,
-        (),
-      )}>
+      style={
+        borderRadius: themeObj.buttonBorderRadius,
+        backgroundColor: themeObj.buttonBackgroundColor,
+        height: themeObj.buttonHeight,
+        cursor: {isPayNowButtonDisable ? "not-allowed" : "pointer"},
+        opacity: {isPayNowButtonDisable ? "0.6" : "1"},
+        width: themeObj.buttonWidth,
+        borderColor: themeObj.buttonBorderColor,
+      }>
       <span
         id="button-text"
-        style={ReactDOMStyle.make(
-          ~color=themeObj.buttonTextColor,
-          ~fontSize=themeObj.buttonTextFontSize,
-          ~fontWeight=themeObj.buttonTextFontWeight,
-          (),
-        )}>
+        style={
+          color: themeObj.buttonTextColor,
+          fontSize: themeObj.buttonTextFontSize,
+          fontWeight: themeObj.buttonTextFontWeight,
+        }>
         {if showLoader {
           <Loader />
         } else {
diff --git a/src/Components/PaymentDropDownField.res b/src/Components/PaymentDropDownField.res
index 9000252e7..f6e1666ae 100644
--- a/src/Components/PaymentDropDownField.res
+++ b/src/Components/PaymentDropDownField.res
@@ -66,33 +66,31 @@ let make = (
   }, [themeObj])
   let cursorClass = !disabled ? "cursor-pointer" : "cursor-not-allowed"
   <RenderIf condition={options->Array.length > 0}>
-    <div className="flex flex-col w-full" style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+    <div className="flex flex-col w-full" style={color: themeObj.colorText}>
       <RenderIf
         condition={fieldName->String.length > 0 &&
         config.appearance.labels == Above &&
         isSpacedInnerLayout}>
         <div
           className={`Label ${labelClass} `}
-          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="11px 20px 11px 11px",
-            ~width="100%",
-            (),
-          )}
+          style={
+            background: disabled ? disbaledBG : themeObj.colorBackground,
+            opacity: disabled ? "35%" : "",
+            padding: "11px 20px 11px 11px",
+            width: "100%",
+          }
           name=""
           value=value.value
           disabled={readOnly || disabled}
@@ -108,41 +106,38 @@ let make = (
         <RenderIf condition={config.appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass}`}
-            style={ReactDOMStyle.make(
-              ~marginBottom={
+            style={
+              marginBottom: {
                 inputFocused || value.value->String.length > 0 ? "" : themeObj.spacingUnit
               },
-              ~fontSize={
+              fontSize: {
                 inputFocused || value.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>
         <RenderIf condition={value.errorString->String.length > 0}>
           <div
             className="Error pt-1"
-            style={ReactDOMStyle.make(
-              ~color=themeObj.colorDangerText,
-              ~fontSize=themeObj.fontSizeSm,
-              ~alignSelf="start",
-              ~textAlign="left",
-              (),
-            )}>
+            style={
+              color: themeObj.colorDangerText,
+              fontSize: themeObj.fontSizeSm,
+              alignSelf: "start",
+              textAlign: "left",
+            }>
             {React.string(value.errorString)}
           </div>
         </RenderIf>
diff --git a/src/Components/PaymentField.res b/src/Components/PaymentField.res
index cdd8d4e27..0197a086e 100644
--- a/src/Components/PaymentField.res
+++ b/src/Components/PaymentField.res
@@ -78,32 +78,30 @@ let make = (
   let inputClass = getClassName("Input")
   let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed"
 
-  <div className="flex flex-col w-full" style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+  <div className="flex flex-col w-full" style={color: themeObj.colorText}>
     <RenderIf
       condition={fieldName->String.length > 0 &&
       config.appearance.labels == Above &&
       isSpacedInnerLayout}>
       <div
         className={`Label ${labelClass}`}
-        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="flex flex-row " style={ReactDOMStyle.make(~direction, ())}>
+    <div className="flex flex-row " style={direction: direction}>
       <div className="relative w-full">
         <input
-          style={ReactDOMStyle.make(
-            ~background=backgroundClass,
-            ~padding=themeObj.spacingUnit,
-            ~width="100%",
-            (),
-          )}
+          style={
+            background: backgroundClass,
+            padding: themeObj.spacingUnit,
+            width: "100%",
+          }
           disabled=readOnly
           ref={inputRef->ReactDOM.Ref.domRef}
           type_
@@ -123,16 +121,15 @@ let make = (
         <RenderIf condition={config.appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass}`}
-            style={ReactDOMStyle.make(
-              ~marginBottom={
+            style={
+              marginBottom: {
                 inputFocused || value.value->String.length > 0 ? "" : themeObj.spacingUnit
               },
-              ~fontSize={
+              fontSize: {
                 inputFocused || value.value->String.length > 0 ? themeObj.fontSizeXs : ""
               },
-              ~opacity="0.6",
-              (),
-            )}>
+              opacity: "0.6",
+            }>
             {React.string(fieldName)}
           </div>
         </RenderIf>
@@ -142,13 +139,12 @@ let make = (
     <RenderIf condition={value.errorString->String.length > 0}>
       <div
         className="Error pt-1"
-        style={ReactDOMStyle.make(
-          ~color=themeObj.colorDangerText,
-          ~fontSize=themeObj.fontSizeSm,
-          ~alignSelf="start",
-          ~textAlign="left",
-          (),
-        )}>
+        style={
+          color: themeObj.colorDangerText,
+          fontSize: themeObj.fontSizeSm,
+          alignSelf: "start",
+          textAlign: "left",
+        }>
         {React.string(value.errorString)}
       </div>
     </RenderIf>
diff --git a/src/Components/PaymentInputField.res b/src/Components/PaymentInputField.res
index 2e295b1f4..aa9515546 100644
--- a/src/Components/PaymentInputField.res
+++ b/src/Components/PaymentInputField.res
@@ -77,33 +77,31 @@ let make = (
   let inputClass = getClassName("Input")
   let inputClassStyles = innerLayout === Spaced ? "Input" : "Input-Compressed"
 
-  <div className="flex flex-col w-full" style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+  <div className="flex flex-col w-full" style={color: themeObj.colorText}>
     <RenderIf
       condition={fieldName->String.length > 0 &&
       appearance.labels == Above &&
       innerLayout === Spaced}>
       <div
         className={`Label ${labelClass}`}
-        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="flex flex-row " style={ReactDOMStyle.make(~direction, ())}>
+    <div className="flex flex-row " style={direction: direction}>
       <div className={`relative w-full ${inputFieldClassName}`}>
         <input
-          style={ReactDOMStyle.make(
-            ~background=backgroundClass,
-            ~padding=themeObj.spacingUnit,
-            ~width=fieldWidth,
-            ~height,
-            (),
-          )}
+          style={
+            background: backgroundClass,
+            padding: themeObj.spacingUnit,
+            width: fieldWidth,
+            height,
+          }
           disabled=readOnly
           ref={inputRef->ReactDOM.Ref.domRef}
           type_
@@ -121,14 +119,13 @@ let make = (
         <RenderIf condition={appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass} text-opacity-20 pointer-events-none`}
-            style={ReactDOMStyle.make(
-              ~marginBottom={
+            style={
+              marginBottom: {
                 inputFocused || value->String.length > 0 ? "" : themeObj.spacingUnit
               },
-              ~fontSize={inputFocused || value->String.length > 0 ? themeObj.fontSizeXs : ""},
-              ~opacity="0.6",
-              (),
-            )}>
+              fontSize: {inputFocused || value->String.length > 0 ? themeObj.fontSizeXs : ""},
+              opacity: "0.6",
+            }>
             {React.string(fieldName)}
           </div>
         </RenderIf>
@@ -141,13 +138,12 @@ let make = (
         <RenderIf condition={val->String.length > 0}>
           <div
             className="Error pt-1"
-            style={ReactDOMStyle.make(
-              ~color=themeObj.colorDangerText,
-              ~fontSize=themeObj.fontSizeSm,
-              ~alignSelf="start",
-              ~textAlign="left",
-              (),
-            )}>
+            style={
+              color: themeObj.colorDangerText,
+              fontSize: themeObj.fontSizeSm,
+              alignSelf: "start",
+              textAlign: "left",
+            }>
             {React.string(val)}
           </div>
         </RenderIf>
diff --git a/src/Components/PaymentShimmer.res b/src/Components/PaymentShimmer.res
index dd81ef833..6bb4af6b1 100644
--- a/src/Components/PaymentShimmer.res
+++ b/src/Components/PaymentShimmer.res
@@ -6,7 +6,7 @@ let make = (~showInBlock=true) => {
     <Shimmer classname="opacity-50">
       <div
         className="w-full h-2 animate-pulse"
-        style={ReactDOMStyle.make(~backgroundColor=themeObj.colorPrimary, ~opacity="10%", ())}
+        style={backgroundColor: themeObj.colorPrimary, opacity: "10%"}
       />
     </Shimmer>
   if showInBlock {
diff --git a/src/Components/SavedCardItem.res b/src/Components/SavedCardItem.res
index 4155a1c0a..e8d532964 100644
--- a/src/Components/SavedCardItem.res
+++ b/src/Components/SavedCardItem.res
@@ -65,30 +65,29 @@ let make = (
     <button
       className={`PickerItem ${pickerItemClass} flex flex-row items-stretch`}
       type_="button"
-      style={ReactDOMStyle.make(
-        ~minWidth="150px",
-        ~width="100%",
-        ~padding="1rem 0 1rem 0",
-        ~cursor="pointer",
-        ~borderBottom=index == savedCardlength - 1 ? "0px" : `1px solid ${themeObj.borderColor}`,
-        ~borderTop="none",
-        ~borderLeft="none",
-        ~borderRight="none",
-        ~borderRadius="0px",
-        ~background="transparent",
-        ~color=themeObj.colorTextSecondary,
-        ~boxShadow="none",
-        ~opacity={isCardExpired ? "0.7" : "1"},
-        (),
-      )}
+      style={
+        minWidth: "150px",
+        width: "100%",
+        padding: "1rem 0 1rem 0",
+        cursor: "pointer",
+        borderBottom: index == savedCardlength - 1 ? "0px" : `1px solid ${themeObj.borderColor}`,
+        borderTop: "none",
+        borderLeft: "none",
+        borderRight: "none",
+        borderRadius: "0px",
+        background: "transparent",
+        color: themeObj.colorTextSecondary,
+        boxShadow: "none",
+        opacity: {isCardExpired ? "0.7" : "1"},
+      }
       onClick={_ => setPaymentToken(_ => (paymentItem.paymentToken, paymentItem.customerId))}>
       <div className="w-full">
         <div>
           <div className="flex flex-row justify-between items-center">
             <div
               className={`flex flex-row justify-center items-center`}
-              style={ReactDOMStyle.make(~columnGap=themeObj.spacingUnit, ())}>
-              <div style={ReactDOMStyle.make(~color=isActive ? themeObj.colorPrimary : "", ())}>
+              style={columnGap: themeObj.spacingUnit}>
+              <div style={color: isActive ? themeObj.colorPrimary : ""}>
                 <Radio
                   checked=isActive
                   height="18px"
@@ -112,11 +111,7 @@ let make = (
                       </div>
                     : <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>}
                   <RenderIf condition={paymentItem.defaultPaymentMethodSet}>
-                    <Icon
-                      size=18
-                      name="checkmark"
-                      style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}
-                    />
+                    <Icon size=18 name="checkmark" style={color: themeObj.colorPrimary} />
                   </RenderIf>
                 </div>
               </div>
@@ -124,7 +119,7 @@ let make = (
             <RenderIf condition={isCard}>
               <div
                 className={`flex flex-row items-center justify-end gap-3 -mt-1`}
-                style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.5", ())}>
+                style={fontSize: "14px", opacity: "0.5"}>
                 <div className="flex">
                   {React.string(`${expiryMonth} / ${expiryYear->CardUtils.formatExpiryToTwoDigit}`)}
                 </div>
@@ -136,7 +131,7 @@ let make = (
               <RenderIf condition={isActive && isRenderCvv}>
                 <div
                   className={`flex flex-row items-start justify-start gap-2`}
-                  style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.5", ())}>
+                  style={fontSize: "14px", opacity: "0.5"}>
                   <div className="w-12 mt-6"> {React.string("CVC: ")} </div>
                   <div
                     className={`flex h mx-4 justify-start w-16 ${isActive
@@ -163,9 +158,7 @@ let make = (
                 </div>
               </RenderIf>
               <RenderIf condition={isCardExpired}>
-                <div
-                  className="italic mt-3 ml-1"
-                  style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.7", ())}>
+                <div className="italic mt-3 ml-1" style={fontSize: "14px", opacity: "0.7"}>
                   {`*${localeString.cardExpiredText}`->React.string}
                 </div>
               </RenderIf>
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 54e0e25e5..b7a0eda17 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -184,13 +184,12 @@ let make = (
     {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"
-        style={ReactDOMStyle.make(
-          ~fontSize="14px",
-          ~color=themeObj.colorPrimary,
-          ~fontWeight="400",
-          ~marginTop="25px",
-          (),
-        )}>
+        style={
+          fontSize: "14px",
+          color: themeObj.colorPrimary,
+          fontWeight: "400",
+          marginTop: "25px",
+        }>
         <PaymentElementShimmer.Shimmer>
           <div className="animate-pulse w-full h-12 rounded bg-slate-200">
             <div className="flex flex-row my-auto">
@@ -211,26 +210,24 @@ let make = (
     <RenderIf condition={paymentMethodListValue.payment_type === SETUP_MANDATE}>
       <div
         className="opacity-50 text-xs mb-2 text-left"
-        style={ReactDOMStyle.make(
-          ~color=themeObj.colorText,
-          ~marginTop=themeObj.spacingGridColumn,
-          (),
-        )}>
+        style={
+          color: themeObj.colorText,
+          marginTop: themeObj.spacingGridColumn,
+        }>
         <Terms mode={Card} />
       </div>
     </RenderIf>
     <RenderIf condition={!showFields}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"
-        style={ReactDOMStyle.make(
-          ~fontSize="14px",
-          ~float="left",
-          ~marginTop="14px",
-          ~fontWeight="500",
-          ~width="fit-content",
-          ~color=themeObj.colorPrimary,
-          (),
-        )}
+        style={
+          fontSize: "14px",
+          float: "left",
+          marginTop: "14px",
+          fontWeight: "500",
+          width: "fit-content",
+          color: themeObj.colorPrimary,
+        }
         onClick={_ => setShowFields(_ => true)}>
         <Icon name="circle-plus" size=22 />
         {React.string(localeString.morePaymentMethods)}
diff --git a/src/Components/Terms.res b/src/Components/Terms.res
index 0a5fa0a09..524d74bac 100644
--- a/src/Components/Terms.res
+++ b/src/Components/Terms.res
@@ -18,9 +18,7 @@ let make = (~mode) => {
   let (termsText, showTerm) = terms
 
   <RenderIf condition={showTerm == Auto || showTerm == Always}>
-    <div
-      className="opacity-50 text-xs mb-2 text-left"
-      style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+    <div className="opacity-50 text-xs mb-2 text-left" style={color: themeObj.colorText}>
       {React.string(termsText)}
     </div>
   </RenderIf>
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index 290b9a885..e1e0d7479 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -402,14 +402,13 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       condition={displaySavedPaymentMethods && savedMethods->Array.length > 0 && showFields}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer my-4"
-        style={ReactDOMStyle.make(
-          ~fontSize="14px",
-          ~float="left",
-          ~fontWeight=themeObj.fontWeightNormal,
-          ~width="fit-content",
-          ~color=themeObj.colorPrimary,
-          (),
-        )}
+        style={
+          fontSize: "14px",
+          float: "left",
+          fontWeight: themeObj.fontWeightNormal,
+          width: "fit-content",
+          color: themeObj.colorPrimary,
+        }
         onClick={_ => setShowFields(_ => false)}>
         <Icon name="circle_dots" size=20 width=19 />
         {React.string(localeString.useExistingPaymentMethods)}
diff --git a/src/PaymentOptions.res b/src/PaymentOptions.res
index 82749de93..d128cd832 100644
--- a/src/PaymentOptions.res
+++ b/src/PaymentOptions.res
@@ -13,24 +13,23 @@ module TabLoader = {
         <div
           className={`Tab flex flex-col gap-3 animate-pulse cursor-default`}
           key={i->Belt.Int.toString}
-          style={ReactDOMStyle.make(
-            ~minWidth="5rem",
-            ~overflowWrap="hidden",
-            ~width="100%",
-            ~padding=themeObj.spacingUnit,
-            ~cursor="pointer",
-            (),
-          )}>
+          style={
+            minWidth: "5rem",
+            overflowWrap: "hidden",
+            width: "100%",
+            padding: themeObj.spacingUnit,
+            cursor: "pointer",
+          }>
           <Shimmer classname="opacity-50 w-1/3">
             <div
               className="w-full h-3 animate-pulse"
-              style={ReactDOMStyle.make(~backgroundColor=themeObj.colorPrimary, ~opacity="10%", ())}
+              style={backgroundColor: themeObj.colorPrimary, opacity: "10%"}
             />
           </Shimmer>
           <Shimmer classname="opacity-50">
             <div
               className="w-full h-2 animate-pulse"
-              style={ReactDOMStyle.make(~backgroundColor=themeObj.colorPrimary, ~opacity="10%", ())}
+              style={backgroundColor: themeObj.colorPrimary, opacity: "10%"}
             />
           </Shimmer>
         </div>
@@ -109,14 +108,13 @@ let make = (
     <div
       ref={payOptionsRef->ReactDOM.Ref.domRef}
       className="flex flex-row overflow-auto no-scrollbar"
-      style={ReactDOMStyle.make(
-        ~columnGap=themeObj.spacingTab,
-        ~marginBottom=themeObj.spacingGridColumn,
-        ~paddingBottom="7px",
-        ~padding="4px",
-        ~height="auto",
-        (),
-      )}>
+      style={
+        columnGap: themeObj.spacingTab,
+        marginBottom: themeObj.spacingGridColumn,
+        paddingBottom: "7px",
+        padding: "4px",
+        height: "auto",
+      }>
       {cardOptionDetails
       ->Array.mapWithIndex((payOption, i) => {
         let isActive = payOption.paymentMethodName == selectedOption
@@ -147,17 +145,16 @@ let make = (
             className={`TabMore place-items-start outline-none`}
             onChange=handleChange
             disabled=readOnly
-            style={ReactDOMStyle.make(
-              ~width="40px",
-              ~paddingLeft=themeObj.spacingUnit,
-              ~background=themeObj.colorBackground,
-              ~cursor="pointer",
-              ~height="inherit",
-              ~borderRadius=themeObj.borderRadius,
-              ~appearance="none",
-              ~color="transparent",
-              (),
-            )}>
+            style={
+              width: "40px",
+              paddingLeft: themeObj.spacingUnit,
+              background: themeObj.colorBackground,
+              cursor: "pointer",
+              height: "inherit",
+              borderRadius: themeObj.borderRadius,
+              appearance: "none",
+              color: "transparent",
+            }>
             <option value=selectedPaymentOption.paymentMethodName disabled={true}>
               {React.string(
                 selectedPaymentOption.displayName === "Card"
@@ -178,7 +175,7 @@ let make = (
               <option
                 key={Int.toString(i)}
                 value=item.paymentMethodName
-                style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}>
+                style={color: themeObj.colorPrimary}>
                 {React.string(
                   item.displayName === "card"
                     ? localeString.card
diff --git a/src/Payments/ACHBankDebit.res b/src/Payments/ACHBankDebit.res
index c2f4a4165..a975651f0 100644
--- a/src/Payments/ACHBankDebit.res
+++ b/src/Payments/ACHBankDebit.res
@@ -87,9 +87,7 @@ let make = (~paymentType: CardThemeType.mode) => {
   }, (email, modalData, fullName))
   useSubmitPaymentData(submitCallback)
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
     <FullNamePaymentInput paymentType={paymentType} />
     <EmailPaymentInput paymentType />
     <div className="flex flex-col">
@@ -97,13 +95,12 @@ let make = (~paymentType: CardThemeType.mode) => {
       <RenderIf condition={bankError->String.length > 0}>
         <div
           className="Error pt-1"
-          style={ReactDOMStyle.make(
-            ~color=themeObj.colorDangerText,
-            ~fontSize=themeObj.fontSizeSm,
-            ~alignSelf="start",
-            ~textAlign="left",
-            (),
-          )}>
+          style={
+            color: themeObj.colorDangerText,
+            fontSize: themeObj.fontSizeSm,
+            alignSelf: "start",
+            textAlign: "left",
+          }>
           {React.string(bankError)}
         </div>
       </RenderIf>
diff --git a/src/Payments/ACHBankTransfer.res b/src/Payments/ACHBankTransfer.res
index f49fda76d..e26868498 100644
--- a/src/Payments/ACHBankTransfer.res
+++ b/src/Payments/ACHBankTransfer.res
@@ -41,9 +41,7 @@ let make = (~paymentType: CardThemeType.mode) => {
   }, [email])
   useSubmitPaymentData(submitCallback)
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingTab, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingTab}>
     <EmailPaymentInput paymentType />
     <Surcharge paymentMethod="bank_transfer" paymentMethodType="ach" />
     <InfoElement />
diff --git a/src/Payments/BacsBankDebit.res b/src/Payments/BacsBankDebit.res
index 8538f5615..4680e417c 100644
--- a/src/Payments/BacsBankDebit.res
+++ b/src/Payments/BacsBankDebit.res
@@ -114,10 +114,8 @@ let make = (~paymentType: CardThemeType.mode) => {
     }
   }
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
-    <div className="flex flex-row" style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridRow, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
+    <div className="flex flex-row" style={gridGap: themeObj.spacingGridRow}>
       <PaymentInputField
         fieldName=localeString.sortCodeText
         value=sortcode
diff --git a/src/Payments/BacsBankTransfer.res b/src/Payments/BacsBankTransfer.res
index d6a06358b..eb059010b 100644
--- a/src/Payments/BacsBankTransfer.res
+++ b/src/Payments/BacsBankTransfer.res
@@ -45,9 +45,7 @@ let default = (paymentType: CardThemeType.mode) => {
   }, [email, fullName])
   useSubmitPaymentData(submitCallback)
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingTab, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingTab}>
     <EmailPaymentInput paymentType />
     <FullNamePaymentInput paymentType />
     <Surcharge paymentMethod="bank_transfer" paymentMethodType="bacs" />
diff --git a/src/Payments/BankDebitModal.res b/src/Payments/BankDebitModal.res
index 71299c9af..44c72ed3c 100644
--- a/src/Payments/BankDebitModal.res
+++ b/src/Payments/BankDebitModal.res
@@ -98,7 +98,7 @@ module AccountNumberCard = {
       </div>
       <div
         className=" bg-[#DFDFE0] h-28 rounded-r absolute right-0 top-0 w-[20%]"
-        style={ReactDOMStyle.make(~clipPath="polygon(50% 0, 100% 0, 100% 100%, 0% 100%)", ())}
+        style={clipPath: "polygon(50% 0, 100% 0, 100% 100%, 0% 100%)"}
       />
     </div>
   }
@@ -187,7 +187,7 @@ let make = (~setModalData) => {
     <div className="flex flex-col w-full h-auto overflow-scroll">
       <div className={`flex flex-col`}>
         <div
-          style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ~marginBottom="5px", ())}
+          style={color: themeObj.colorPrimary, marginBottom: "5px"}
           className="self-start font-semibold text-lg text-[#151A1F]">
           {React.string(localeString.billingDetailsText)}
         </div>
@@ -198,19 +198,18 @@ let make = (~setModalData) => {
           />
         </div>
         <div
-          style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ~marginBottom="5px", ())}
+          style={color: themeObj.colorPrimary, marginBottom: "5px"}
           className="self-start font-semibold text-lg text-[#151A1F]">
           {React.string("Bank Details")}
         </div>
         <div
           className={`Label mb-1 mt-5`}
-          style={ReactDOMStyle.make(
-            ~fontWeight=themeObj.fontWeightNormal,
-            ~fontSize=themeObj.fontSizeLg,
-            ~color=themeObj.colorText,
-            ~marginBottom="5px",
-            (),
-          )}>
+          style={
+            fontWeight: themeObj.fontWeightNormal,
+            fontSize: themeObj.fontSizeLg,
+            color: themeObj.colorText,
+            marginBottom: "5px",
+          }>
           {React.string("Account Holder Name")}
         </div>
         <Input
@@ -226,13 +225,12 @@ let make = (~setModalData) => {
         <RenderIf condition={isSepaDebit}>
           <div
             className={`Label mb-1 mt-5`}
-            style={ReactDOMStyle.make(
-              ~fontWeight=themeObj.fontWeightNormal,
-              ~fontSize=themeObj.fontSizeLg,
-              ~color=themeObj.colorText,
-              ~marginBottom="5px",
-              (),
-            )}>
+            style={
+              fontWeight: themeObj.fontWeightNormal,
+              fontSize: themeObj.fontSizeLg,
+              color: themeObj.colorText,
+              marginBottom: "5px",
+            }>
             {React.string("IBAN")}
           </div>
           <Input
@@ -246,16 +244,15 @@ let make = (~setModalData) => {
         </RenderIf>
         <div className="flex flex-row items-center w-full justify-between">
           <RenderIf condition={isAchDebit}>
-            <div className="w-full" style={ReactDOMStyle.make(~marginRight="1rem", ())}>
+            <div className="w-full" style={marginRight: "1rem"}>
               <div
                 className={`Label mb-1 mt-5`}
-                style={ReactDOMStyle.make(
-                  ~fontWeight=themeObj.fontWeightNormal,
-                  ~fontSize=themeObj.fontSizeLg,
-                  ~color=themeObj.colorText,
-                  ~marginBottom="5px",
-                  (),
-                )}>
+                style={
+                  fontWeight: themeObj.fontWeightNormal,
+                  fontSize: themeObj.fontSizeLg,
+                  color: themeObj.colorText,
+                  marginBottom: "5px",
+                }>
                 {React.string("Routing number")}
               </div>
               <Input
@@ -278,13 +275,12 @@ let make = (~setModalData) => {
             <div className="w-full ">
               <div
                 className={`Label mb-1 mt-5`}
-                style={ReactDOMStyle.make(
-                  ~fontWeight=themeObj.fontWeightNormal,
-                  ~fontSize=themeObj.fontSizeLg,
-                  ~color=themeObj.colorText,
-                  ~marginBottom="5px",
-                  (),
-                )}>
+                style={
+                  fontWeight: themeObj.fontWeightNormal,
+                  fontSize: themeObj.fontSizeLg,
+                  color: themeObj.colorText,
+                  marginBottom: "5px",
+                }>
                 {React.string("Account number")}
               </div>
               <Input
@@ -304,13 +300,12 @@ let make = (~setModalData) => {
         <RenderIf condition={isAchDebit}>
           <div
             className="w-full mb-1 mt-5"
-            style={ReactDOMStyle.make(
-              ~fontWeight=themeObj.fontWeightNormal,
-              ~fontSize=themeObj.fontSizeLg,
-              ~color=themeObj.colorText,
-              ~marginBottom="5px",
-              (),
-            )}>
+            style={
+              fontWeight: themeObj.fontWeightNormal,
+              fontSize: themeObj.fontSizeLg,
+              color: themeObj.colorText,
+              marginBottom: "5px",
+            }>
             <DropdownField
               appearance=config.appearance
               fieldName="Account type"
@@ -325,13 +320,12 @@ let make = (~setModalData) => {
         <RenderIf condition={isBecsDebit}>
           <div
             className={`Label mb-1 mt-5`}
-            style={ReactDOMStyle.make(
-              ~fontWeight=themeObj.fontWeightNormal,
-              ~fontSize=themeObj.fontSizeLg,
-              ~color=themeObj.colorText,
-              ~marginBottom="5px",
-              (),
-            )}>
+            style={
+              fontWeight: themeObj.fontWeightNormal,
+              fontSize: themeObj.fontSizeLg,
+              color: themeObj.colorText,
+              marginBottom: "5px",
+            }>
             {React.string("BSB")}
           </div>
           <Input
diff --git a/src/Payments/BankTransfersPopup.res b/src/Payments/BankTransfersPopup.res
index 810541e80..bc0ed57c2 100644
--- a/src/Payments/BankTransfersPopup.res
+++ b/src/Payments/BankTransfersPopup.res
@@ -86,15 +86,14 @@ let make = (~transferType) => {
         </div>
         <div
           className="DetailsSection w-full m-8 text-center"
-          style={ReactDOMStyle.make(
-            ~background="rgba(21, 26, 31, 0.03)",
-            ~border="1px solid rgba(21, 26, 31, 0.06)",
-            ~borderRadius="5px",
-            (),
-          )}>
+          style={
+            background: "rgba(21, 26, 31, 0.03)",
+            border: "1px solid rgba(21, 26, 31, 0.06)",
+            borderRadius: "5px",
+          }>
           <div
             className="flex font-medium p-5 justify-between text-sm"
-            style={ReactDOMStyle.make(~borderBottom="1px dashed rgba(21, 26, 31, 0.06)", ())}>
+            style={borderBottom: "1px dashed rgba(21, 26, 31, 0.06)"}>
             <span className="text-[#151a1fe6]"> {React.string("Bank Account Details")} </span>
             <button
               className={`flex flex-row ${text} cursor-pointer`} onClick={_ => handleClick(keys)}>
@@ -129,12 +128,11 @@ let make = (~transferType) => {
           <div>
             <button
               className="w-full mt-6 p-2 h-[40px]"
-              style={ReactDOMStyle.make(
-                ~background="#006DF9",
-                ~borderRadius="4px",
-                ~color="#ffffff",
-                (),
-              )}
+              style={
+                background: "#006DF9",
+                borderRadius: "4px",
+                color: "#ffffff",
+              }
               onClick={_ => {
                 postSubmitResponse(~jsonData=postData, ~url=return_url)
                 Modal.close(setOpenModal)
diff --git a/src/Payments/BecsBankDebit.res b/src/Payments/BecsBankDebit.res
index 8293a744c..591ba7d94 100644
--- a/src/Payments/BecsBankDebit.res
+++ b/src/Payments/BecsBankDebit.res
@@ -79,9 +79,7 @@ let make = (~paymentType: CardThemeType.mode) => {
   }, (email, fullName, modalData))
   useSubmitPaymentData(submitCallback)
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
     <EmailPaymentInput paymentType />
     <FullNamePaymentInput paymentType />
     <AddBankAccount modalData setModalData />
diff --git a/src/Payments/Boleto.res b/src/Payments/Boleto.res
index 6d4227177..4378285a6 100644
--- a/src/Payments/Boleto.res
+++ b/src/Payments/Boleto.res
@@ -86,9 +86,7 @@ let make = (~paymentType: CardThemeType.mode) => {
     }
   }
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
     <PaymentInputField
       fieldName=localeString.socialSecurityNumberLabel
       value=socialSecurityNumber
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index 85725a1ee..77c79ffcb 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -193,18 +193,15 @@ let make = (
 
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
-      <div
-        className="flex flex-col"
-        style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+      <div className="flex flex-col" style={gridGap: themeObj.spacingGridColumn}>
         <div className="w-full">
           <RenderIf condition={innerLayout === Compressed}>
             <div
-              style={ReactDOMStyle.make(
-                ~marginBottom="5px",
-                ~fontSize=themeObj.fontSizeLg,
-                ~opacity="0.6",
-                (),
-              )}>
+              style={
+                marginBottom: "5px",
+                fontSize: themeObj.fontSizeLg,
+                opacity: "0.6",
+              }>
               {React.string(localeString.cardHeader)}
             </div>
           </RenderIf>
@@ -230,13 +227,12 @@ let make = (
             />
             <div
               className="flex flex-row w-full place-content-between"
-              style={ReactDOMStyle.make(
-                ~marginTop={
+              style={
+                marginTop: {
                   innerLayout === Spaced ? themeObj.spacingGridColumn : ""
                 },
-                ~gridColumnGap={innerLayout === Spaced ? themeObj.spacingGridRow : ""},
-                (),
-              )}>
+                gridColumnGap: {innerLayout === Spaced ? themeObj.spacingGridRow : ""},
+              }>
               <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>
                 <PaymentInputField
                   fieldName=localeString.validThruText
@@ -285,13 +281,12 @@ let make = (
               expiryError->String.length > 0}>
               <div
                 className="Error pt-1"
-                style={ReactDOMStyle.make(
-                  ~color=themeObj.colorDangerText,
-                  ~fontSize=themeObj.fontSizeSm,
-                  ~alignSelf="start",
-                  ~textAlign="left",
-                  (),
-                )}>
+                style={
+                  color: themeObj.colorDangerText,
+                  fontSize: themeObj.fontSizeSm,
+                  alignSelf: "start",
+                  textAlign: "left",
+                }>
                 {React.string("Invalid input")}
               </div>
             </RenderIf>
@@ -338,11 +333,10 @@ let make = (
       | (_, _, NEW_MANDATE) =>
         <div
           className="opacity-50 text-xs mb-2 text-left"
-          style={ReactDOMStyle.make(
-            ~color=themeObj.colorText,
-            ~marginTop=themeObj.spacingGridColumn,
-            (),
-          )}>
+          style={
+            color: themeObj.colorText,
+            marginTop: themeObj.spacingGridColumn,
+          }>
           <Terms mode={Card} />
         </div>
       | (_, _, _) => React.null
diff --git a/src/Payments/GPay.res b/src/Payments/GPay.res
index d084fcc79..dea08587f 100644
--- a/src/Payments/GPay.res
+++ b/src/Payments/GPay.res
@@ -277,7 +277,7 @@ let make = (
     isWallet
       ? <RenderIf condition={isRenderGooglePayButton}>
           <div
-            style={ReactDOMStyle.make(~height=`${height->Belt.Int.toString}px`, ())}
+            style={height: `${height->Belt.Int.toString}px`}
             id="google-pay-button"
             className={`w-full flex flex-row justify-center rounded-md`}
           />
diff --git a/src/Payments/KlarnaPayment.res b/src/Payments/KlarnaPayment.res
index 02522e294..aaec19fb4 100644
--- a/src/Payments/KlarnaPayment.res
+++ b/src/Payments/KlarnaPayment.res
@@ -62,10 +62,9 @@ let make = (~paymentType) => {
 
   <div
     className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(
-      ~gridGap=config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : "",
-      (),
-    )}>
+    style={
+      gridGap: config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : "",
+    }>
     <EmailPaymentInput paymentType={paymentType} />
     <FullNamePaymentInput paymentType={paymentType} />
     <RenderIf condition={showAddressDetails.country == Auto}>
diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res
index 526c7af6f..e1713d423 100644
--- a/src/Payments/PayPal.res
+++ b/src/Payments/PayPal.res
@@ -83,19 +83,16 @@ let make = () => {
   })
 
   <button
-    style={ReactDOMStyle.make(
-      ~display="inline-block",
-      ~color=textColor,
-      ~height=`${height->Belt.Int.toString}px`,
-      ~borderRadius="2px",
-      ~width="100%",
-      ~backgroundColor=buttonColor,
-      (),
-    )}
+    style={
+      display: "inline-block",
+      color: textColor,
+      height: `${height->Belt.Int.toString}px`,
+      borderRadius: "2px",
+      width: "100%",
+      backgroundColor: buttonColor,
+    }
     onClick={_ => options.readOnly ? () : onPaypalClick()}>
-    <div
-      className="justify-center"
-      style={ReactDOMStyle.make(~display="flex", ~flexDirection="row", ~color=textColor, ())}>
+    <div className="justify-center" style={display: "flex", flexDirection: "row", color: textColor}>
       {if !paypalClicked {
         payPalIcon
       } else {
diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res
index 427372186..3c2d0f6ce 100644
--- a/src/Payments/PaymentMethodsWrapper.res
+++ b/src/Payments/PaymentMethodsWrapper.res
@@ -110,7 +110,7 @@ let make = (~paymentType: CardThemeType.mode, ~paymentMethodName: string) => {
   useSubmitPaymentData(submitCallback)
   <div
     className="DynamicFields flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+    style={gridGap: themeObj.spacingGridColumn}>
     <DynamicFields
       paymentType
       paymentMethod=paymentMethodDetails.methodType
diff --git a/src/Payments/QRCodeDisplay.res b/src/Payments/QRCodeDisplay.res
index 4af8ac78b..50ca3262e 100644
--- a/src/Payments/QRCodeDisplay.res
+++ b/src/Payments/QRCodeDisplay.res
@@ -134,7 +134,7 @@ let make = () => {
         className=" flex flex-row w-full justify-center items-start mb-8 font-medium text-2xl font-semibold text-[#151A1F] opacity-50">
         {expiryString->React.string}
       </div>
-      <img style={ReactDOMStyle.make(~height="13rem", ())} src=qrCode />
+      <img style={height: "13rem"} src=qrCode />
       <div className=" flex flex-col max-w-md justify-between items-center">
         <div className="Disclaimer w-full mt-16 font-medium text-xs text-[#151A1F] opacity-50">
           {React.string(
@@ -145,12 +145,11 @@ let make = () => {
           <div>
             <button
               className="w-full mt-6 p-2 h-[40px]"
-              style={ReactDOMStyle.make(
-                ~background="#006DF9",
-                ~borderRadius="4px",
-                ~color="#ffffff",
-                (),
-              )}
+              style={
+                background: "#006DF9",
+                borderRadius: "4px",
+                color: "#ffffff",
+              }
               onClick={_ => {
                 closeModal()
               }}>
diff --git a/src/Payments/SepaBankDebit.res b/src/Payments/SepaBankDebit.res
index fb7e6da2b..4ee182404 100644
--- a/src/Payments/SepaBankDebit.res
+++ b/src/Payments/SepaBankDebit.res
@@ -78,10 +78,9 @@ let make = (~paymentType: CardThemeType.mode) => {
 
   <div
     className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(
-      ~gridGap={config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : ""},
-      (),
-    )}>
+    style={
+      gridGap: {config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : ""},
+    }>
     <EmailPaymentInput paymentType />
     <FullNamePaymentInput paymentType />
     <AddBankAccount modalData setModalData />
diff --git a/src/Payments/SepaBankTransfer.res b/src/Payments/SepaBankTransfer.res
index e3ab567b6..91864efe7 100644
--- a/src/Payments/SepaBankTransfer.res
+++ b/src/Payments/SepaBankTransfer.res
@@ -57,9 +57,7 @@ let make = (~paymentType) => {
   }, (email, fullName, country))
   useSubmitPaymentData(submitCallback)
 
-  <div
-    className="flex flex-col animate-slowShow"
-    style={ReactDOMStyle.make(~gridGap=themeObj.spacingTab, ())}>
+  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingTab}>
     <EmailPaymentInput paymentType />
     <FullNamePaymentInput paymentType={paymentType} />
     <RenderIf condition={showAddressDetails.country == Auto}>
diff --git a/src/Payments/VoucherDisplay.res b/src/Payments/VoucherDisplay.res
index 4210cc9a5..b65369ead 100644
--- a/src/Payments/VoucherDisplay.res
+++ b/src/Payments/VoucherDisplay.res
@@ -89,12 +89,11 @@ let make = () => {
           <div>
             <button
               className="w-full mt-6 p-2 h-[40px]"
-              style={ReactDOMStyle.make(
-                ~background="#006DF9",
-                ~borderRadius="4px",
-                ~color="#ffffff",
-                (),
-              )}
+              style={
+                background: "#006DF9",
+                borderRadius: "4px",
+                color: "#ffffff",
+              }
               onClick={_ => {
                 closeModal()
               }}>
diff --git a/src/RenderPaymentMethods.res b/src/RenderPaymentMethods.res
index 94c282c6d..500affcf1 100644
--- a/src/RenderPaymentMethods.res
+++ b/src/RenderPaymentMethods.res
@@ -54,16 +54,15 @@ let make = (
   let frameRef = React.useRef(Nullable.null)
   <div
     className={`flex flex-col justify-between `}
-    style={ReactDOMStyle.make(
-      ~color=themeObj.colorText,
-      ~background="transparent",
-      ~marginLeft="4px",
-      ~marginRight="4px",
-      ~fontFamily=themeObj.fontFamily,
-      ~fontSize=themeObj.fontSizeBase,
-      ~filter=blur,
-      (),
-    )}
+    style={
+      color: themeObj.colorText,
+      background: "transparent",
+      marginLeft: "4px",
+      marginRight: "4px",
+      fontFamily: themeObj.fontFamily,
+      fontSize: themeObj.fontSizeBase,
+      filter: blur,
+    }
     dir=localeString.localeDirection>
     <div
       ref={frameRef->ReactDOM.Ref.domRef}
diff --git a/src/SingleLineCardPayment.res b/src/SingleLineCardPayment.res
index c53cbfafc..6e9ba84c5 100644
--- a/src/SingleLineCardPayment.res
+++ b/src/SingleLineCardPayment.res
@@ -171,9 +171,7 @@ let make = (
           />
         </div>
         <RenderIf condition={!options.hidePostalCode}>
-          <div
-            className={`w-2/5 ${pincodeClass} slowShow`}
-            style={ReactDOMStyle.make(~display=showPincode, ())}>
+          <div className={`w-2/5 ${pincodeClass} slowShow`} style={display: showPincode}>
             <InputField
               onKeyDown=onZipCodeKeyDown
               isValid=isZipValid
diff --git a/src/TabCard.res b/src/TabCard.res
index f8c6ff76a..e0e1ead62 100644
--- a/src/TabCard.res
+++ b/src/TabCard.res
@@ -23,14 +23,13 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
     className={`Tab ${tabClass} flex flex-col animate-slowShow`}
     type_="button"
     disabled=readOnly
-    style={ReactDOMStyle.make(
-      ~minWidth="5rem",
-      ~overflowWrap="anywhere",
-      ~width="100%",
-      ~padding=themeObj.spacingUnit,
-      ~cursor="pointer",
-      (),
-    )}
+    style={
+      minWidth: "5rem",
+      overflowWrap: "anywhere",
+      width: "100%",
+      padding: themeObj.spacingUnit,
+      cursor: "pointer",
+    }
     onClick>
     <div className={`TabIcon ${tabIconClass}`}>
       {switch icon {
diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
index a763a8a4d..b9903c789 100644
--- a/src/ThreeDSAuth.res
+++ b/src/ThreeDSAuth.res
@@ -104,10 +104,7 @@ let make = () => {
     <div className="backdrop-blur-xl">
       <div id="threeDsAuthDiv" className="hidden" />
       <iframe
-        id="threeDsAuthFrame"
-        name="threeDsAuthFrame"
-        style={ReactDOMStyle.make(~minHeight="500px", ())}
-        width="100%"
+        id="threeDsAuthFrame" name="threeDsAuthFrame" style={minHeight: "500px"} width="100%"
       />
     </div>
   </Modal>
diff --git a/src/orca-log-catcher/ErrorBoundary.res b/src/orca-log-catcher/ErrorBoundary.res
index cb9a5bbfc..16c13f715 100644
--- a/src/orca-log-catcher/ErrorBoundary.res
+++ b/src/orca-log-catcher/ErrorBoundary.res
@@ -173,19 +173,16 @@ module ErrorCard = {
     | _ =>
       <div
         ref={divRef->ReactDOM.Ref.domRef}
-        style={ReactDOMStyle.make(
-          ~color=themeObj.colorPrimary,
-          ~backgroundColor=themeObj.colorBackground,
-          ~borderRadius=themeObj.borderRadius,
-          ~borderColor=themeObj.borderColor,
-          (),
-        )}
+        style={
+          color: themeObj.colorPrimary,
+          backgroundColor: themeObj.colorBackground,
+          borderRadius: themeObj.borderRadius,
+          borderColor: themeObj.borderColor,
+        }
         className="flex  items-center">
         <div className="flex flex-row  items-center m-6">
-          <div style={ReactDOMStyle.make(~marginLeft="1rem", ())}> {errorIcon} </div>
-          <div
-            className="flex flex-col items-center justify-center"
-            style={ReactDOMStyle.make(~marginLeft="3rem", ())}>
+          <div style={marginLeft: "1rem"}> {errorIcon} </div>
+          <div className="flex flex-col items-center justify-center" style={marginLeft: "3rem"}>
             <div> {"Oops, something went wrong!"->React.string} </div>
             <div className="text-sm"> {message->React.string} </div>
           </div>