Skip to content

Commit 33d4f22

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #361 from Ajay-aot/feature/FWF-3992-custom-theme
Feature/fwf 3992 custom theme changes
2 parents c695726 + 292fd9c commit 33d4f22

File tree

18 files changed

+175
-143
lines changed

18 files changed

+175
-143
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const computedStyle = getComputedStyle(document.documentElement);
2-
const baseColor = computedStyle.getPropertyValue("--ff-base-600");
2+
const baseColor = computedStyle.getPropertyValue("--ff-primary");
33
const grayColor = computedStyle.getPropertyValue("--ff-gray-800");
44
export const ChevronIcon = ({
55
color = baseColor,

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

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,46 @@
11
import NavBar from "./Navbar";
22
import { BrowserRouter as Router } from "react-router-dom";
33
import Sidebar from "./sidenav/Sidebar";
4-
import React, { useState } from "react";
4+
import React, { useRef, useEffect, useState } from "react";
55
import "./Navbar.scss";
66
import HamburgerMenu from "./sidenav/hamburgerMenu";
7+
import { StyleServices } from "@formsflow/service";
78

89
export default function Root(props) {
9-
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");
10-
const [tenantName, setTenantName] = React.useState("nike");
10+
const customLogoPath = StyleServices?.getCSSVariable("--custom-logo-path");
11+
const customTitle = StyleServices?.getCSSVariable("--custom-title");
12+
const headerRef = useRef(null);
13+
const sidenavRef = useRef(null);
14+
const [sidenavHeight, setSidenavHeight] = useState("100%");
15+
const hasMultitenancyHeader = customLogoPath || customTitle;
16+
useEffect(() => {
17+
const headerHeight = headerRef.current?.offsetHeight || 0;
18+
const totalHeight = `calc(100% - ${headerHeight}px)`;
19+
setSidenavHeight(totalHeight);
20+
}, [ hasMultitenancyHeader ]);
21+
1122
return (
1223
<Router>
1324
{/* <NavBar props={props} /> */}
1425
<>
15-
{/* <div className="multitenancy-header">
16-
<img className="multitenancy-logo" src={tenantLogo} alt="custom logo" />
17-
<span className="multitenancy-app-name">{tenantName}</span>
18-
</div> */}
19-
<HamburgerMenu props={props} />
20-
<div className="main-sidenav">
21-
<Sidebar props={props} />
22-
</div>
26+
{hasMultitenancyHeader && (
27+
<div ref={headerRef} className="multitenancy-header">
28+
{customLogoPath && (
29+
<img
30+
className="multitenancy-logo"
31+
src={customLogoPath}
32+
alt="custom logo"
33+
/>
34+
)}
35+
{customTitle && (
36+
<span className="multitenancy-app-name">{customTitle}</span>
37+
)}
38+
</div>
39+
)}
40+
<HamburgerMenu props={props} />
41+
<div className="main-sidenav" ref={sidenavRef}>
42+
<Sidebar props={props} sidenavHeight={sidenavHeight}/>
43+
</div>
2344
</>
2445
</Router>
2546
);

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { ApplicationLogo } from "@formsflow/components";
3737
import { ProfileSettingsModal } from "./ProfileSettingsModal";
3838
import PropTypes from 'prop-types';
3939

40-
const Sidebar = React.memo(({ props }) => {
40+
const Sidebar = React.memo(({ props, sidenavHeight }) => {
4141
const [tenantLogo, setTenantLogo] = React.useState("");
4242
const [tenantName, setTenantName] = React.useState("");
4343
const [userDetail, setUserDetail] = React.useState({});
@@ -214,7 +214,7 @@ const Sidebar = React.memo(({ props }) => {
214214
}
215215

216216
return (
217-
<div className="sidenav">
217+
<div className="sidenav" style={{ height: sidenavHeight }}>
218218
<div className="logo-container">
219219
{/* <img
220220
className=""
@@ -391,7 +391,8 @@ const Sidebar = React.memo(({ props }) => {
391391
Sidebar.propTypes = {
392392
subscribe: PropTypes.func.isRequired,
393393
getKcInstance: PropTypes.func.isRequired,
394-
publish: PropTypes.func.isRequired
394+
publish: PropTypes.func.isRequired,
395+
sidenavHeight: PropTypes.func.isRequired,
395396
};
396397

397398
export default Sidebar;

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

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
position: fixed;
66
z-index: 1050;
77
left: 0;
8-
background-color: var(--ff-white);
8+
background-color: var(--navbar-bg-color);
99
display: flex;
1010
flex-direction: column;
1111
justify-content: space-between;
@@ -25,8 +25,8 @@
2525
}
2626

2727
.accordion-button {
28-
color: var(--ff-gray-800);
29-
background-color: var(--ff-white);
28+
color: var(--navbar-main-menu-active-font-color);
29+
background-color: var(--navbar-bg-color);
3030
gap: 0.5rem;
3131

3232
&:focus {
@@ -41,23 +41,23 @@
4141
}
4242

4343
&:hover {
44-
background-color: var(--ff-base-100);
44+
background-color: var(--navbar-menu-hover-bg-color);
4545
}
4646

4747
&:not(.collapsed) {
48-
color: var(--ff-gray-800);
49-
background-color: var(--ff-gray-100);
48+
color: var(--navbar-main-menu-active-font-color);
49+
background-color: var(--navbar-main-menu-active-bg-color);
5050
}
5151

5252
}
5353

5454
.accordion-body {
55-
color: var(--ff-gray-800);
55+
color: var(--navbar-main-menu-active-font-color);
5656
padding: 0;
5757
}
5858

5959
.accordion-item {
60-
background-color: var(--ff-white);
60+
background-color: var(--navbar-bg-color);
6161
border: none;
6262
font-size: var(--font-size-sm);
6363
font-weight: var(--font-size-sm);
@@ -75,21 +75,21 @@
7575
display: block;
7676
padding-block: var(--spacer-100);
7777
padding-inline: var(--spacer-250) var(--spacer-100);
78-
color: var(--ff-gray-800);
78+
color: var(--navbar-main-menu-active-font-color);
7979
text-decoration: none;
8080
text-align: left;
8181
width: 100%;
8282
cursor: pointer;
8383

8484
&:hover {
8585
text-decoration: none;
86-
color: var(--ff-gray-800);
87-
background-color: var(--ff-base-100);
86+
color: var(--navbar-main-menu-active-font-color);
87+
background-color: var(--navbar-menu-hover-bg-color);
8888
}
8989

9090
&.active {
91-
background-color: var(--ff-gray-800);
92-
color: var(--ff-white);
91+
background-color: var(--navbar-active-submenu-bg-color);
92+
color: var(--navbar-active-submenu-font-color);
9393
font-size: var(--font-size-sm);
9494
font-weight: var(--font-weight-xl);
9595
line-height: var(--text-line-height);
@@ -100,9 +100,9 @@
100100
.user-container {
101101
text-align: center;
102102
border-top: 0.031rem solid var(--ff-gray-600);
103-
103+
color : var(--navbar-main-menu-active-font-color);
104104
.username {
105-
color: var(--ff-gray-800);
105+
color: var(--navbar-main-menu-active-font-color);
106106
padding: var(--spacer-100);
107107
margin: 0;
108108
text-align: left;
@@ -122,19 +122,18 @@
122122
padding: var(--spacer-100) var(--spacer-150);
123123
border: none;
124124
cursor: pointer;
125-
color: var(--ff-gray-800);
125+
color: var(--navbar-main-menu-active-font-color);
126126

127127
&:hover {
128-
background-color: var(--ff-base-100);
128+
background-color: var(--navbar-menu-hover-bg-color);
129129
}
130130
}
131131

132132
.user-icon {
133133
width: 2rem;
134134
height: 2rem;
135135
border-radius: 6.25rem;
136-
background-color: var(--ff-gray-100);
137-
color: var(--ff-gray-800);
136+
background-color: var(--navbar-main-menu-active-bg-color);
138137
display: flex;
139138
align-items: center;
140139
justify-content: center;
@@ -147,9 +146,9 @@
147146
font-weight: var(--font-weight-sm);
148147
line-height: var(--text-line-height);
149148
letter-spacing: var(--text-space-xs);
149+
background-color: var(--navbar-bg-color) !important;
150150
margin: 0;
151151
cursor: pointer;
152-
background-color:var(--ff-white);
153152
border: none;
154153
margin-left: 0;
155154
:hover{
@@ -160,7 +159,7 @@
160159
.user-email {
161160
overflow: hidden;
162161
white-space: nowrap;
163-
color: var(--ff-gray-800);
162+
color: var(--navbar-main-menu-active-font-color);
164163
text-overflow: ellipsis;
165164
font-size: var(--font-size-xs);
166165
font-weight: var(--font-weight-xs);
@@ -184,8 +183,8 @@
184183
}
185184

186185
&.active .accordion-button {
187-
background-color: var(--ff-gray-800);
188-
color: var(--ff-white);
186+
background-color: var(--navbar-active-submenu-bg-color);
187+
color: var(--navbar-active-submenu-font-color);
189188
}
190189
}
191190
}
@@ -201,7 +200,7 @@
201200
.multitenancy-header {
202201
height: var(--client-nav);
203202
box-shadow: var(--shadow-lg);
204-
background-color: var(--ff-white);
203+
background-color: var(--navbar-bg-color);
205204
display: flex;
206205
align-items: center;
207206
justify-content: center;
@@ -216,11 +215,11 @@
216215
.multitenancy-app-name {
217216
font-size: var(--font-size-md);
218217
font-weight: var(--font-weight-lg);
219-
color: var(--ff-gray-800);
218+
color: var(--navbar-main-menu-active-font-color);
220219
}
221220

222221
.active-header .accordion-button {
223-
background-color: var(--ff-gray-100);
222+
background-color: var(--navbar-main-menu-active-bg-color);
224223
}
225224

226225

@@ -236,9 +235,4 @@
236235
}
237236
}
238237

239-
@media (min-width: 992px) {
240-
.sidenav {
241-
height: 100%;
242-
}
243-
}
244238

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ class StyleServices {
55
element: HTMLElement = document.documentElement
66
): string {
77
const value = getComputedStyle(element).getPropertyValue(variableName);
8-
return value.trim();
8+
return value === '" "' ? "" : value;
99
}
1010
}
1111

‎forms-flow-theme/scss/_aiAssistant.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// Variables for reused values
2+
$secondary: var(--ff-secondary);
13
.ai-modal {
24
.modal-dialog {
35
margin-top: 2.5vh !important;
@@ -86,7 +88,7 @@
8688
.ai-message-box {
8789
margin-right: var(--spacer-200);
8890
padding: var(--spacer-200);
89-
background: var(--ff-base-100) !important;
91+
background: $secondary !important;
9092
border-radius: var(--radius-0100);
9193
margin-top: var(--spacer-050);
9294
}
@@ -102,7 +104,7 @@
102104
.ai-response-loading {
103105
border-radius: var(--radius-0100);
104106
padding: var(--spacer-200);
105-
background: var(--ff-base-100) !important;
107+
background: $secondary !important;
106108
max-width: 0.938rem;
107109

108110
.loading-dots {

0 commit comments

Comments
 (0)