From b7e7ffa0d95589c27a1ba5cc5e356432529c722e Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Tue, 3 Dec 2024 22:56:59 +0530 Subject: [PATCH 1/7] initial changes for custom theming --- forms-flow-nav/src/root.component.js | 32 +++++++++++----- forms-flow-nav/src/sidenav/Sidebar.scss | 50 ++++++++++++------------- forms-flow-theme/scss/_button.scss | 32 ++++++++-------- forms-flow-theme/scss/_card.scss | 6 +-- forms-flow-theme/scss/_forms.scss | 16 ++++---- forms-flow-theme/scss/_mixins.scss | 2 +- forms-flow-theme/scss/_modal.scss | 10 ++--- forms-flow-theme/scss/_theme.scss | 32 +++++++++------- forms-flow-theme/scss/_variables.scss | 2 +- forms-flow-theme/scss/fileUpload.scss | 2 +- forms-flow-theme/scss/historyModal.scss | 2 +- 11 files changed, 101 insertions(+), 85 deletions(-) diff --git a/forms-flow-nav/src/root.component.js b/forms-flow-nav/src/root.component.js index 3b09a245..9c3f68fc 100644 --- a/forms-flow-nav/src/root.component.js +++ b/forms-flow-nav/src/root.component.js @@ -6,20 +6,32 @@ import "./Navbar.scss"; import HamburgerMenu from "./sidenav/hamburgerMenu"; 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 = document.documentElement.style.getPropertyValue("--custom-logo-path"); + const customTitle = + document.documentElement.style.getPropertyValue("--custom-title"); + console.log(customLogoPath,customTitle,"test"); return ( {/* */} <> - {/*
- custom logo - {tenantName} -
*/} - -
- -
+ {(customLogoPath || customTitle) && ( +
+ {customLogoPath && ( + custom logo + )} + {customTitle && ( + {customTitle} + )} +
+ )} + +
+ +
); diff --git a/forms-flow-nav/src/sidenav/Sidebar.scss b/forms-flow-nav/src/sidenav/Sidebar.scss index 9f1d67fb..f5ff8c9a 100644 --- a/forms-flow-nav/src/sidenav/Sidebar.scss +++ b/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,7 +75,7 @@ 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%; @@ -83,13 +83,13 @@ &: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); @@ -102,7 +102,7 @@ border-top: 0.031rem solid var(--ff-gray-600); .username { - color: var(--ff-gray-800); + color: var(--navbar-main-menu-active-font-color); padding: var(--spacer-100); margin: 0; text-align: left; @@ -113,7 +113,7 @@ margin: 0; } &:hover { - background-color: var(--ff-base-100); + background-color: var(--navbar-menu-hover-bg-color); } } @@ -122,10 +122,10 @@ 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); } } @@ -134,7 +134,7 @@ height: 2rem; border-radius: 6.25rem; background-color: var(--ff-gray-100); - color: var(--ff-gray-800); + color: var(--default-font-color); display: flex; align-items: center; justify-content: center; @@ -154,7 +154,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); @@ -176,8 +176,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); } } } @@ -193,7 +193,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; @@ -208,11 +208,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); } @@ -230,7 +230,7 @@ @media (min-width: 992px) { .sidenav { - height: 100%; + height: calc(100% - var(--client-nav)); } } diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss index 67d827bc..b7c8503b 100644 --- a/forms-flow-theme/scss/_button.scss +++ b/forms-flow-theme/scss/_button.scss @@ -174,39 +174,39 @@ $btn-font-weight: bold; &.btn-primary, &.btn-success { - background-color: $base-600 !important; - border: 1px solid $base-600 !important; - + background-color: var(--primary-btn-bg-color) !important; + border: 1px solid var(--primary-btn-bg-color) !important; + color: var(--primary-btn-font-color) !important; &:focus { outline: none !important; } &:hover { - background-color: var(--ff-base-500) !important; + background-color: var(--primary-btn-hover-bg-color) !important; box-shadow: var(--shadow-md) !important; } &:active { - background-color: $white-color !important; - color: var(--ff-primary) !important; + background-color: var(--primary-btn-bg-color) !important; + color: var(--primary-btn-font-color) !important; border: 0.0625rem solid var(--ff-primary) !important; } &.btn:disabled { background-color: var(--ff-gray-300) !important; - color: $white-color !important; + color: var(--primary-btn-font-color) !important; border-color: var(--ff-gray-300) !important; } &+.dropdown-toggle+.dropdown-menu { - border-color: var(--ff-primary) !important; + border-color: var(--primary-btn-bg-color) !important; .dropdown-item { - color: var(--ff-primary) !important; + color: var(--primary-btn-bg-color) !important; &:hover { background-color: transparent !important; - color: var(--ff-primary) !important; + color: var(--primary-btn-bg-color) !important; } } } @@ -218,12 +218,12 @@ $btn-font-weight: bold; &.btn-secondary { border: none; - color: var(--ff-primary) !important; - background: var(--ff-base-100) !important; + color: var(--secondary-btn-font-color) !important; + background: var(--secondary-btn-bg-color) !important; line-height: var(--text-line-height) !important; &:hover { - background-color: var(--ff-base-200) !important; + background-color: var(--secondary-btn-hover-bg-color) !important; font-weight: var(--font-weight-xl) !important; } @@ -243,7 +243,7 @@ $btn-font-weight: bold; &:active { background-color: $white-color !important; - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; border: 0.0625rem solid var(--ff-gray-700) !important; } @@ -251,11 +251,11 @@ $btn-font-weight: bold; border: 0.0625rem solid var(--ff-gray-700) !important; .dropdown-item { - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; &:hover { background-color: transparent !important; - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; } } } diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss index 84773e93..b68d7ca0 100644 --- a/forms-flow-theme/scss/_card.scss +++ b/forms-flow-theme/scss/_card.scss @@ -12,7 +12,7 @@ align-items: center !important; gap: var(--spacer-100) !important; align-self: stretch; - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; font-size: var(--font-size-lg) !important; font-weight: var(--font-weight-xl) !important; line-height: var(--text-line-height) !important; @@ -198,13 +198,13 @@ .info-content { align-self: stretch; - color: var(--ff-gray-800); + color: var(--default-font-color); font-size: var(--font-size-xs); line-height: var(--text-line-height); } .preview-header-text { - color: var(--ff-gray-800); + color: var(--default-font-color); font-size: var(--font-size-lg); font-weight: var(--font-weight-xl); line-height: var(--text-line-height); diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss index d97d127c..e4fbbaca 100644 --- a/forms-flow-theme/scss/_forms.scss +++ b/forms-flow-theme/scss/_forms.scss @@ -134,7 +134,7 @@ select option:hover { &.has-value { border: 2px solid var(--ff-primary); background: var(--ff-white); - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; } &.is-searching { @@ -150,7 +150,7 @@ select option:hover { top: 50%; transform: translateY(-50%); cursor: pointer; - color: var(--ff-gray-800); + color: var(--default-font-color); padding: var(--spacer-050); &.loading { @@ -186,7 +186,7 @@ select option:hover { /* CustomTooltip */ .custom-tooltip .tooltip-inner { background-color: var(--ff-base-100); - color: var(--ff-gray-800); + color: var(--default-font-color); font-size: var(--font-size-xs); font-weight: var(--font-weight-sm); line-height: var(--text-line-height); @@ -231,8 +231,8 @@ select option:hover { } .custom-checkbox .form-check-label { - color: var(--ff-gray-800); - margin-left: var(--spacer-050); + color: var(--default-font-color); + margin-left: var(--default-font-color); margin-top: var(--spacer-025); font-size: var(--font-size-xs); font-weight: var(--font-weight-sm); @@ -243,7 +243,7 @@ select option:hover { //FormInput styles .form-control { - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; border-radius: var(--radius-0100) !important; border: 1px solid var(--ff-primary) !important; outline: none; @@ -319,7 +319,7 @@ select option:hover { } .custom-form-control-label { - color: var(--ff-gray-800); + color: var(--default-font-color); font-size: var(--font-size-xs); //14px font-weight: var(--font-weight-sm); line-height: var(--text-line-height); @@ -341,7 +341,7 @@ select option:hover { display: inline-flex !important; padding-block: var(--spacer-050) !important; padding-inline: var(--spacer-100) !important; - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; gap: var(--spacer-050) !important; background-color: var(--ff-base-100) !important; border: none !important; diff --git a/forms-flow-theme/scss/_mixins.scss b/forms-flow-theme/scss/_mixins.scss index fabe7b7d..0ea4d5ed 100644 --- a/forms-flow-theme/scss/_mixins.scss +++ b/forms-flow-theme/scss/_mixins.scss @@ -60,7 +60,7 @@ font-size: var(--font-size-sm); font-weight: var(--font-weight-sm); line-height: var(--text-line-height); - color: var(--ff-gray-800); + color: var(--default-font-color); } @mixin upload-status-styles($color) { diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss index 732d9c91..d792fd33 100644 --- a/forms-flow-theme/scss/_modal.scss +++ b/forms-flow-theme/scss/_modal.scss @@ -56,7 +56,7 @@ } .modal-content-heading { - color: var(--ff-base-600, #253DF4); + color: var(--ff-base-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-xl); line-height: var(--text-line-height); @@ -64,7 +64,7 @@ } .modal-content-text { - color: var(--ff-gray-800, #303436); + color: var(--default-font-color); font-size: var(--font-size-sm); font-weight: var(--font-weight-sm); line-height: var(--text-line-height); @@ -86,7 +86,7 @@ margin-left: 0 !important; padding: var(--spacer-200) 2.5rem !important; flex-shrink: 0; - color: var(--ff-gray-800, #303436); + color: var(--default-font-color); font-size: var(--spacer-150); font-weight: var(--font-weight-sm); line-height: normal; @@ -179,7 +179,7 @@ .choose-template-modal { .modal-title { - color: var(--ff-gray-800, #303436); + color: var(--default-font-color); } .modal-dialog { @@ -576,7 +576,7 @@ .content-body{ @extend .content-style; text-align: left; - color: var(--ff-gray-800); + color: var(--default-font-color); font-weight: var(--font-weight-sm); } .build-contents{ diff --git a/forms-flow-theme/scss/_theme.scss b/forms-flow-theme/scss/_theme.scss index f2cbd449..f42cf4bf 100644 --- a/forms-flow-theme/scss/_theme.scss +++ b/forms-flow-theme/scss/_theme.scss @@ -118,24 +118,28 @@ $custom-colors: ( $theme-colors: map-merge($theme-colors, $custom-colors); :root { - --appname-margin-left: 0px; - --appname-margin-right: 0px; - --appname-margin-top: 0px; - --appname-margin-bottom: 0px; - --navbar-items-font-size: 16px; - --navbar-items-font-weight: 400; - --navbar-items: #{$dark}; - --navbar-active: #{$primary}; - --navbar-app-name: #{$dark}; - --navbar-logo-width: 40px; + --navbar-active-submenu-bg-color: #{$gray-800}; + --navbar-active-submenu-font-color: #{$white}; + --navbar-menu-hover-bg-color: #{$base-100}; + --navbar-main-menu-active-bg-color: #{$gray-100}; + --navbar-main-menu-active-font-color: #{$gray-800}; + --navbar-bg-color: #{$white}; + --custom-logo-path: " "; + --custom-title: " "; + --primary-btn-font-color: #{$white}; + --primary-btn-bg-color: #{$base-600}; + --primary-btn-hover-bg-color: #{$base-500}; + --secondary-btn-font-color: #{$base-600}; + --secondary-btn-bg-color: #{$base-100}; + --secondary-btn-hover-bg-color: #{$base-200}; + --default-font-size: 1rem; + --default-font-color: #{$gray-800}; --navbar-width: 192px; - --navbar-logo-path: "./logo.svg"; - --navbar-background: #{$white}; //font-style --primary-font: "Roboto", sans-serif; //font-size --font-size-xs: 0.875rem; - --font-size-sm: 1rem; + --font-size-sm: var(--default-font-size); --font-size-md: 1.25rem; --font-size-lg: 1.5rem; --font-size-xl: 2rem; @@ -188,7 +192,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors); } body { - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; min-height: 100vh !important; font-family: var(--primary-font) !important; overflow: hidden; diff --git a/forms-flow-theme/scss/_variables.scss b/forms-flow-theme/scss/_variables.scss index d5f63abc..7541f214 100644 --- a/forms-flow-theme/scss/_variables.scss +++ b/forms-flow-theme/scss/_variables.scss @@ -136,7 +136,7 @@ div[disabled] { } .tooltiptext { - color: var(--ff-gray-800); + color: var(--default-font-color); } div.upload { diff --git a/forms-flow-theme/scss/fileUpload.scss b/forms-flow-theme/scss/fileUpload.scss index a5d436a3..61f35615 100644 --- a/forms-flow-theme/scss/fileUpload.scss +++ b/forms-flow-theme/scss/fileUpload.scss @@ -133,7 +133,7 @@ $font-size-xs: var(--font-size-xs); display: flex; justify-content: flex-start; width: 30%; - color: var(--ff-gray-800); + color: var(--default-font-color); font-size: 0.875rem; font-weight: var(--font-weight-lg); line-height: var(--text-line-height); diff --git a/forms-flow-theme/scss/historyModal.scss b/forms-flow-theme/scss/historyModal.scss index eac490fb..751218df 100644 --- a/forms-flow-theme/scss/historyModal.scss +++ b/forms-flow-theme/scss/historyModal.scss @@ -91,7 +91,7 @@ } .text-style{ - color: var(--ff-gray-800) !important; + color: var(--default-font-color) !important; font-size: var(--font-size-xs); } .content-headings { From 319840b09534e1ba927dc8f84b5cea8abe40c49e Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Wed, 4 Dec 2024 13:35:45 +0530 Subject: [PATCH 2/7] changes in navheight --- forms-flow-nav/src/root.component.js | 23 ++++++++++++++++------- forms-flow-nav/src/sidenav/Sidebar.jsx | 4 ++-- forms-flow-nav/src/sidenav/Sidebar.scss | 5 ----- forms-flow-theme/scss/_theme.scss | 1 + 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/forms-flow-nav/src/root.component.js b/forms-flow-nav/src/root.component.js index 9c3f68fc..073a9a9b 100644 --- a/forms-flow-nav/src/root.component.js +++ b/forms-flow-nav/src/root.component.js @@ -1,21 +1,30 @@ 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"; export default function Root(props) { const customLogoPath = document.documentElement.style.getPropertyValue("--custom-logo-path"); const customTitle = - document.documentElement.style.getPropertyValue("--custom-title"); - console.log(customLogoPath,customTitle,"test"); + document.documentElement.style.getPropertyValue("--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 ( {/* */} <> - {(customLogoPath || customTitle) && ( -
+ {hasMultitenancyHeader && ( +
{customLogoPath && ( )} -
- +
+
diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx index 56b240f0..9030f94f 100644 --- a/forms-flow-nav/src/sidenav/Sidebar.jsx +++ b/forms-flow-nav/src/sidenav/Sidebar.jsx @@ -36,7 +36,7 @@ import MenuComponent from "./MenuComponent"; import { ApplicationLogo } from "@formsflow/components"; 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({}); @@ -208,7 +208,7 @@ const Sidebar = React.memo(({ props }) => { } return ( -
+
{/* Date: Thu, 5 Dec 2024 11:27:11 +0530 Subject: [PATCH 3/7] primary and secondary changes --- .../src/components/SvgIcons/index.tsx | 2 +- forms-flow-theme/scss/_aiAssistant.scss | 6 ++-- forms-flow-theme/scss/_button.scss | 6 ++-- forms-flow-theme/scss/_card.scss | 7 ++-- forms-flow-theme/scss/_forms.scss | 23 ++++++------ forms-flow-theme/scss/_modal.scss | 35 ++++++++++--------- forms-flow-theme/scss/customTextArea.scss | 4 +-- forms-flow-theme/scss/external/formio.scss | 6 ++-- forms-flow-theme/scss/fileUpload.scss | 6 ++-- forms-flow-theme/scss/inputBox.scss | 12 +++---- 10 files changed, 59 insertions(+), 48 deletions(-) diff --git a/forms-flow-components/src/components/SvgIcons/index.tsx b/forms-flow-components/src/components/SvgIcons/index.tsx index 50c38907..9a0a2fde 100644 --- a/forms-flow-components/src/components/SvgIcons/index.tsx +++ b/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, diff --git a/forms-flow-theme/scss/_aiAssistant.scss b/forms-flow-theme/scss/_aiAssistant.scss index c66c8130..f1f71a0d 100644 --- a/forms-flow-theme/scss/_aiAssistant.scss +++ b/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 { diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss index b7c8503b..3149d868 100644 --- a/forms-flow-theme/scss/_button.scss +++ b/forms-flow-theme/scss/_button.scss @@ -1,6 +1,6 @@ @import '_mixins'; // Variables for reused values -$base-600: var(--ff-base-600); +$primary: var(--ff-primary); $black-color: var(--ff-black); $white-color: var(--ff-white); $gray-000: var(--ff-gray-000); @@ -454,7 +454,7 @@ $btn-font-weight: bold; display: flex; justify-content: space-between; align-items: center; - color: $base-600 !important; + color: $primary !important; // .dropdown-toggle { // color: $base-600 !important; @@ -485,7 +485,7 @@ $btn-font-weight: bold; } .dropdown-toggle { - color: $base-600 !important; + color: $primary !important; &::after { display: inline-block !important; diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss index b68d7ca0..3d74568e 100644 --- a/forms-flow-theme/scss/_card.scss +++ b/forms-flow-theme/scss/_card.scss @@ -1,3 +1,6 @@ +// Variables for reused values +$primary: var(--ff-primary); + .wraper { .card { border-radius: var(--radius-0150) !important; @@ -69,7 +72,7 @@ } .form-flow-wraper-right { - color: var(--ff-base-600); + color: $primary; font-size: var(--font-size-lg); font-weight: var(--font-weight-xl); padding-bottom: var(--spacer-200) !important; @@ -113,7 +116,7 @@ .form-flow-wraper-left { margin-right: -1.5rem; - color: var(--ff-base-600); + color: $primary; width: 6.25rem; font-size: var(--font-size-lg); overflow: hidden; diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss index e4fbbaca..61bf3d69 100644 --- a/forms-flow-theme/scss/_forms.scss +++ b/forms-flow-theme/scss/_forms.scss @@ -1,4 +1,7 @@ @import '_mixins'; +// Variables for reused values +$primary: var(--ff-primary); +$secondary: var(--ff-secondary); .forms-text { vertical-align: bottom; @@ -185,7 +188,7 @@ select option:hover { /* CustomTooltip */ .custom-tooltip .tooltip-inner { - background-color: var(--ff-base-100); + background-color: $secondary; color: var(--default-font-color); font-size: var(--font-size-xs); font-weight: var(--font-weight-sm); @@ -196,7 +199,7 @@ select option:hover { } .custom-tooltip .tooltip-arrow::before { - border-color: var(--ff-base-100) transparent transparent transparent !important; + border-color: $secondary transparent transparent transparent !important; } /* Custom Form.Check */ @@ -204,7 +207,7 @@ select option:hover { width: 1.25em; height: 1.25em; border-radius: var(--radius-025); - border: 2px solid var(--ff-base-600) !important; + border: 2px solid $primary !important; background-color: transparent; position: relative; @@ -214,7 +217,7 @@ select option:hover { &:checked { background-color: var(--ff-white) !important; - border-color: var(--ff-base-600) !important; + border-color: $primary !important; &:after { content: ''; @@ -223,7 +226,7 @@ select option:hover { left: 0.35em; width: 0.35em; height: 0.7em; - border: solid var(--ff-base-600); + border: solid $primary; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); } @@ -343,7 +346,7 @@ select option:hover { padding-inline: var(--spacer-100) !important; color: var(--default-font-color) !important; gap: var(--spacer-050) !important; - background-color: var(--ff-base-100) !important; + background-color: $secondary !important; border: none !important; align-items: center !important; font-size: var(--font-size-sm) !important; @@ -381,13 +384,13 @@ select option:hover { /* ------------------------- Radio Button Style ------------------------ */ .form-check-input[type="radio"] { - border-color: var(--ff-base-600) !important; + border-color: $primary !important; position: relative; &:checked { --bs-form-check-bg-image: none !important; background-color: var(--ff-white) !important; - border-color: var(--ff-base-600) !important; + border-color: $primary !important; &::before { content: "" !important; @@ -398,7 +401,7 @@ select option:hover { /* Center horizontally */ width: 67% !important; height: 70% !important; - background-color: var(--ff-base-600) !important; + background-color: $primary !important; border-radius: 50% !important; transform: translate(-50%, -50%) !important; } @@ -406,7 +409,7 @@ select option:hover { } .valiation-astrisk { - color: var(--ff-base-600); + color: $primary; } //for not allowing for edit in preview .form-preview{ diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss index d792fd33..eaa706e0 100644 --- a/forms-flow-theme/scss/_modal.scss +++ b/forms-flow-theme/scss/_modal.scss @@ -1,4 +1,7 @@ @import '_mixins'; +// Variables for reused values +$primary: var(--ff-primary); +$secondary: var(--ff-secondary); .modal { .modal-dialog { @@ -56,7 +59,7 @@ } .modal-content-heading { - color: var(--ff-base-600); + color: $primary; font-size: var(--font-size-sm); font-weight: var(--font-weight-xl); line-height: var(--text-line-height); @@ -271,7 +274,7 @@ .active-template { border-bottom: 1px solid var(--ff-gray-000); - background: var(--ff-base-100); + background: $secondary; max-height: none !important; .template-desc { @@ -395,7 +398,7 @@ align-items: center; align-self: stretch; border-radius: var(--radius-0100); - border: 1px solid var(--ff-base-600); + border: 1px solid $primary; padding: 0.5rem 1rem; .url-non-edit { @@ -483,7 +486,7 @@ align-self: stretch; .form-check-input { - border-color: var(--ff-base-600); + border-color: $primary; } } @@ -508,7 +511,7 @@ //reusable multi-select .multi-select{ .list-group { - border: 1px solid var(--ff-base-600); + border: 1px solid $primary; border-radius: var(--radius-0100); .list-group-item { @@ -520,7 +523,7 @@ z-index: 100; overflow: auto; border-radius: var(--radius-0100); - border-bottom: 1px solid var(--ff-base-600); + border-bottom: 1px solid $primary; } .input-with-pills { @@ -529,7 +532,7 @@ flex-wrap: wrap !important; align-items: center; padding: var(--spacer-050) var(--spacer-100); - border: 1px solid var(--ff-base-600) !important; + border: 1px solid $primary !important; border-radius: var(--radius-0100) !important; position: relative; gap: 5px !important; @@ -570,7 +573,7 @@ } .content-heading{ @extend .content-style; - color: var(--ff-base-600); + color: $primary; font-weight: var(--font-weight-xl); } .content-body{ @@ -606,7 +609,7 @@ } .expression-list-group .form-variable:hover { - background: var(--ff-base-100); + background: $secondary; .variable-label { color: var(--ff-primary) !important; @@ -618,7 +621,7 @@ } } .expression-list-group .form-variable.selected-variable { - background: var(--ff-base-600); + background: $primary; } .expression-list-group .variable-label { @@ -640,7 +643,7 @@ align-items: flex-start; gap: var(--spacer-050); border-radius: var(--radius-0100); - border: 1px solid var(--ff-base-600); + border: 1px solid $primary; margin-top: 0.5rem; flex-wrap: wrap; } @@ -697,7 +700,7 @@ } .operator-list:hover { - background-color: var(--ff-base-100) !important; + background-color: $secondary !important; } .key-label { @@ -709,11 +712,11 @@ } .key-label:hover { - background: var(--ff-base-100); + background: $secondary; } .selected-variable { - background-color: var(--ff-base-600); + background-color: $primary; } .expression-text { @@ -772,7 +775,7 @@ padding-block: 1rem; gap: var(--spacer-050); .badge-pill { - background-color: var(--ff-base-600) !important; + background-color: $primary !important; color: var(--ff-white) !important; } } @@ -780,7 +783,7 @@ .operator { .badge-pill { - background-color: var(--ff-base-600) !important; + background-color: $primary !important; color: var(--ff-white) !important; } } diff --git a/forms-flow-theme/scss/customTextArea.scss b/forms-flow-theme/scss/customTextArea.scss index f6a61b84..51d8ce1f 100644 --- a/forms-flow-theme/scss/customTextArea.scss +++ b/forms-flow-theme/scss/customTextArea.scss @@ -1,6 +1,6 @@ $form-textArea-border-radius: var(--radius-0100); -$form-textArea-border-color: var(--ff-base-600); -$form-textArea-focus-outline: 2px solid var(--ff-base-600); +$form-textArea-border-color: var(--ff-primary); +$form-textArea-focus-outline: 2px solid var(--ff-primary); .custom-textarea { overflow-y: auto; -ms-overflow-style: none; diff --git a/forms-flow-theme/scss/external/formio.scss b/forms-flow-theme/scss/external/formio.scss index 004ecf02..fd9eda59 100644 --- a/forms-flow-theme/scss/external/formio.scss +++ b/forms-flow-theme/scss/external/formio.scss @@ -1,5 +1,5 @@ // Variables for reused values -$base-100: var(--ff-base-100); +$secondary: var(--ff-secondary); $primary: var(--ff-primary); .btn-group-xxs>.btn, .btn-xxs, .component-btn-group .component-settings-button{ @@ -48,7 +48,7 @@ $primary: var(--ff-primary); .formio-hilighted{ box-sizing: border-box; border-radius: var(--radius-050); - border: 2px dashed var(--ff-base-600); + border: 2px dashed $primary; padding: 8px 10px; //TBD need to update } // Adjust the hover transition on the component in the TaskVariable UI to prevent size change glitches @@ -72,7 +72,7 @@ $primary: var(--ff-primary); .formio-component{ .bg-default { - background: $base-100 !important; + background: $secondary !important; .card-title{ color: $primary !important; } diff --git a/forms-flow-theme/scss/fileUpload.scss b/forms-flow-theme/scss/fileUpload.scss index 61f35615..ad3d442d 100644 --- a/forms-flow-theme/scss/fileUpload.scss +++ b/forms-flow-theme/scss/fileUpload.scss @@ -1,4 +1,4 @@ -$base-600: var(--ff-base-600); +$primary: var(--ff-primary); $ff-white: var(--ff-white); $gray-800: var(--ff-gray-800); $gray-400: var(--ff-gray-400); @@ -11,7 +11,7 @@ $font-size-xs: var(--font-size-xs); align-items: center; width: 100%; min-height: 10.125rem; - border: 0.09375rem dashed $base-600; + border: 0.09375rem dashed $primary; border-radius: var(--radius-0100); background-color: $ff-white; cursor: pointer; @@ -99,7 +99,7 @@ $font-size-xs: var(--font-size-xs); } .upload-status-success { - @include upload-status-styles($base-600); + @include upload-status-styles($primary); } .upload-status-error { diff --git a/forms-flow-theme/scss/inputBox.scss b/forms-flow-theme/scss/inputBox.scss index f45795a3..904776aa 100644 --- a/forms-flow-theme/scss/inputBox.scss +++ b/forms-flow-theme/scss/inputBox.scss @@ -1,6 +1,6 @@ $form-input-border-radius: var(--radius-0150); -$base-600: var(--ff-base-600); -$form-input-focus-outline: 2px solid var(--ff-base-600); +$primary: var(--ff-primary); +$form-input-focus-outline: 2px solid var(--ff-primary); $red-000: var(--ff-red-000); $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); @@ -9,7 +9,7 @@ $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); height: var(--spacer-200); flex-shrink: 0; border-radius: $form-input-border-radius; - border: 1px solid $base-600; + border: 1px solid $primary; background: var(--ff-white); margin-bottom: 10px; padding: var(--spacer-050); @@ -45,7 +45,7 @@ $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); } .validation-astrisk { - color: $base-600; + color: $primary; } .input-dropdown { @@ -73,7 +73,7 @@ $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); padding: var(--spacer-050) 0px; flex-direction: column; align-self: stretch; - border: 1px solid var(--ff-base-600); + border: 1px solid $primary; border-top: none; border-radius: 0px 0px var(--radius-0100) var(--radius-0100); max-height: 12.5rem; @@ -92,7 +92,7 @@ $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); gap: var(--spacer-050); cursor: pointer; border: none; - color: var(--ff-base-600); + color: $primary; font-size: var(--font-size-sm); font-weight: var(--font-weight-sm); line-height: var(--text-line-height); From 3bef3ea20e9040231828da8a8b3a088080c25f97 Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Thu, 5 Dec 2024 13:35:08 +0530 Subject: [PATCH 4/7] updates --- forms-flow-nav/src/sidenav/Sidebar.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/forms-flow-nav/src/sidenav/Sidebar.scss b/forms-flow-nav/src/sidenav/Sidebar.scss index 7b2041ba..80d1cdb0 100644 --- a/forms-flow-nav/src/sidenav/Sidebar.scss +++ b/forms-flow-nav/src/sidenav/Sidebar.scss @@ -100,7 +100,7 @@ .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(--navbar-main-menu-active-font-color); padding: var(--spacer-100); @@ -133,8 +133,7 @@ width: 2rem; height: 2rem; border-radius: 6.25rem; - background-color: var(--ff-gray-100); - color: var(--default-font-color); + 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{ From 9e9c9f36e52de715c90de59267a083ad2fdb5895 Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Thu, 5 Dec 2024 15:17:57 +0530 Subject: [PATCH 5/7] proptype added --- forms-flow-nav/src/sidenav/Sidebar.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx index dafcd4b6..22b9c4e9 100644 --- a/forms-flow-nav/src/sidenav/Sidebar.jsx +++ b/forms-flow-nav/src/sidenav/Sidebar.jsx @@ -391,7 +391,8 @@ const Sidebar = React.memo(({ props, sidenavHeight }) => { 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; From c8bb794d28b9e60924f08e1cc99bb74a825e5617 Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Fri, 6 Dec 2024 15:05:57 +0530 Subject: [PATCH 6/7] css variable fetching utility added --- forms-flow-nav/src/root.component.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/forms-flow-nav/src/root.component.js b/forms-flow-nav/src/root.component.js index 073a9a9b..e621b201 100644 --- a/forms-flow-nav/src/root.component.js +++ b/forms-flow-nav/src/root.component.js @@ -4,11 +4,11 @@ import Sidebar from "./sidenav/Sidebar"; 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 customLogoPath = document.documentElement.style.getPropertyValue("--custom-logo-path"); - const customTitle = - document.documentElement.style.getPropertyValue("--custom-title"); + 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%"); From 292fd9c009d27b6728b85cf3cb9808f12d782e3a Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Fri, 6 Dec 2024 18:14:21 +0530 Subject: [PATCH 7/7] update in getCssvariable utility --- forms-flow-service/src/helpers/styleService.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/forms-flow-service/src/helpers/styleService.ts b/forms-flow-service/src/helpers/styleService.ts index 433a617d..48cf5efe 100644 --- a/forms-flow-service/src/helpers/styleService.ts +++ b/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; } }