fix: primary color usage in components

config/config.toml

@@ -1,9 +1,9 @@
 [default.theme]
-primary_color="#006DF9"
-primary_hover_color="#005ED6"
+primary_color="#FFC0CB"
+primary_hover_color="#FF69B4"
 sidebar_color="#242F48"
 [default.endpoints]
-api_url="http://localhost:8080"
+api_url="https://sandbox.hyperswitch.io"
 sdk_url=""
 logo_url=""
 favicon_url=""
@@ -27,7 +27,7 @@ test_processors=true
 feedback=false
 mixpanel=false
 generate_report=false
-user_journey_analytics=false
+user_journey_analytics=true
 authentication_analytics=false
 surcharge=false
 dispute_evidence_upload=false
@@ -38,6 +38,6 @@ dispute_analytics=false
 configure_pmts=false
 branding=false
 totp=false
-live_users_counter=false
+live_users_counter=true
 granularity=false
 recon_v2=false

src/components/CustomCharts/FunnelChart.res

@@ -8,7 +8,9 @@ let make = (
   ~moduleName,
   ~description,
 ) => {
-  let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
+  let {globalUIConfig: {font: {textColor}, primaryColor}} = React.useContext(
+    ThemeProvider.themeContext,
+  )
   let isMobileView = MatchMedia.useMobileChecker()
   let (size, widthClass, flexDirectionClass) = React.useMemo(() => {
     isMobileView ? (0.16, "w-full", "flex-col") : (size, "w-1/2", "flex-row")
@@ -87,7 +89,7 @@ let make = (
               let i = i->Float.fromInt
               let opacity = (i +. 1.) /. length
               let borderTop = `${(size *. 14.)
-                  ->Float.toString}rem solid rgb(0,109,249,${opacity->Float.toString})`
+                  ->Float.toString}rem solid rgb(var(--color-${primaryColor}),${opacity->Float.toString})`
 
               let currentWidthRatio = switch widths->Array.get(i->Float.toInt) {
               | Some(width) => width

src/components/CustomCharts/HighchartHorizontalBarChart.res

@@ -64,8 +64,7 @@ let make = (
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
 ) => {
-  let {theme} = React.useContext(ThemeProvider.themeContext)
-
+  let {globalUIConfig: {primaryColor}, theme} = React.useContext(ThemeProvider.themeContext)
   let barChartData = React.useMemo(() => {
     LineChartUtils.chartDataMaker(
       ~filterNull=true,
@@ -82,7 +81,7 @@ let make = (
       barChartData->Array.mapWithIndex((_data, i) => {
         let i = i->Int.toFloat
         let opacity = (length -. i +. 1.) /. (length +. 1.)
-        `rgb(0,109,249,${opacity->Float.toString})`
+        `rgb(var(--color-${primaryColor}),${opacity->Float.toString})`
       })
     }
     let defaultOptions: HighchartsHorizontalBarChart.options = {
@@ -122,8 +121,8 @@ let make = (
       tooltip: {
         pointFormatter: valueFormatter,
         useHTML: true,
-        backgroundColor: "rgba(25, 26, 26, 1)",
-        borderColor: "rgba(25, 26, 26, 1)",
+        backgroundColor: "#ffffff",
+        borderColor: "#E5E5E5",
         headerFormat: "",
       },
       chart: {

src/components/CustomCharts/HighchartPieChart.res

@@ -31,7 +31,7 @@ let make = (
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
 ) => {
-  let {theme} = React.useContext(ThemeProvider.themeContext)
+  let {globalUIConfig: {primaryColor}, theme} = React.useContext(ThemeProvider.themeContext)
   let pieSeriesData = React.useMemo(() => {
     LineChartUtils.chartDataMaker(
       ~filterNull=true,
@@ -51,7 +51,7 @@ let make = (
       pieSeriesData->Array.mapWithIndex((_data, i) => {
         let i = i->Int.toFloat
         let opacity = (length -. i +. 1.) /. (length +. 1.)
-        `rgb(0,109,249,${opacity->Float.toString})`
+        `rgb(var(--color-${primaryColor}),${opacity->Float.toString})`
       })
     }
     let defaultOptions: HighchartsPieChart.options = {
@@ -97,8 +97,8 @@ let make = (
       tooltip: {
         pointFormatter: valueFormatter,
         useHTML: true,
-        backgroundColor: "rgba(25, 26, 26, 1)",
-        borderColor: "rgba(25, 26, 26, 1)",
+        backgroundColor: "#ffffff",
+        borderColor: "#E5E5E5",
         headerFormat: "",
       },
       chart: {

src/components/HSwitchSingleStatWidget.res

@@ -18,6 +18,11 @@ let make = (
   ~statThreshold: Dict.t<float>=Dict.make(),
   ~fullWidth=false,
 ) => {
+  let {globalUIConfig: {primaryColor}} = React.useContext(ThemeProvider.themeContext)
+  // open DOMUtils
+  // let styles = document.body->getComputedStyle()
+  // let primaryRgb = styles->getPropertyValue(`--color-${primaryColor}`)
+  // Console.log(("styles", primaryRgb))
   let percentFormat = value => {
     `${Float.toFixedWithPrecision(value, ~digits=2)}%`
   }
@@ -99,7 +104,7 @@ let make = (
     tooltip: {
       enabled: false,
     },
-    colors: ["#006DF9"],
+    colors: [primaryColor],
   }
 
   let series = [

src/utils/DOMUtils.res

@@ -1,6 +1,8 @@
-type document = {mutable title: string}
+type body
+type document = {mutable title: string, body: body}
 type window = {mutable _env_: HyperSwitchConfigTypes.urlConfig}
 @val external document: document = "document"
+@val external body: body = "body"
 @send external getElementById: (document, string) => Dom.element = "getElementById"
 @send external createElement: (document, string) => Dom.element = "createElement"
 @val external window: window = "window"
@@ -22,3 +24,7 @@ external appendChild: Dom.element => unit = "appendChild"
 @scope(("document", "head"))
 external appendHead: Dom.element => unit = "appendChild"
 external domProps: {..} => JsxDOM.domProps = "%identity"
+
+type cssStyleDeclaration = {getPropertyValue: string => string}
+@val
+external getComputedStyle: (body, unit) => cssStyleDeclaration = "getComputedStyle"