Skip to content

Commit 3acfab8

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #471 from Ajay-aot/bugfix/FWF-4349-custom-theming-updates
changes for custom theming updation
2 parents cc0cbd6 + 53a5f0d commit 3acfab8

File tree

6 files changed

+152
-55
lines changed

6 files changed

+152
-55
lines changed

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import NavBar from "./Navbar";
22
import { BrowserRouter as Router } from "react-router-dom";
33
import Sidebar from "./sidenav/Sidebar";
4-
import React, { useRef, useEffect, useState } from "react";
4+
import React, { useRef, useEffect, useState, useMemo } from "react";
55
import "./Navbar.scss";
66
import HamburgerMenu from "./sidenav/hamburgerMenu";
77
import { StyleServices ,HelperServices } from "@formsflow/service";
@@ -10,6 +10,17 @@ import PropTypes from "prop-types";
1010
export default function Root(props) {
1111
const customLogoPath = StyleServices?.getCSSVariable("--custom-logo-path");
1212
const customTitle = StyleServices?.getCSSVariable("--custom-title");
13+
const customLogoAlignment = StyleServices?.getCSSVariable("--custom-logo-horizontal-align");
14+
const logoAlignmentClass = useMemo(() => {
15+
switch (customLogoAlignment) {
16+
case "left":
17+
return "justify-content-start";
18+
case "right":
19+
return "justify-content-end";
20+
default:
21+
return "justify-content-center";
22+
}
23+
}, [customLogoAlignment]);
1324
const headerRef = useRef(null);
1425
const sidenavRef = useRef(null);
1526
const [sidenavHeight, setSidenavHeight] = useState("100%");
@@ -38,7 +49,7 @@ export default function Root(props) {
3849
{/* <NavBar props={props} /> */}
3950
<>
4051
{hasMultitenancyHeader && (
41-
<div ref={headerRef} className="multitenancy-header">
52+
<div ref={headerRef} className={`multitenancy-header ${logoAlignmentClass}`}>
4253
{customLogoPath && (
4354
<img
4455
className="multitenancy-logo"

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

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
ENABLE_INTEGRATION_PREMIUM,
1515
IS_ENTERPRISE
1616
} from "../constants/constants";
17-
import { StorageService } from "@formsflow/service";
17+
import { StorageService, StyleServices } from "@formsflow/service";
1818
import i18n from "../resourceBundles/i18n";
1919
import { fetchTenantDetails } from "../services/tenant";
2020
import { setShowApplications } from "../constants/userContants";
@@ -26,6 +26,48 @@ import { ApplicationLogo } from "@formsflow/components";
2626
import { ProfileSettingsModal } from "./ProfileSettingsModal";
2727
import PropTypes from 'prop-types';
2828

29+
const UserProfile = ({ userDetail, initials, handleProfileModal, logout, t }) => (
30+
<div className="user-container">
31+
<button className="button-as-div justify-content-start m-2" onClick={handleProfileModal}>
32+
<div className="user-icon cursor-pointer" data-testid="user-icon">
33+
{initials}
34+
</div>
35+
<div>
36+
<p className="user-name" data-testid="user-name">{userDetail?.name}</p>
37+
<p className="user-email" data-testid="user-email">
38+
{userDetail?.email || userDetail?.preferred_username}
39+
</p>
40+
</div>
41+
</button>
42+
<button className="button-as-div sign-out-button" onClick={logout} data-testid="sign-out-button">
43+
<p className="m-0">{t("Sign Out")}</p>
44+
</button>
45+
</div>
46+
);
47+
48+
UserProfile.propTypes = {
49+
userDetail: PropTypes.shape({
50+
name: PropTypes.string,
51+
email: PropTypes.string,
52+
preferred_username: PropTypes.string,
53+
}).isRequired,
54+
55+
initials: PropTypes.string.isRequired,
56+
handleProfileModal: PropTypes.func.isRequired,
57+
logout: PropTypes.func.isRequired,
58+
t: PropTypes.func.isRequired,
59+
};
60+
61+
const renderLogo = (hideLogo) => {
62+
if (hideLogo === "true") return null;
63+
64+
return (
65+
<div className="logo-container">
66+
<ApplicationLogo data-testid="application-logo" />
67+
</div>
68+
);
69+
};
70+
2971
const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
3072
const [tenantLogo, setTenantLogo] = React.useState("");
3173
const [tenantName, setTenantName] = React.useState("");
@@ -39,7 +81,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
3981
const tenantKey = tenant?.tenantId;
4082
const formTenant = form?.tenantKey;
4183
const [showProfile, setShowProfile] = useState(false);
42-
84+
const hideLogo = StyleServices?.getCSSVariable("--hide-formsflow-logo");
4385
const { t } = useTranslation();
4486
const currentLocation = useLocation();
4587

@@ -237,15 +279,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
237279

238280
return (
239281
<div className="sidenav" style={{ height: sidenavHeight }}>
240-
<div className="logo-container">
241-
{/* <img
242-
className=""
243-
src={Appname}
244-
alt="applicationName"
245-
data-testid="app-logo"
246-
/> */}
247-
<ApplicationLogo data-testid="application-logo" />
248-
</div>
282+
{renderLogo(hideLogo)}
249283
<div className="options-container" data-testid="options-container">
250284
<Accordion activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
251285
{ENABLE_FORMS_MODULE &&
@@ -365,30 +399,14 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
365399
)}
366400
</Accordion>
367401
</div>
368-
{isAuthenticated && (<div className="user-container">
369-
<button className="button-as-div justify-content-start m-2" onClick={handleProfileModal}>
370-
<div className="user-icon cursor-pointer" data-testid="user-icon">
371-
{initials}
372-
</div>
373-
<div>
374-
<p
375-
className="user-name"
376-
data-testid="user-name" >
377-
{userDetail?.name}
378-
</p>
379-
<p className="user-email" data-testid="user-email">
380-
{userDetail?.email || userDetail?.preferred_username}
381-
</p>
382-
</div>
383-
</button>
384-
<div
385-
className="sign-out-button"
386-
onClick={logout}
387-
data-testid="sign-out-button"
388-
>
389-
<p className="m-0">{t("Sign Out")}</p>
390-
</div>
391-
</div>)}
402+
{isAuthenticated && (
403+
<UserProfile
404+
userDetail={userDetail}
405+
initials={initials}
406+
handleProfileModal={handleProfileModal}
407+
logout={logout}
408+
t={t}
409+
/>)}
392410
{
393411
showProfile && <ProfileSettingsModal
394412
show={showProfile}

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
background-color: var(--navbar-bg-color);
6161
border: none;
6262
font-size: var(--font-size-sm);
63-
font-weight: var(--font-size-sm);
63+
font-weight: var(--font-weight-sm);
6464
line-height: var(--text-line-height);
6565
letter-spacing: var(--text-space-xs);
6666
margin-bottom: 0.5rem;
@@ -83,15 +83,17 @@
8383

8484
&:hover {
8585
text-decoration: none;
86-
color: var(--navbar-main-menu-active-font-color);
87-
background-color: var(--navbar-menu-hover-bg-color);
86+
color: var(--navbar-hover-submenu-font-color);
87+
background-color: var(--navbar-hover-submenu-bg-color);
88+
font-weight: var(--navbar-hover-submenu-font-weight);
89+
font-size: var(--navbar-hover-submenu-font-size);
8890
}
8991

9092
&.active {
9193
background-color: var(--navbar-active-submenu-bg-color);
9294
color: var(--navbar-active-submenu-font-color);
93-
font-size: var(--font-size-sm);
94-
font-weight: var(--font-weight-xl);
95+
font-size: var(--navbar-active-submenu-font-size);
96+
font-weight: var(--navbar-active-submenu-font-weight);
9597
line-height: var(--text-line-height);
9698
letter-spacing: var(--text-space-sm);
9799
}
@@ -204,7 +206,6 @@
204206
background-color: var(--navbar-bg-color);
205207
display: flex;
206208
align-items: center;
207-
justify-content: center;
208209
padding: 0 var(--spacer-100);
209210
}
210211

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,24 @@ $danger-color: var(--ff-danger);
3030

3131
.btn-link {
3232
text-decoration: none !important;
33-
33+
--ff-btn-color: var(--default-link-color) !important;
34+
--ff-btn-border-color: var(--default-link-color) !important;
35+
--ff-btn-hover-color: var(--default-link-color) !important;
36+
--ff-btn-hover-border-color: var(--default-link-color) !important;
37+
--ff-btn-active-color: var(--default-link-color) !important;
38+
--ff-btn-active-border-color: var(--default-link-color) !important;
3439
&:hover {
3540
text-decoration: underline !important;
3641
}
3742

3843
&:focus,
3944
&.focus {
40-
box-shadow: none;
45+
box-shadow: none !important;
46+
}
47+
&:active,
48+
&.active {
49+
border: solid var(--default-link-color) !important;
50+
border: 2px solid var(--default-link-color) !important;
4151
}
4252
}
4353

@@ -98,8 +108,8 @@ $danger-color: var(--ff-danger);
98108
}
99109

100110
.btn-primary:focus-visible,
101-
.btn.btn-link:focus-visible,
102-
.btn.btn-link:focus,
111+
// .btn.btn-link:focus-visible,
112+
// .btn.btn-link:focus,
103113
.btn-info:focus-visible,
104114
.btn-info:focus,
105115
.btn-light:focus-visible,
@@ -109,7 +119,7 @@ $danger-color: var(--ff-danger);
109119
.btn-secondary.focus-visible,
110120
.btn-secondary:focus,
111121
.nav-link:focus-visible,
112-
.form-check-input:focus-visible,
122+
// .form-check-input:focus-visible,
113123
.out-line:focus-visible {
114124
outline: 0.1875rem solid $primary-light !important;
115125
}
@@ -237,7 +247,7 @@ $danger-color: var(--ff-danger);
237247
font-size: var(--font-size-xs) !important;
238248
padding: var(--spacer-075) var(--spacer-100) !important;
239249
font-weight: var(--font-weight-xl) !important;
240-
border-radius: var(--radius-md) !important;
250+
border-radius: var(--sm-btn-border-radius) !important;
241251
line-height: var(--text-line-height);
242252
~.dropdown-menu .dropdown-item {
243253
font-size: var(--font-size-xs);
@@ -254,7 +264,7 @@ $danger-color: var(--ff-danger);
254264
&.btn-md {
255265
padding: var(--spacer-100) var(--spacer-150) !important;
256266
font-weight: var(--font-weight-lg) !important;
257-
border-radius: var(--radius-md) !important;
267+
border-radius: var(--md-btn-border-radius) !important;
258268
line-height: var(--text-line-height);
259269
~.dropdown-menu .dropdown-item {
260270
font-size: var(--font-size-sm);
@@ -271,7 +281,7 @@ $danger-color: var(--ff-danger);
271281
&.btn-lg {
272282
padding: var(--spacer-100) var(--spacer-150) !important;
273283
font-weight: var(--font-weight-xl) !important;
274-
border-radius: var(--radius-lg) !important;
284+
border-radius: var(--lg-btn-border-radius) !important;
275285
line-height: var(--text-line-height);
276286
~.dropdown-menu .dropdown-item {
277287
font-size: var(--font-size-sm);

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

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -575,4 +575,45 @@ select option:hover {
575575
margin-right: var(--spacer-075);
576576
}
577577

578-
}
578+
}
579+
//custom switch for sdpr
580+
.form-check-input[type=checkbox] {
581+
background-color: #EDEBE9;
582+
border: none;
583+
position: relative;
584+
transition: all 0.3s ease;
585+
586+
&:after {
587+
content: '';
588+
position: absolute;
589+
width: 16px;
590+
height: 16px;
591+
background-color: white;
592+
border: 2px solid #898785;
593+
border-radius: 50%;
594+
top: 50%;
595+
left: 0;
596+
transform: translate(0, -50%);
597+
transition: all 0.2s ease;
598+
}
599+
&:hover:not(:checked):after {
600+
border-color: #353433;
601+
}
602+
&:checked {
603+
background-color: var(--ff-primary);
604+
border: none;
605+
606+
&:after {
607+
background-color: white;
608+
border-color: var(--ff-primary);
609+
left: 100%;
610+
transform: translate(-100%, -50%);
611+
}
612+
}
613+
614+
&:focus {
615+
outline: none !important;
616+
box-shadow: none !important;
617+
}
618+
}
619+

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
//New Colors
22
$black: #000000;
33
$white: #ffffff;
4-
$danger: #FF4242;
54
$green: #57C20A;
65
$green-dark: #006621;
76

@@ -58,6 +57,14 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
5857
--navbar-active-submenu-bg-color: #{$gray-darkest};
5958
--navbar-active-submenu-font-color: #{$white};
6059
--navbar-menu-hover-bg-color: #{$primary-light};
60+
61+
--navbar-active-submenu-font-weight: var(--font-weight-lg);
62+
--navbar-active-submenu-font-size: var(--font-size-sm);
63+
--navbar-hover-submenu-bg-color: #{$primary-light};
64+
--navbar-hover-submenu-font-color: #{$gray-darkest};
65+
--navbar-hover-submenu-font-weight: var(--font-weight-sm);
66+
--navbar-hover-submenu-font-size: var(--font-size-sm);
67+
6168
--navbar-main-menu-active-bg-color: #{$gray-medium};
6269
--navbar-main-menu-active-font-color: #{$gray-darkest};
6370
--navbar-bg-color: #{$white};
@@ -69,6 +76,10 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
6976
--primary-btn-bg-color: #{$primary};
7077
--secondary-btn-font-color: #{$primary};
7178
--secondary-btn-bg-color: #{$primary-light};
79+
--default-link-color: #{$primary};
80+
--sm-btn-border-radius: var(--radius-md);
81+
--md-btn-border-radius: var(--radius-md);
82+
--lg-btn-border-radius: var(--radius-lg);
7283
--default-font-size: 1rem;
7384
--default-font-color: #{$gray-dark};
7485
--navbar-width: 192px;
@@ -79,7 +90,9 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
7990
--no-code-warning: #{$no-code-warning};
8091

8192
//font-style
82-
--primary-font: "Roboto", sans-serif;
93+
--default-font-family-url:" ";
94+
--default-font-family: "Roboto", sans-serif;
95+
--primary-font: var(--default-font-family);
8396
//font-size
8497
--font-size-xs: 0.875rem;
8598
--font-size-sm: var(--default-font-size);
@@ -129,8 +142,11 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
129142
//custom
130143
--client-nav: 3rem;
131144
--header-close-btn: 4.625rem;
145+
--default-danger-color: #FF4242;
132146
}
133-
147+
//for cutomize danger color
148+
$danger: var(--default-danger-color);
149+
134150
body {
135151
color: var(--default-font-color) !important;
136152
min-height: 100vh !important;

0 commit comments

Comments
 (0)