From be7ee2f5467669f66f8fd8c9b7433a9f4effc042 Mon Sep 17 00:00:00 2001
From: Saksham Sharma <saksham.sharma.001@Saksham-Sharma-LWR61FHHHW.local>
Date: Thu, 8 Aug 2024 18:19:45 +0530
Subject: [PATCH] refactor: added classes for billing section and billing
 details text

---
 src/Components/DropdownField.res | 64 ++++++++++++++++----------------
 src/Components/DynamicFields.res |  3 +-
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
index f79587ea2..9d3ae0fc0 100644
--- a/src/Components/DropdownField.res
+++ b/src/Components/DropdownField.res
@@ -101,42 +101,42 @@ let make = (
         </div>
       </RenderIf>
       <div className="relative">
-        <div className={`Input ${className} appearance-none relative`}>
-          <RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
-            <div
-              className="absolute top-1 left-1 right-0 bottom-0  pointer-events-none rounded-sm z-20 whitespace-nowrap"
-              style={
-                background: disabled ? disbaledBG : themeObj.colorBackground,
-                opacity: disabled ? "35%" : "",
-                padding: themeObj.spacingUnit,
-                width: "95%",
-              }>
-              {React.string(displayValue->Option.getOr(""))}
-            </div>
-          </RenderIf>
-          <select
-            ref={dropdownRef->ReactDOM.Ref.domRef}
+        // <div className={`Input ${className} appearance-none relative`}>
+        <RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
+          <div
+            className="absolute top-1 left-1 right-0 bottom-0  pointer-events-none rounded-sm z-20 whitespace-nowrap"
             style={
               background: disabled ? disbaledBG : themeObj.colorBackground,
               opacity: disabled ? "35%" : "",
               padding: themeObj.spacingUnit,
-              width: "100%",
-            }
-            name=""
-            value
-            disabled={readOnly || disabled}
-            onChange=handleChange
-            onFocus=handleFocus
-            className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
-            {options
-            ->Array.mapWithIndex((item, index) => {
-              <option key={Int.toString(index)} value=item.value>
-                {React.string(item.label->Option.getOr(item.value))}
-              </option>
-            })
-            ->React.array}
-          </select>
-        </div>
+              width: "95%",
+            }>
+            {React.string(displayValue->Option.getOr(""))}
+          </div>
+        </RenderIf>
+        <select
+          ref={dropdownRef->ReactDOM.Ref.domRef}
+          style={
+            background: disabled ? disbaledBG : themeObj.colorBackground,
+            opacity: disabled ? "35%" : "",
+            padding: themeObj.spacingUnit,
+            width: "100%",
+          }
+          name=""
+          value
+          disabled={readOnly || disabled}
+          onChange=handleChange
+          onFocus=handleFocus
+          className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          {options
+          ->Array.mapWithIndex((item, index) => {
+            <option key={Int.toString(index)} value=item.value>
+              {React.string(item.label->Option.getOr(item.value))}
+            </option>
+          })
+          ->React.array}
+        </select>
+        // </div>
         <RenderIf condition={config.appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} absolute bottom-0 ml-3 ${focusClass}`}
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 273645123..31c0002bd 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -493,13 +493,14 @@ let make = (
       ->React.array}
       <RenderIf condition={isRenderDynamicFieldsInsideBilling}>
         <div
-          className={`${spacedStylesForBiilingDetails} w-full text-left`}
+          className={`billing__section ${spacedStylesForBiilingDetails} w-full text-left`}
           style={
             border: {isSpacedInnerLayout ? `1px solid ${themeObj.borderColor}` : ""},
             borderRadius: {isSpacedInnerLayout ? themeObj.borderRadius : ""},
             margin: {isSpacedInnerLayout ? `10px 0` : ""},
           }>
           <div
+            className="billing__details__text"
             style={
               marginBottom: "5px",
               fontSize: themeObj.fontSizeLg,