Merge branch 'main' into add-email-support

public/hyperswitch/module.js

@@ -262,6 +262,8 @@ function appendStyle(themesConfig) {
   let cssVariables = `:root{
   /* Colors */
   ${generateVariablesForSection(settings.colors, "colors")}
+   /* sidebar */
+  ${generateVariablesForSection(settings.sidebar, "sidebar")}
   /* Typography */
   ${generateVariablesForSection(settings.typography, "base")}
  /* Buttons */

src/UIConifg/UIConfig.res

@@ -80,8 +80,13 @@ module BorderConfig = {
 }
 
 module SidebarConfig = {
-  type backgroundColor = {sidebarNormal: string}
-  type t = {backgroundColor: backgroundColor}
+  type backgroundColor = {sidebarNormal: string, sidebarSecondary: string}
+  type t = {
+    backgroundColor: backgroundColor,
+    primaryTextColor: string,
+    secondaryTextColor: string,
+    hoverColor: string,
+  }
 }
 
 type t = {
@@ -174,7 +179,11 @@ let defaultUIConfig: t = {
   secondaryColor: "bg-secondary",
   sidebarColor: {
     backgroundColor: {
-      sidebarNormal: "bg-sidebar",
+      sidebarNormal: "bg-sidebar-primary",
+      sidebarSecondary: "bg-sidebar-secondary md:bg-sidebar-secondary ",
     },
+    primaryTextColor: "text-sidebar-primaryTextColor",
+    secondaryTextColor: "text-sidebar-secondaryTextColor/80",
+    hoverColor: "hover:bg-sidebar-hoverColor/10",
   },
 }

src/context/ThemeProvider.res

@@ -19,9 +19,15 @@ let newDefaultConfig: HyperSwitchConfigTypes.customStylesTheme = {
     colors: {
       primary: "#006DF9",
       secondary: "#303E5F",
-      sidebar: "#242F48",
       background: "#006df9",
     },
+    sidebar: {
+      primary: "#242F48",
+      secondary: "#303E5F",
+      hoverColor: "#ffffff",
+      primaryTextColor: "#ffffff",
+      secondaryTextColor: "#ffffff",
+    },
     typography: {
       fontFamily: "Roboto, sans-serif",
       fontSize: "14px",
@@ -116,6 +122,7 @@ let make = (~children) => {
     let settings = dict->getDictfromDict("settings")
     let url = dict->getDictfromDict("urls")
     let colorsConfig = settings->getDictfromDict("colors")
+    let sidebarConfig = settings->getDictfromDict("sidebar")
     let typography = settings->getDictfromDict("typography")
     let borders = settings->getDictfromDict("borders")
     let spacing = settings->getDictfromDict("spacing")
@@ -127,9 +134,24 @@ let make = (~children) => {
         colors: {
           primary: colorsConfig->getString("primary", defaultSettings.colors.primary),
           secondary: colorsConfig->getString("secondary", defaultSettings.colors.secondary),
-          sidebar: colorsConfig->getString("sidebar", defaultSettings.colors.sidebar),
           background: colorsConfig->getString("background", defaultSettings.colors.background),
         },
+        sidebar: {
+          // This 'colorsConfig' will be replaced with 'sidebarConfig', and the 'sidebar' key will be changed to 'primary' after API Changes.
+          primary: colorsConfig->getString("sidebar", defaultSettings.sidebar.primary),
+          // This 'colorsConfig' will be replaced with 'sidebarConfig' once the API changes are done.
+          secondary: colorsConfig->getString("secondary", defaultSettings.sidebar.secondary),
+          hoverColor: sidebarConfig->getString("hoverColor", defaultSettings.sidebar.hoverColor),
+          // This property is currently required to support current sidebar changes. It will be removed in a future update.
+          primaryTextColor: sidebarConfig->getString(
+            "primaryTextColor",
+            defaultSettings.sidebar.primaryTextColor,
+          ),
+          secondaryTextColor: sidebarConfig->getString(
+            "secondaryTextColor",
+            defaultSettings.sidebar.secondaryTextColor,
+          ),
+        },
         typography: {
           fontFamily: typography->getString("fontFamily", defaultSettings.typography.fontFamily),
           fontSize: typography->getString("fontSize", defaultSettings.typography.fontSize),
@@ -238,7 +260,7 @@ let make = (~children) => {
           "settings": {
             "colors": {
               "primary": dict->getString("primary_color", defaultSettings.colors.primary),
-              "sidebar": dict->getString("sidebar_color", defaultSettings.colors.sidebar),
+              "sidebar": dict->getString("sidebar_color", defaultSettings.sidebar.primary),
             },
             "buttons": {
               "primary": {

src/entryPoints/configs/HyperSwitchConfigTypes.res

@@ -14,15 +14,12 @@ type urlConfig = {
   urlThemeConfig: urlThemeConfig,
 }
 
-// themes struct type
-
+// Type definition for themes
 type colorPalette = {
   primary: string,
   secondary: string,
-  sidebar: string,
   background: string,
 }
-
 type typographyConfig = {
   fontFamily: string,
   fontSize: string,
@@ -53,8 +50,17 @@ type buttonConfig = {
   secondary: buttonStyleConfig,
 }
 
+type sidebarConfig = {
+  primary: string,
+  secondary: string,
+  hoverColor: string,
+  primaryTextColor: string,
+  secondaryTextColor: string,
+}
+
 type themeSettings = {
   colors: colorPalette,
+  sidebar: sidebarConfig,
   typography: typographyConfig,
   buttons: buttonConfig,
   borders: borderConfig,

src/entryPoints/configs/HyperSwitchDefaultConfig.res

@@ -77,7 +77,11 @@ let config: UIConfig.t = {
   },
   sidebarColor: {
     backgroundColor: {
-      sidebarNormal: "bg-sidebar",
+      sidebarNormal: "bg-sidebar-primary",
+      sidebarSecondary: "bg-sidebar-secondary",
     },
+    primaryTextColor: "text-sidebar-primaryTextColor",
+    secondaryTextColor: "text-sidebar-secondaryTextColor",
+    hoverColor: "hover:bg-sidebar-hoverColor",
   },
 }

src/screens/Helpers/PageLoaderWrapper.res

@@ -7,15 +7,16 @@ module ScreenLoader = {
     let loaderLottieFile = LottieFiles.useLottieJson("hyperswitch_loader.json")
     let loader = LottieFiles.useLottieJson("loader-circle.json")
     let {devThemeFeature} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
+    let {userInfo: {themeId}} = React.useContext(UserInfoProvider.defaultContext)
     let {branding} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
-
+    let showLoader = devThemeFeature && themeId->LogicUtils.isNonEmptyString
     <div className={`${sectionHeight} w-scrren flex flex-col justify-center items-center`}>
       <RenderIf condition={!branding}>
         <div className="w-20 h-16">
           <ReactSuspenseWrapper>
             <div className="scale-400 pt-px">
               <Lottie
-                animationData={devThemeFeature ? loader : loaderLottieFile} autoplay=true loop=true
+                animationData={showLoader ? loader : loaderLottieFile} autoplay=true loop=true
               />
             </div>
           </ReactSuspenseWrapper>

src/screens/OMPSwitch/OMPSwitchHelper.res

@@ -47,21 +47,24 @@ module ListBaseComp = {
     ~isDarkBg=false,
     ~showDropdownArrow=true,
   ) => {
+    let {globalUIConfig: {sidebarColor: {secondaryTextColor}}} = React.useContext(
+      ThemeProvider.themeContext,
+    )
     let baseCompStyle = isDarkBg
       ? "text-white hover:bg-opacity-80 bg-sidebar-blue"
       : "text-black hover:bg-opacity-80"
 
     let iconName = isDarkBg ? "arrow-without-tail-new" : "arrow-without-tail"
 
     let arrowDownClass = isDarkBg
-      ? "rotate-0 transition duration-[250ms] opacity-70"
-      : "rotate-180 transition duration-[250ms] opacity-70"
+      ? `rotate-0 transition duration-[250ms] opacity-70 ${secondaryTextColor}`
+      : `rotate-180 transition duration-[250ms] opacity-70 `
 
     let arrowUpClass = isDarkBg
-      ? "-rotate-180 transition duration-[250ms] opacity-70"
-      : "rotate-0 transition duration-[250ms] opacity-70"
+      ? `-rotate-180 transition duration-[250ms] opacity-70 ${secondaryTextColor}`
+      : `rotate-0 transition duration-[250ms] opacity-70 `
 
-    let textColor = isDarkBg ? "text-grey-300" : "text-grey-900"
+    let textColor = isDarkBg ? `${secondaryTextColor}` : "text-grey-900"
     let width = isDarkBg ? "w-[12rem]" : "min-w-[5rem] w-fit max-w-[10rem]"
     let paddingSubheading = isDarkBg ? "pl-2" : ""
     let paddingHeading = isDarkBg ? "pl-2" : ""