Feature/fwf 3992 custom theme changes

forms-flow-components/src/components/SvgIcons/index.tsx

@@ -1,5 +1,5 @@
 const computedStyle = getComputedStyle(document.documentElement);
-const baseColor = computedStyle.getPropertyValue("--ff-base-600");
+const baseColor = computedStyle.getPropertyValue("--ff-primary");
 const grayColor = computedStyle.getPropertyValue("--ff-gray-800");
 export const ChevronIcon = ({
   color = baseColor,

forms-flow-nav/src/root.component.js

@@ -1,25 +1,46 @@
 import NavBar from "./Navbar";
 import { BrowserRouter as Router } from "react-router-dom";
 import Sidebar from "./sidenav/Sidebar";
-import React, { useState } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import "./Navbar.scss";
 import HamburgerMenu from "./sidenav/hamburgerMenu";
+import { StyleServices } from "@formsflow/service";
 
 export default function Root(props) {
-  const [tenantLogo, setTenantLogo] = React.useState("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAeFBMVEX///8BAQH8/Pz5+fnIyMjExMTn5+f19fXW1tbw8PChoaGxsbHX19fq6uqVlZWamprPz8/d3d2qqqpsbGyOjo69vb1nZ2d3d3cvLy8lJSVjY2M3NzdUVFSFhYV+fn48PDxERERMTEwoKCgeHh4MDAwWFhZDQ0NaWlpI396UAAAE9UlEQVR4nO3dDWKiMBAF4I0iCigiora12rqt7f1vuCtqa5SfJMyEoO87QJIGEoc82P3zBwAAAAAAAAAAAAAAAAAAAAAAAAAAwEyv7QF0yKDtAXRI6Lc9An5jor9xsaVpx1l+uEqHNE2NBE07bhouVuLdo2rNFylVU87xsichNhOy9gJxpzfWeLoTQjxHhE329vd4Y/npizh4SUibXd/djRX836SOsoC25VchQtoWW9UfbJ5PM/VEuf5yh2twN8V7En+Js+WIvPn4f7P3UWPNwm/xKyZefwfRoeHuF++TaH4xUWK94OhkdGj6i6Nle4aL7f5ypsR8zNLPJG+cfBu0yMvWQhYTPdRc633mzXd1ex+Hu6uJEm8s6y93/OV4YWuf0bnklNffjK/D057IdzGY/JackinT+suFp046tQp73uZv0Ux98V7y5NTNK2svpJL4vWiihFgxrr+D4NxRRx515JJTEva5Oz8/PwmeooRUIJeckncL2cHypzf+vhrpD65KTqvrL5f+XhkLvRlLsrfyiRKf/OvvYPbbo7MP0bPwtWKihNjZyu4u+nTyjNSPlqWTdLrG1h7+L39XyEIPKsPikvPSPrVXG6aXHTt1PNPzssKSU/Jq8/pOpK45nxH0jPIops7G7tV9kjq32nUpPy0tOS992N5hY7l/y70XCKLaTero2/r+Orsage3+Zf3B5kNtpihDZWXXG6j9EfxI4qqSU0IaKiubXg+jpQOaupJTQhwqqwpuBsKQGNXxK56LC1CHyspuLyd9EllpuNh+6swUfaisbHA7GouD6eVv/+hgCJXVFRx2bCx1PVYqOSUcobK6sGBEawv9FkYxNdYtp5m9wlExXz7lklPS6vrLZYXjYnyC0Cg5JVyhss7Qi0fGtQ41Sk55PE7kmJuS0THc8Volp4TppQ5dJTeWEDvafiZ6JaeENVTWEZcOke5hXrfklDCHyloqhknTgXbJKbESaqmKKgba/D0atVPOclMroZayyqs+bdKySckpsREqa7k+87tiWi5XBeuKti6tv6NtzZANSlPTkvOSpVBZU+2wNR+ok5t3OQ1YC5X1FJzNXPtSfkg0Lzkl9kJlTUo7i8o276d1wbqafejuC4eKf0L1CVLJu5wGrIbKupL68Z/s0sLFEXhh45+9H5ZDZV3FhzNlvrPIm02Cfn8Y+GMvilclb3IasR4qazM7LGHw3U6opaP4iNS+NkJlbepbFqNn59ffUVFQYVkH1t8J1S++sdZCZQPt7u9/u/WJXptT1X6opaf09J1fl9bfkd/STLX4Uoe5moM/JvOOrb8Tr4WpciBUNqNwmEWL8UtldpbvLM4vlflZ3bOcCZUNTer/RCIuhcqmLE2VU6GyMfP3DzQ4GWoZaJgYK3A01DJx86UAsZXbh+p6Rpwz9elwqGWEb6ruaP2d1b3pYMrZULkJlrLU5pfKVu3Ip8rpULkZ6i3e8VC5IaVPkBW5Hyo3NCSbqu6EWuYWNFOVdSFUbo4gPOzkobqZpq/rdfRQ3VCTN4f2YccP9bTtjG+qB9jUbxi9vfce3WmlXietnxvZU/gYP3+FJjuNmXp7hP+Mp9Kg/l+oyi2jzr2nwMGrLSJ204cqE6oFt//e9dnHPHXjy1uX9JLpXP6sbr3MotGdRDQs+v448bxkPAsetDwAAAAAAAAAAAAAAAAAAAAAAAAAAAD4B/UcPRFXugBuAAAAAElFTkSuQmCC");
-  const [tenantName, setTenantName] = React.useState("nike");
+  const customLogoPath =  StyleServices?.getCSSVariable("--custom-logo-path");
+  const customTitle = StyleServices?.getCSSVariable("--custom-title");
+  const headerRef = useRef(null); 
+  const sidenavRef = useRef(null); 
+  const [sidenavHeight, setSidenavHeight] = useState("100%");
+  const hasMultitenancyHeader = customLogoPath || customTitle;
+  useEffect(() => {
+    const headerHeight = headerRef.current?.offsetHeight || 0;
+    const totalHeight = `calc(100% - ${headerHeight}px)`;
+    setSidenavHeight(totalHeight);
+  }, [ hasMultitenancyHeader ]); 
+
   return (
     <Router>
       {/* <NavBar props={props} /> */}
       <>
-      {/* <div className="multitenancy-header">
-        <img className="multitenancy-logo" src={tenantLogo} alt="custom logo" />
-        <span className="multitenancy-app-name">{tenantName}</span>
-      </div> */}
-      <HamburgerMenu props={props} />
-      <div className="main-sidenav">
-        <Sidebar props={props} />
-      </div>
+      {hasMultitenancyHeader && (
+          <div ref={headerRef} className="multitenancy-header">
+            {customLogoPath && (
+              <img
+                className="multitenancy-logo"
+                src={customLogoPath}
+                alt="custom logo"
+              />
+            )}
+            {customTitle && (
+              <span className="multitenancy-app-name">{customTitle}</span>
+            )}
+          </div>
+        )}
+        <HamburgerMenu props={props} />
+        <div className="main-sidenav" ref={sidenavRef}>
+          <Sidebar props={props} sidenavHeight={sidenavHeight}/>
+        </div>
       </>
     </Router>
   );

forms-flow-nav/src/sidenav/Sidebar.jsx

@@ -37,7 +37,7 @@ import { ApplicationLogo } from "@formsflow/components";
 import { ProfileSettingsModal } from "./ProfileSettingsModal";
 import PropTypes from 'prop-types';
 
-const Sidebar = React.memo(({ props }) => {
+const Sidebar = React.memo(({ props, sidenavHeight }) => {
   const [tenantLogo, setTenantLogo] = React.useState("");
   const [tenantName, setTenantName] = React.useState("");
   const [userDetail, setUserDetail] = React.useState({});
@@ -214,7 +214,7 @@ const Sidebar = React.memo(({ props }) => {
   }
 
   return (
-      <div className="sidenav">
+      <div className="sidenav" style={{ height: sidenavHeight }}>
         <div className="logo-container">
           {/* <img
             className=""
@@ -391,7 +391,8 @@ const Sidebar = React.memo(({ props }) => {
 Sidebar.propTypes = {
     subscribe: PropTypes.func.isRequired, 
     getKcInstance: PropTypes.func.isRequired,
-    publish: PropTypes.func.isRequired
+    publish: PropTypes.func.isRequired,
+    sidenavHeight: PropTypes.func.isRequired, 
 };
 
 export default Sidebar;

forms-flow-nav/src/sidenav/Sidebar.scss

@@ -5,7 +5,7 @@
   position: fixed;
   z-index: 1050;
   left: 0;
-  background-color: var(--ff-white);
+  background-color: var(--navbar-bg-color);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -25,8 +25,8 @@
   }
 
   .accordion-button {
-    color: var(--ff-gray-800);
-    background-color: var(--ff-white);
+    color: var(--navbar-main-menu-active-font-color);
+    background-color: var(--navbar-bg-color);
     gap: 0.5rem;
 
     &:focus {
@@ -41,23 +41,23 @@
     }
 
     &:hover {
-      background-color: var(--ff-base-100);
+      background-color: var(--navbar-menu-hover-bg-color);
     }
 
     &:not(.collapsed) {
-      color: var(--ff-gray-800);
-      background-color: var(--ff-gray-100);
+      color: var(--navbar-main-menu-active-font-color);
+      background-color: var(--navbar-main-menu-active-bg-color);
     }
 
   }
 
   .accordion-body {
-    color: var(--ff-gray-800);
+    color: var(--navbar-main-menu-active-font-color);
     padding: 0;
   }
 
   .accordion-item {
-    background-color: var(--ff-white);
+    background-color: var(--navbar-bg-color);
     border: none;
     font-size: var(--font-size-sm);
     font-weight: var(--font-size-sm);
@@ -75,21 +75,21 @@
     display: block;
     padding-block: var(--spacer-100);
     padding-inline: var(--spacer-250) var(--spacer-100);
-    color: var(--ff-gray-800);
+    color: var(--navbar-main-menu-active-font-color);
     text-decoration: none;
     text-align: left;
     width: 100%;
     cursor: pointer;
 
     &:hover {
       text-decoration: none;
-      color: var(--ff-gray-800);
-      background-color: var(--ff-base-100);
+      color: var(--navbar-main-menu-active-font-color);
+      background-color: var(--navbar-menu-hover-bg-color);
     }
 
     &.active {
-      background-color: var(--ff-gray-800);
-      color: var(--ff-white);
+      background-color: var(--navbar-active-submenu-bg-color);
+      color: var(--navbar-active-submenu-font-color);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-xl);
       line-height: var(--text-line-height);
@@ -100,9 +100,9 @@
   .user-container {
     text-align: center;
     border-top: 0.031rem solid var(--ff-gray-600);
-
+    color : var(--navbar-main-menu-active-font-color);
     .username {
-      color: var(--ff-gray-800);
+      color: var(--navbar-main-menu-active-font-color);
       padding: var(--spacer-100);
       margin: 0;
       text-align: left;
@@ -122,19 +122,18 @@
       padding: var(--spacer-100) var(--spacer-150);
       border: none;
       cursor: pointer;
-      color: var(--ff-gray-800);
+      color: var(--navbar-main-menu-active-font-color);
 
       &:hover {
-        background-color: var(--ff-base-100);
+        background-color: var(--navbar-menu-hover-bg-color);
       }
     }
 
     .user-icon {
       width: 2rem;
       height: 2rem;
       border-radius: 6.25rem;
-      background-color: var(--ff-gray-100);
-      color: var(--ff-gray-800);
+      background-color: var(--navbar-main-menu-active-bg-color);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -147,9 +146,9 @@
       font-weight: var(--font-weight-sm);
       line-height: var(--text-line-height);
       letter-spacing: var(--text-space-xs);
+      background-color: var(--navbar-bg-color) !important;
       margin: 0;
       cursor: pointer;
-      background-color:var(--ff-white);
       border: none;
       margin-left: 0;
       :hover{
@@ -160,7 +159,7 @@
     .user-email {
       overflow: hidden;
       white-space: nowrap;
-      color: var(--ff-gray-800);
+      color: var(--navbar-main-menu-active-font-color);
       text-overflow: ellipsis;
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-xs);
@@ -184,8 +183,8 @@
     }
 
     &.active .accordion-button {
-      background-color: var(--ff-gray-800);
-      color: var(--ff-white);
+      background-color: var(--navbar-active-submenu-bg-color);
+      color: var(--navbar-active-submenu-font-color);
     }
   }
 }
@@ -201,7 +200,7 @@
 .multitenancy-header {
   height: var(--client-nav);
   box-shadow: var(--shadow-lg);
-  background-color: var(--ff-white);
+  background-color: var(--navbar-bg-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -216,11 +215,11 @@
 .multitenancy-app-name {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-lg);
-  color: var(--ff-gray-800);
+  color: var(--navbar-main-menu-active-font-color);
 }
 
 .active-header .accordion-button {
-  background-color: var(--ff-gray-100);
+  background-color: var(--navbar-main-menu-active-bg-color);
 }
 
 
@@ -236,9 +235,4 @@
   }
 }
 
-@media (min-width: 992px) {
-  .sidenav {
-    height: 100%;
-  }
-}
 

forms-flow-service/src/helpers/styleService.ts

@@ -5,7 +5,7 @@ class StyleServices {
     element: HTMLElement = document.documentElement
   ): string {
     const value = getComputedStyle(element).getPropertyValue(variableName);
-    return value.trim();
+    return value === '" "' ? "" : value;
   }
 }
 

forms-flow-theme/scss/_aiAssistant.scss

@@ -1,3 +1,5 @@
+// Variables for reused values
+$secondary: var(--ff-secondary);
 .ai-modal {
   .modal-dialog {
     margin-top: 2.5vh !important;
@@ -86,7 +88,7 @@
         .ai-message-box {
           margin-right: var(--spacer-200);
           padding: var(--spacer-200);
-          background: var(--ff-base-100) !important;
+          background: $secondary !important;
           border-radius: var(--radius-0100);
           margin-top: var(--spacer-050);
         }
@@ -102,7 +104,7 @@
         .ai-response-loading {
           border-radius: var(--radius-0100);
           padding: var(--spacer-200);
-          background: var(--ff-base-100) !important;
+          background: $secondary !important;
           max-width: 0.938rem;
 
           .loading-dots {