From d6be9e995277ab1ab6b094a0103ddded286efea5 Mon Sep 17 00:00:00 2001
From: Vlad <excelent91@mail.ru>
Date: Fri, 12 Feb 2021 17:14:30 +0200
Subject: [PATCH] updated customizer

---
 changelog.md                                  |   4 +
 src/components/Header/Header.js               |  22 ++-
 src/components/Header/Header.module.scss      |   4 +
 .../Sidebar/LinksGroup/LinksGroup.js          |   6 +-
 .../Sidebar/LinksGroup/LinksGroup.module.scss |   9 +-
 src/components/Sidebar/Sidebar.js             |   8 +-
 src/components/Sidebar/Sidebar.module.scss    |  32 ++++-
 src/styles/_theme-variables.scss              | 133 ++++++++++++++++--
 8 files changed, 184 insertions(+), 34 deletions(-)

diff --git a/changelog.md b/changelog.md
index 5c7105f9..be54a776 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [8.2.1]
+
+- Extended customizer, added more colors
+
 ## [8.2.0]
 
 - Updated Icon Pack
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 0a4dae34..d3f8057b 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -233,7 +233,7 @@ class Header extends React.Component {
         <Nav>
           <NavItem>
             <NavLink className={`d-md-down-none ${s.toggleSidebar}`} id="toggleSidebar" onClick={this.toggleSidebar}>
-              <span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
+              <span className={s.headerSvgFlipColor}>
                 <MenuIcon  maskId={1001}/>
               </span>
             </NavLink>
@@ -244,27 +244,25 @@ class Header extends React.Component {
             <span 
               className={`rounded rounded-lg d-md-none d-sm-down-block`} style={{marginTop: 7}}>
                 <span 
-                  className={`${s.headerSvgFlipColor}`}
-                  style={{fontSize: 30, color: navbarColor === "#ffffff" 
-                  ? "#ffffff"
-                  : chroma(navbarColor).luminance() < 0.4 ? "#ffffff" : ""}} 
+                  className={s.headerSvgFlipColor}
+                  style={{fontSize: 30}} 
                 ><MenuIcon maskId={1000}/></span>
               </span>
-              <span className={`ml-3 d-sm-down-none ${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
+              <span className={`ml-3 d-sm-down-none ${s.headerSvgFlipColor}`}>
                 <MenuIcon maskId={999}/>
               </span>
             </NavLink>
           </NavItem>
           <NavItem className="d-sm-down-none">
             <NavLink className="px-2">
-              <span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
+              <span className={s.headerSvgFlipColor}>
                 <FlipIcon />
               </span>
             </NavLink>
           </NavItem>
           <NavItem className="d-sm-down-none">
             <NavLink className="px-2">
-              <span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
+              <span className={s.headerSvgFlipColor}>
                 <CloseIcon />
               </span>
             </NavLink>
@@ -285,7 +283,7 @@ class Header extends React.Component {
           </FormGroup>
         </Form>
 
-        <NavLink className={`${s.navbarBrand} d-md-none ${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : ""}`}>
+        <NavLink className={`${s.navbarBrand} d-md-none ${s.headerSvgFlipColor}`}>
           <i className="fa fa-circle text-primary mr-n-sm" />
           <i className="fa fa-circle text-danger" />
           &nbsp;
@@ -297,7 +295,7 @@ class Header extends React.Component {
 
         <Nav className="ml-auto">
           <Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu}`}>
-            <DropdownToggle nav caret className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : ""}`}>
+            <DropdownToggle nav caret className={s.headerSvgFlipColor}>
             <span className={`${s.avatar} rounded-circle float-left mr-2`}>
               {avatar ? (
                 <img src={avatar} onError={e => e.target.src = adminDefault} alt="..." title={user && (user.firstName || user.email)} />
@@ -306,7 +304,7 @@ class Header extends React.Component {
               ) : <span title={user && (user.firstName || user.email)}>{firstUserLetter}</span>
               }
             </span>
-              <span className={`small d-sm-down-none ${this.props.sidebarStatic ? s.adminEmail : ''} ${chroma(navbarColor).luminance() < 0.4 ? `text-white` : ""}`}>{user ? (user.firstName || user.email) : "Philip smith"}</span>
+              <span className={`small d-sm-down-none ${s.headerTitle} ${this.props.sidebarStatic ? s.adminEmail : ''}`}>{user ? (user.firstName || user.email) : "Philip smith"}</span>
               <span className="ml-1 circle bg-primary text-white fw-bold d-sm-down-none">13</span>
             </DropdownToggle>
             <DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
@@ -315,7 +313,7 @@ class Header extends React.Component {
           </Dropdown>
           <Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="tutorial-dropdown pr-4">
             <DropdownToggle nav className={`${s.mobileCog}`}>
-              <span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
+              <span className={`${s.headerSvgFlipColor}`}>
                 <SettingsIcon/>
               </span>
             </DropdownToggle>
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 3178d5c9..5218683b 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -65,6 +65,10 @@
   }
 }
 
+.headerTitle {
+  color: var(--input-color)
+}
+
 .navbarForm {
   padding: 6px 0 6px 1rem;
   margin-left: 10px;
diff --git a/src/components/Sidebar/LinksGroup/LinksGroup.js b/src/components/Sidebar/LinksGroup/LinksGroup.js
index 6570c2ec..0cdc9b8a 100644
--- a/src/components/Sidebar/LinksGroup/LinksGroup.js
+++ b/src/components/Sidebar/LinksGroup/LinksGroup.js
@@ -76,7 +76,7 @@ class LinksGroup extends Component {
               <span className={classnames('icon', s.icon)}>
                 {this.props.iconElement ? this.props.iconElement : <i className={`fi ${this.props.iconName}`} />}
               </span>
-              {this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerUpdate} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
+              {this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerUpdate}`}>{this.props.label}</sup>}
               {this.props.badge && <Badge className={s.badge} pill>9</Badge>}
             </NavLink>
           </li>
