Merge pull request #512 from Ajay-aot/bugfix/FWF-4439-additional-changes

additional changes for custom theming

Author: arun-s-aot

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

@@ -42,6 +42,9 @@ export default function Root(props) {
     const headerHeight = headerRef.current?.offsetHeight || 0;
     const totalHeight = `calc(100% - ${headerHeight}px)`;
     setSidenavHeight(totalHeight);
+    if (hasMultitenancyHeader) {
+      StyleServices?.setCSSVariable("--client-nav", "3rem");
+    } 
   }, [ hasMultitenancyHeader ]); 
 
   return (

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

@@ -210,7 +210,7 @@
 }
 
 .multitenancy-logo {
-  height: 1.5rem;
+  height: var(--custom-logo-height) !important;
   margin-right: 0.5rem;
 }
 

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

@@ -7,6 +7,15 @@ class StyleServices {
     const value = getComputedStyle(element).getPropertyValue(variableName);
     return value === '" "' ? "" : value;
   }
+
+  // Set CSS variable utility
+  public static setCSSVariable(
+    variableName: string,
+    value: string,
+    element: HTMLElement = document.documentElement
+  ): void {
+    element.style.setProperty(variableName, value);
+  }
 }
 
 export default StyleServices;

forms-flow-theme/scss/_theme.scss

@@ -145,6 +145,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --default-font-size: 1rem; 
   --default-font-color: #{$gray-800};
   --navbar-width: 192px;
+  --custom-logo-height: 1.5rem;
   //font-style
   --default-font-family-url:" ";
   --default-font-family: "Roboto", sans-serif;
@@ -199,7 +200,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --radius-0150: 1.5rem;
   --radius-200: 2rem;
   //custom
-  --client-nav: 3rem;
+  --client-nav: 0px;
   --header-close-btn: 4.625rem;
   //custom danger 
   --default-danger-color: #dc3545;

forms-flow-theme/scss/_variables.scss

@@ -200,7 +200,7 @@ hr {
   background: var(--ff-main-bg);
   margin-left: var(--navbar-width);
   margin-top: 0;
-  height: 100vh !important;
+  height: calc(100vh - var(--client-nav)) !important;
 }
 
 .min-container-height {