Merge pull request #530 from Ajay-aot/bugfix/FWF-4441-release-changes

FWF-4441-release custom theming changes to develop

Author: arun-s-aot

forms-flow-admin/src/components/users/users.scss

@@ -46,4 +46,7 @@
 
 .success {
     color: var(--color-success);
+}
+.popover{
+    font-family: var(--primary-font) !important;
 }

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

@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
 export default function Root(props) {
   const customLogoPath =  StyleServices?.getCSSVariable("--custom-logo-path");
   const customTitle = StyleServices?.getCSSVariable("--custom-title");
-  const customLogoAlignment =  StyleServices?.getCSSVariable("--custom-logo-horizontal-align");
+  const customLogoAlignment =  StyleServices?.getCSSVariable("--custom-logo-horizontal-align")?.toLowerCase();
   const logoAlignmentClass = useMemo(() => {
     switch (customLogoAlignment) {
       case "left":
@@ -39,6 +39,9 @@ export default function Root(props) {
   }, []);
 
   useEffect(() => {
+    if (hasMultitenancyHeader) {
+      StyleServices?.setCSSVariable("--client-nav", "3rem");
+    } 
     const headerHeight = headerRef.current?.offsetHeight || 0;
     const totalHeight = `calc(100% - ${headerHeight}px)`;
     setSidenavHeight(totalHeight);

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

@@ -81,7 +81,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
   const tenantKey = tenant?.tenantId;
   const formTenant = form?.tenantKey;
   const [showProfile, setShowProfile] = useState(false);
-  const hideLogo =  StyleServices?.getCSSVariable("--hide-formsflow-logo");
+  const hideLogo =  StyleServices?.getCSSVariable("--hide-formsflow-logo")?.toLowerCase();
   const { t } = useTranslation();
   const currentLocation = useLocation();
 

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

@@ -66,8 +66,12 @@
     margin-bottom: 0.5rem;
 
     &:first-of-type > .accordion-header .accordion-button {
-      border-top-left-radius: none;
-      border-top-right-radius: none;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+    &:last-of-type > .accordion-header .accordion-button.collapsed {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
     }
   }
 
@@ -210,7 +214,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/_forms.scss

@@ -253,6 +253,7 @@ select option:hover {
 
   &:focus {
     outline: 1px solid $primary;
+    box-shadow: none !important;
   }
 
   &::placeholder {
@@ -269,6 +270,7 @@ select option:hover {
     &:focus {
       outline: 1px solid $danger-color !important;
       border: 1px solid $danger-color !important;
+      box-shadow: none !important;
     }
   }
 
@@ -406,6 +408,19 @@ select option:hover {
       transform: translate(-50%, -50%) !important;
     }
   }
+  &:focus{
+    box-shadow: none !important;
+  }
+}
+
+.form-check-input[type="checkbox"] {
+  border-color: $primary !important;
+  &:checked{
+    background-color: $primary !important;
+  }
+  &:focus{
+    box-shadow: none !important;
+  }
 }
 
 .valiation-astrisk {
@@ -665,3 +680,16 @@ select option:hover {
   }
 }
 
+.btn-danger{
+  background-color: var(--default-danger-color) !important;
+}
+
+div.text-danger,
+p.text-danger,
+i.text-danger,
+span.text-danger,
+.btn-link.text-danger,
+.modal-title.text-danger {
+  color: var(--default-danger-color) !important;
+}
+

forms-flow-theme/scss/_theme.scss

@@ -83,6 +83,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --default-font-size: 1rem; 
   --default-font-color: #{$gray-dark};
   --navbar-width: 192px;
+  --custom-logo-height: 1.5rem;
 
   //no-code colors
   --no-code-success: #{$no-code-success};
@@ -140,7 +141,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --radius-lg: 1.59375rem; //25.5px
   --radius-modal: 1.5rem; //24px
   //custom
-  --client-nav: 3rem;
+  --client-nav: 0px;
   --header-close-btn: 4.625rem;
   --default-danger-color: #FF4242;
 }

forms-flow-theme/scss/_variables.scss

@@ -209,7 +209,7 @@ hr {
   background: $gray-light;
   margin-left: var(--navbar-width);
   margin-top: 0;
-  height: 100vh !important;
+  height: calc(100vh - var(--client-nav)) !important;
 }
 
 .min-container-height {

forms-flow-theme/scss/external/formio.scss

@@ -147,11 +147,9 @@ $gray-dark: var(--ff-gray-dark);
       }
     }
   }
-  .formio-component {
-    .formio-component-hidden{
-     padding-top: 0;
-    }
-  }
+  .formio-component-hidden{
+    padding-top: 0 !important;
+   }
 }
 
 .ace_scrollbar-h {