From 5eb4dc56a15216c167b5b773bbfd29588f445908 Mon Sep 17 00:00:00 2001
From: "arun.mishra" <arun.mishra@juspay.in>
Date: Tue, 10 Oct 2023 15:16:18 +0530
Subject: [PATCH] background color fix with scroll issue fix

---
 src/Components/Modal.res |  6 ++++--
 src/Utilities/Utils.res  | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/Components/Modal.res b/src/Components/Modal.res
index 885b13bcd..5c8a81c35 100644
--- a/src/Components/Modal.res
+++ b/src/Components/Modal.res
@@ -45,7 +45,7 @@ let make = (
       <Loader showText=false />
     </div>
   <div
-    className="h-screen w-screen bg-black/40 flex m-auto items-center backdrop-blur-sm overflow-hidden"
+    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",
@@ -58,7 +58,9 @@ let make = (
         ~transition="opacity .35s ease .1s,transform .35s ease .1s,-webkit-transform .35s ease .1s",
         ~opacity=!openModal ? "0" : "100",
         ~backgroundColor={
-          themeObj.colorBackground === "transparent" ? "" : themeObj.colorBackground
+          themeObj.colorBackground === "transparent"
+            ? ""
+            : themeObj.colorBackground->Utils.rgbaTorgb
         },
         (),
       )}>
diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
index 1aeb30f94..95109af2c 100644
--- a/src/Utilities/Utils.res
+++ b/src/Utilities/Utils.res
@@ -726,6 +726,27 @@ let getDictIsSome = (dict, key) => {
   dict->Js.Dict.get(key)->Belt.Option.isSome
 }
 
+let rgbaTorgb = bgColor => {
+  let cleanBgColor = bgColor->Js.String2.trim
+  if cleanBgColor->Js.String2.startsWith("rgba") || cleanBgColor->Js.String2.startsWith("rgb") {
+    let start = cleanBgColor->Js.String2.indexOf("(")
+    let end = cleanBgColor->Js.String2.indexOf(")")
+
+    let colorArr =
+      cleanBgColor->Js.String2.substring(~from=start + 1, ~to_=end)->Js.String2.split(",")
+    if colorArr->Js.Array2.length === 3 {
+      cleanBgColor
+    } else {
+      let red = colorArr->Belt.Array.get(0)->Belt.Option.getWithDefault("0")
+      let green = colorArr->Belt.Array.get(1)->Belt.Option.getWithDefault("0")
+      let blue = colorArr->Belt.Array.get(2)->Belt.Option.getWithDefault("0")
+      `rgba(${red}, ${green}, ${blue})`
+    }
+  } else {
+    cleanBgColor
+  }
+}
+
 let delay = timeOut => {
   Promise.make((resolve, _reject) => {
     Js.Global.setTimeout(() => {