@@ -96,7 +96,7 @@ class LinksGroup extends Component {
             }}
             exact={exact}
           >
-            {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
+            {this.props.header} {this.props.label && <sup className={s.headerLabel}>{this.props.label}</sup>}
           </NavLink>
         </li>
       );
@@ -118,7 +118,7 @@ class LinksGroup extends Component {
                     {this.props.iconElement ? this.props.iconElement : <i className={`fi ${this.props.iconName}`} />}
                   </span> : null
                 }
-                {this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode} ml-1 text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
+                {this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode}`}>{this.props.label}</sup>}
                 <b className={['fa fa-angle-left', s.caret].join(' ')} />
               </a>
               {/* eslint-enable */}
diff --git a/src/components/Sidebar/LinksGroup/LinksGroup.module.scss b/src/components/Sidebar/LinksGroup/LinksGroup.module.scss
index 0f88c79a..db0f3821 100644
--- a/src/components/Sidebar/LinksGroup/LinksGroup.module.scss
+++ b/src/components/Sidebar/LinksGroup/LinksGroup.module.scss
@@ -72,24 +72,25 @@
     line-height: 8px;
     margin-top: 9px;
     margin-right: 15px;
-    background: $purple;
-    color: var(--badge-item-color);
+    background: var(--sidebar-icon-bg);
+    color: var(--sidebar-badge-color);
     @media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
       margin-top: 16px;
     }
   }
 
   .headerNode {
-    color: var(--important-notification)
+    color: var(--sidebar-hightlight-two)
   }
 
   .headerUpdate {
-    color: var(--update-notification)
+    color: var(--sidebar-hightlight)
   }
   
   a.headerLinkActive {
     color: var(--sidebar-item-active-color);
     font-weight: $font-weight-bold;
+    white-space: nowrap;
     
     &:hover {
       color: var(--sidebar-icon-bg);
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 28581797..9dc52680 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -464,19 +464,19 @@ class Sidebar extends React.Component {
         <ul className={s.sidebarLabels}>
           <li>
             <a href="#">
-              <i className="fa fa-circle text-danger mr-2" />
+              <i className={`fa fa-circle mr-2 ${s.labelRecent}`} />
               <span className={s.labelName}>My Recent</span>
             </a>
           </li>
           <li>
             <a href="#">
-              <i className="fa fa-circle text-info mr-2" />
+              <i className={`fa fa-circle mr-2 ${s.labelStarred}`} />
               <span className={s.labelName}>Starred</span>
             </a>
           </li>
           <li>
             <a href="#">
-              <i className="fa fa-circle text-primary mr-2" />
+              <i className={`fa fa-circle mr-2 ${s.labelBackground}`} />
               <span className={s.labelName}>Background</span>
             </a>
           </li>
@@ -494,7 +494,7 @@ class Sidebar extends React.Component {
               toggle={() => { this.dismissAlert(alert.id); }}
             >
               <span>{alert.title}</span><br />
-              <Progress className={`${s.sidebarProgress} progress-xs mt-1`} color={alert.color} value={alert.value} />
+              <Progress className={`${s.sidebarProgress} sidebar-bottom-aler-${alert.color} progress-xs mt-1`} color={'unset'} value={alert.value} />
               <small>{alert.footer}</small>
             </Alert>,
           )}
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 2e6022ca..e5e4f319 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -18,8 +18,8 @@
   color: var(--sidebar-icon-bg);
   text-transform: uppercase;
   font-weight: 400;
-  font-size: 16px;
-  text-shadow: 4px 4px 15px rgba(var(--sidebar-icon-bg), .6);
+  font-size: 16.5px;
+  text-shadow: 4px 4px 15px var(--sidebar-icon-bg);
 }
 
 .sidebarWrapper {
@@ -76,7 +76,7 @@
   margin: 35px 0 5px 11px;
   font-size: $font-size-mini;
   transition: opacity $sidebar-transition-time ease-in-out;
-  color: var(--sidebar-icon-bg);
+  color: var(--sidebar-section);
   opacity: .6;
   font-weight: bold;
 }
@@ -185,3 +185,29 @@
 .groupTitle {
   margin-bottom: 15px;
 }
+
+.labelRecent {
+  color: var(--sidebar-core);
+}
+
+.labelStarred {
+  color: var(--sidebar-ui);
+}
+
+.labelBackground {
+  color: var(--sidebar-form);
+}
+
+:global {
+  .sidebar-bottom-aler-danger {
+    & > .progress-bar {
+      background-color: var(--sidebar-sales);
+    }
+  }
+
+  .sidebar-bottom-aler-primary {
+    & > .progress-bar {
+      background-color: var(--sideba-responsibility);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_theme-variables.scss b/src/styles/_theme-variables.scss
index 2402f1a5..59f1b93e 100644
--- a/src/styles/_theme-variables.scss
+++ b/src/styles/_theme-variables.scss
@@ -14,6 +14,19 @@
     --sidebar-item-active-color: "#FFFFFF";
     --sidebar-nav-title-color: #0e1113;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #FFFFFF;
+
     --widget-shadow-color: 153, 187, 221;
 
     --navbar-shadow: none;
@@ -29,6 +42,19 @@
     --sidebar-item-active: #F6F6E9;
     --sidebar-nav-title-color: #dedede;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #14395C;
+
     --widget-shadow-color: 115, 162, 208;
 
     --navbar-shadow: 0 15px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);
@@ -42,6 +68,19 @@
     --sidebar-color: #F6F6E9;
     --sidebar-action-bg: #00395F;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #14395C;
+
     --sidebar-nav-title-color: #dedede;
 
     --widget-shadow-color: 115, 162, 208;
@@ -52,11 +91,24 @@
   .dashboard-sky {
     --logo-color: $white;
     --sidebar-icon-bg: #0D2B47;
-    --sidebar-item-active: #004472;
+    --sidebar-item-active: #14191D;
     --sidebar-bg-color: #E9EBEF;
-    --sidebar-color: #004472;
+    --sidebar-color: #14191D;
     --sidebar-action-bg: #DBDEE4;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #D5E6F3;
+
     --sidebar-nav-title-color: #004472;
 
     --widget-shadow-color: 115, 162, 208;
@@ -67,11 +119,24 @@
   .dashboard-wave {
     --sidebar-icon-bg: #0D2B47;
     --logo-color: $white;
-    --sidebar-item-active: #004472;
+    --sidebar-item-active: #14191D;
     --sidebar-bg-color: #D1E7F5;
-    --sidebar-color: #004472;
+    --sidebar-color: #14191D;
     --sidebar-action-bg: #BEDDF2;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #D5E6F3;
+
     --sidebar-nav-title-color: #004472;
 
     --widget-shadow-color: 115, 162, 208;
@@ -81,11 +146,24 @@
 
   .dashboard-rain {
     --logo-color: $white;
-    --sidebar-item-active: #004472;
+    --sidebar-item-active: #14191D;
     --sidebar-bg-color: #CCDDE9;
-    --sidebar-color: #004472;
+    --sidebar-color: #14191D;
     --sidebar-action-bg: #BACEDC;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #D5E6F3;
+
     --sidebar-nav-title-color: #004472;
 
     --widget-shadow-color: 115, 162, 208;
@@ -95,11 +173,24 @@
 
   .dashboard-middle {
     --logo-color: $white;
-    --sidebar-item-active: #004472;
+    --sidebar-item-active: #14191D;
     --sidebar-bg-color: #D7DFE6;
-    --sidebar-color: #004472;
+    --sidebar-color: #14191D;
     --sidebar-action-bg: #BDC9D4;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #53AA8D;
+
+    --sidebar-badge-color: #D5E6F3;
+
     --sidebar-nav-title-color: #004472;
 
     --widget-shadow-color: 115, 162, 208;
@@ -116,6 +207,19 @@
     --sidebar-action-bg: #080D0F;
     --sidebar-nav-title-color: #F6F6E9;
 
+    --sidebar-section: #5287B9;
+    --sidebar-sales: #3E86CA;
+    --sideba-responsibility: #EC692C;
+
+    --sidebar-hightlight: #53AA8D;
+    --sidebar-hightlight-two:  #FF7A3C;
+
+    --sidebar-ui: #3E86CA;
+    --sidebar-core:  #EC692C;
+    --sidebar-form: #21578E;
+
+    --sidebar-badge-color: #0D2B47;
+
     --widget-shadow-color: 115, 162, 208;
 
     --navbar-shadow: 0 15px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);
@@ -132,6 +236,19 @@
     --update-notification-color: #004472;
     --sidebar-nav-title-color: #dedede;
 
+    --sidebar-section: #1D5442;
+    --sidebar-sales: #21578E;
+    --sideba-responsibility: #0D2B47;
+
+    --sidebar-hightlight: #8BFFE3;
+    --sidebar-hightlight-two:  #FFC0A5;
+
+    --sidebar-ui: #8BFFE3;
+    --sidebar-core:  #FFC0A5;
+    --sidebar-form: #0D2B47;
+
+    --sidebar-badge-color: #FFFFFF;
+
     --widget-shadow-color: 115, 162, 208;
 
     --navbar-shadow: 0 15px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);