diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg index 98482ef23..f46829d32 100644 --- a/public/hyperswitch/icons/solid.svg +++ b/public/hyperswitch/icons/solid.svg @@ -190,9 +190,11 @@ License) d="M22.502 14.0005H18.502V10.0005H22.502V14.0005ZM22.502 30.0005H18.502V18.0005H22.502V30.0005ZM20.502 0.000488281C17.8755 0.000488281 15.2748 0.517804 12.8483 1.5229C10.4218 2.52799 8.21699 4.00118 6.35982 5.85835C2.60909 9.60908 0.501953 14.6962 0.501953 20.0005C0.501953 25.3048 2.60909 30.3919 6.35982 34.1426C8.21699 35.9998 10.4218 37.473 12.8483 38.4781C15.2748 39.4832 17.8755 40.0005 20.502 40.0005C25.8063 40.0005 30.8934 37.8934 34.6441 34.1426C38.3948 30.3919 40.502 25.3048 40.502 20.0005C40.502 17.3741 39.9846 14.7733 38.9795 12.3468C37.9745 9.92031 36.5013 7.71552 34.6441 5.85835C32.7869 4.00118 30.5821 2.52799 28.1556 1.5229C25.7291 0.517804 23.1284 0.000488281 20.502 0.000488281Z" fill="#7DC9FB" /> - - - + + + - + - + - - - - + + + + - - - + + + @@ -8012,7 +8020,7 @@ License) > @@ -8470,12 +8478,10 @@ License) width="8" height="14" viewBox="0 0 8 14" - fill="none" xmlns="http://www.w3.org/2000/svg" > @@ -8990,4 +8996,4 @@ License) d="M14.6301 13.3701C14.1901 13.3701 13.7501 13.1801 13.4501 12.8001C12.9401 12.1501 13.0401 11.2101 13.6901 10.6901L18.1801 7.13014L13.6901 3.57015C13.0401 3.06015 12.9301 2.11016 13.4501 1.46016C13.9601 0.810161 14.9101 0.70011 15.5601 1.22011L21.5401 5.96016C21.9001 6.24016 22.1101 6.68015 22.1101 7.14015C22.1101 7.60015 21.9001 8.03015 21.5401 8.32015L15.5601 13.0601C15.2801 13.2801 14.9601 13.3801 14.6301 13.3801V13.3701Z" /> - + \ No newline at end of file diff --git a/public/hyperswitch/module.js b/public/hyperswitch/module.js index 0f1aeb1f1..7f6c959fb 100644 --- a/public/hyperswitch/module.js +++ b/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 */ diff --git a/src/UIConifg/UIConfig.res b/src/UIConifg/UIConfig.res index 7051756a5..41aa6bb0d 100644 --- a/src/UIConifg/UIConfig.res +++ b/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", }, } diff --git a/src/context/ThemeProvider.res b/src/context/ThemeProvider.res index 4b6a27416..2f4b14e94 100644 --- a/src/context/ThemeProvider.res +++ b/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": { diff --git a/src/entryPoints/configs/HyperSwitchConfigTypes.res b/src/entryPoints/configs/HyperSwitchConfigTypes.res index 946e20d03..d0c46da53 100644 --- a/src/entryPoints/configs/HyperSwitchConfigTypes.res +++ b/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, diff --git a/src/entryPoints/configs/HyperSwitchDefaultConfig.res b/src/entryPoints/configs/HyperSwitchDefaultConfig.res index c96b86e6e..62545f199 100644 --- a/src/entryPoints/configs/HyperSwitchDefaultConfig.res +++ b/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", }, } diff --git a/src/screens/Helpers/PageLoaderWrapper.res b/src/screens/Helpers/PageLoaderWrapper.res index 45e5c6a9c..3d8e5af2b 100644 --- a/src/screens/Helpers/PageLoaderWrapper.res +++ b/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
diff --git a/src/screens/OMPSwitch/OMPSwitchHelper.res b/src/screens/OMPSwitch/OMPSwitchHelper.res index 864a383f5..d00fde141 100644 --- a/src/screens/OMPSwitch/OMPSwitchHelper.res +++ b/src/screens/OMPSwitch/OMPSwitchHelper.res @@ -47,6 +47,9 @@ 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" @@ -54,14 +57,14 @@ module ListBaseComp = { 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" : "" diff --git a/src/screens/OMPSwitch/OrgSwitch.res b/src/screens/OMPSwitch/OrgSwitch.res index b9b3ba966..e302953e6 100644 --- a/src/screens/OMPSwitch/OrgSwitch.res +++ b/src/screens/OMPSwitch/OrgSwitch.res @@ -5,6 +5,9 @@ module SwitchOrg = { let showPopUp = PopUpState.useShowPopUp() let internalSwitch = OMPSwitchHooks.useInternalSwitch() let (value, setValue) = React.useState(() => "") + let {globalUIConfig: {sidebarColor: {backgroundColor}}} = React.useContext( + ThemeProvider.themeContext, + ) let input = React.useMemo((): ReactFinalForm.fieldRenderPropsInput => { { @@ -53,7 +56,7 @@ module SwitchOrg = { customWidth="w-80" placeholder="Switch org" onKeyUp=handleKeyUp - customStyle="!text-grey-300 !placeholder-grey-200 placeholder: text-sm font-inter-style bg-secondary" + customStyle={`!text-grey-300 !placeholder-grey-200 placeholder: text-sm font-inter-style ${backgroundColor.sidebarSecondary}`} customDashboardClass="h-11 text-base font-normal shadow-jp-2-xs" /> } @@ -210,7 +213,9 @@ let make = () => { let (showAddOrgModal, setShowAddOrgModal) = React.useState(_ => false) let (arrow, setArrow) = React.useState(_ => false) let isTenantAdmin = roleId->HyperSwitchUtils.checkIsTenantAdmin - + let {globalUIConfig: {sidebarColor: {backgroundColor, secondaryTextColor}}} = React.useContext( + ThemeProvider.themeContext, + ) let getOrgList = async () => { try { let url = getURL(~entityName=USERS, ~userType=#LIST_ORG, ~methodType=Get) @@ -266,9 +271,9 @@ let make = () => { let customHRTagStyle = "border-t border-blue-830" let customPadding = "py-1 w-full" - let customStyle = "w-56 text-gray-200 bg-secondary dark:bg-black hover:bg-secondary hover:text-gray-100 !w-full" + let customStyle = `w-56 ${secondaryTextColor} ${backgroundColor.sidebarSecondary} dark:bg-black hover:text-gray-100 !w-full` - let customScrollStyle = "bg-secondary max-h-72 overflow-scroll px-1 pt-1" + let customScrollStyle = `${backgroundColor.sidebarSecondary} max-h-72 overflow-scroll px-1 pt-1` let dropdownContainerStyle = "min-w-[15rem] rounded" let showOrgDropdown = !(tenantUser && isTenantAdmin && orgList->Array.length >= 20) @@ -283,8 +288,8 @@ let make = () => { marginTop="mt-14" hideMultiSelectButtons=true addButton=false - customStyle="bg-secondary md:bg-secondary hover:!bg-black/10 rounded !w-full" - customSelectStyle="md:bg-secondary hover:!bg-black/10 rounded" + customStyle={`${backgroundColor.sidebarSecondary} hover:!bg-black/10 rounded !w-full`} + customSelectStyle={`${backgroundColor.sidebarSecondary} hover:!bg-black/10 rounded`} searchable=false baseComponent={ { onEditClick isDarkBg=true />} - baseComponentCustomStyle="border-blue-820 rounded bg-secondary rounded text-white" + baseComponentCustomStyle={`border-blue-820 rounded ${backgroundColor.sidebarSecondary} rounded text-white`} bottomComponent={ { customHRTagStyle /> } - optionClass="text-gray-200 text-fs-14" - selectClass="text-gray-200 text-fs-14" + optionClass={`${secondaryTextColor} text-fs-14`} + selectClass={`${secondaryTextColor} text-fs-14`} customDropdownOuterClass="!border-none !w-full" fullLength=true toggleChevronState diff --git a/src/screens/Sidebar/Sidebar.res b/src/screens/Sidebar/Sidebar.res index e3ab37355..8f8cd2f10 100644 --- a/src/screens/Sidebar/Sidebar.res +++ b/src/screens/Sidebar/Sidebar.res @@ -16,8 +16,11 @@ let getIconSize = buttonType => { module MenuOption = { @react.component let make = (~text=?, ~children=?, ~onClick=?) => { + let {globalUIConfig: {sidebarColor: {backgroundColor, secondaryTextColor}}} = React.useContext( + ThemeProvider.themeContext, + )