updated customizer

flatlogic · Feb 12, 2021 · d6be9e9 · d6be9e9
1 parent 03d7d33
commit d6be9e9
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+    }
+  }
+}