Skip to content

Commit d6be9e9

Browse files
guardofparadiseguardofparadise
committed
updated customizer
1 parent 03d7d33 commit d6be9e9

File tree

8 files changed

+184
-34
lines changed

8 files changed

+184
-34
lines changed

‎changelog.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## [8.2.1]
4+
5+
- Extended customizer, added more colors
6+
37
## [8.2.0]
48

59
- Updated Icon Pack

‎src/components/Header/Header.js

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ class Header extends React.Component {
233233
<Nav>
234234
<NavItem>
235235
<NavLink className={`d-md-down-none ${s.toggleSidebar}`} id="toggleSidebar" onClick={this.toggleSidebar}>
236-
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
236+
<span className={s.headerSvgFlipColor}>
237237
<MenuIcon maskId={1001}/>
238238
</span>
239239
</NavLink>
@@ -244,27 +244,25 @@ class Header extends React.Component {
244244
<span
245245
className={`rounded rounded-lg d-md-none d-sm-down-block`} style={{marginTop: 7}}>
246246
<span
247-
className={`${s.headerSvgFlipColor}`}
248-
style={{fontSize: 30, color: navbarColor === "#ffffff"
249-
? "#ffffff"
250-
: chroma(navbarColor).luminance() < 0.4 ? "#ffffff" : ""}}
247+
className={s.headerSvgFlipColor}
248+
style={{fontSize: 30}}
251249
><MenuIcon maskId={1000}/></span>
252250
</span>
253-
<span className={`ml-3 d-sm-down-none ${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
251+
<span className={`ml-3 d-sm-down-none ${s.headerSvgFlipColor}`}>
254252
<MenuIcon maskId={999}/>
255253
</span>
256254
</NavLink>
257255
</NavItem>
258256
<NavItem className="d-sm-down-none">
259257
<NavLink className="px-2">
260-
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
258+
<span className={s.headerSvgFlipColor}>
261259
<FlipIcon />
262260
</span>
263261
</NavLink>
264262
</NavItem>
265263
<NavItem className="d-sm-down-none">
266264
<NavLink className="px-2">
267-
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
265+
<span className={s.headerSvgFlipColor}>
268266
<CloseIcon />
269267
</span>
270268
</NavLink>
@@ -285,7 +283,7 @@ class Header extends React.Component {
285283
</FormGroup>
286284
</Form>
287285

288-
<NavLink className={`${s.navbarBrand} d-md-none ${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : ""}`}>
286+
<NavLink className={`${s.navbarBrand} d-md-none ${s.headerSvgFlipColor}`}>
289287
<i className="fa fa-circle text-primary mr-n-sm" />
290288
<i className="fa fa-circle text-danger" />
291289
&nbsp;
@@ -297,7 +295,7 @@ class Header extends React.Component {
297295

298296
<Nav className="ml-auto">
299297
<Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu}`}>
300-
<DropdownToggle nav caret className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : ""}`}>
298+
<DropdownToggle nav caret className={s.headerSvgFlipColor}>
301299
<span className={`${s.avatar} rounded-circle float-left mr-2`}>
302300
{avatar ? (
303301
<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 {
306304
) : <span title={user && (user.firstName || user.email)}>{firstUserLetter}</span>
307305
}
308306
</span>
309-
<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>
307+
<span className={`small d-sm-down-none ${s.headerTitle} ${this.props.sidebarStatic ? s.adminEmail : ''}`}>{user ? (user.firstName || user.email) : "Philip smith"}</span>
310308
<span className="ml-1 circle bg-primary text-white fw-bold d-sm-down-none">13</span>
311309
</DropdownToggle>
312310
<DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
@@ -315,7 +313,7 @@ class Header extends React.Component {
315313
</Dropdown>
316314
<Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="tutorial-dropdown pr-4">
317315
<DropdownToggle nav className={`${s.mobileCog}`}>
318-
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
316+
<span className={`${s.headerSvgFlipColor}`}>
319317
<SettingsIcon/>
320318
</span>
321319
</DropdownToggle>

‎src/components/Header/Header.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@
6565
}
6666
}
6767

68+
.headerTitle {
69+
color: var(--input-color)
70+
}
71+
6872
.navbarForm {
6973
padding: 6px 0 6px 1rem;
7074
margin-left: 10px;

‎src/components/Sidebar/LinksGroup/LinksGroup.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ class LinksGroup extends Component {
7676
<span className={classnames('icon', s.icon)}>
7777
{this.props.iconElement ? this.props.iconElement : <i className={`fi ${this.props.iconName}`} />}
7878
</span>
79-
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerUpdate} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
79+
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerUpdate}`}>{this.props.label}</sup>}
8080
{this.props.badge && <Badge className={s.badge} pill>9</Badge>}
8181
</NavLink>
8282
</li>
@@ -96,7 +96,7 @@ class LinksGroup extends Component {
9696
}}
9797
exact={exact}
9898
>
99-
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
99+
{this.props.header} {this.props.label && <sup className={s.headerLabel}>{this.props.label}</sup>}
100100
</NavLink>
101101
</li>
102102
);
@@ -118,7 +118,7 @@ class LinksGroup extends Component {
118118
{this.props.iconElement ? this.props.iconElement : <i className={`fi ${this.props.iconName}`} />}
119119
</span> : null
120120
}
121-
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode} ml-1 text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
121+
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode}`}>{this.props.label}</sup>}
122122
<b className={['fa fa-angle-left', s.caret].join(' ')} />
123123
</a>
124124
{/* eslint-enable */}

‎src/components/Sidebar/LinksGroup/LinksGroup.module.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,24 +72,25 @@
7272
line-height: 8px;
7373
margin-top: 9px;
7474
margin-right: 15px;
75-
background: $purple;
76-
color: var(--badge-item-color);
75+
background: var(--sidebar-icon-bg);
76+
color: var(--sidebar-badge-color);
7777
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
7878
margin-top: 16px;
7979
}
8080
}
8181

8282
.headerNode {
83-
color: var(--important-notification)
83+
color: var(--sidebar-hightlight-two)
8484
}
8585

8686
.headerUpdate {
87-
color: var(--update-notification)
87+
color: var(--sidebar-hightlight)
8888
}
8989

9090
a.headerLinkActive {
9191
color: var(--sidebar-item-active-color);
9292
font-weight: $font-weight-bold;
93+
white-space: nowrap;
9394

9495
&:hover {
9596
color: var(--sidebar-icon-bg);

‎src/components/Sidebar/Sidebar.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -464,19 +464,19 @@ class Sidebar extends React.Component {
464464
<ul className={s.sidebarLabels}>
465465
<li>
466466
<a href="#">
467-
<i className="fa fa-circle text-danger mr-2" />
467+
<i className={`fa fa-circle mr-2 ${s.labelRecent}`} />
468468
<span className={s.labelName}>My Recent</span>
469469
</a>
470470
</li>
471471
<li>
472472
<a href="#">
473-
<i className="fa fa-circle text-info mr-2" />
473+
<i className={`fa fa-circle mr-2 ${s.labelStarred}`} />
474474
<span className={s.labelName}>Starred</span>
475475
</a>
476476
</li>
477477
<li>
478478
<a href="#">
479-
<i className="fa fa-circle text-primary mr-2" />
479+
<i className={`fa fa-circle mr-2 ${s.labelBackground}`} />
480480
<span className={s.labelName}>Background</span>
481481
</a>
482482
</li>
@@ -494,7 +494,7 @@ class Sidebar extends React.Component {
494494
toggle={() => { this.dismissAlert(alert.id); }}
495495
>
496496
<span>{alert.title}</span><br />
497-
<Progress className={`${s.sidebarProgress} progress-xs mt-1`} color={alert.color} value={alert.value} />
497+
<Progress className={`${s.sidebarProgress} sidebar-bottom-aler-${alert.color} progress-xs mt-1`} color={'unset'} value={alert.value} />
498498
<small>{alert.footer}</small>
499499
</Alert>,
500500
)}

‎src/components/Sidebar/Sidebar.module.scss

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
color: var(--sidebar-icon-bg);
1919
text-transform: uppercase;
2020
font-weight: 400;
21-
font-size: 16px;
22-
text-shadow: 4px 4px 15px rgba(var(--sidebar-icon-bg), .6);
21+
font-size: 16.5px;
22+
text-shadow: 4px 4px 15px var(--sidebar-icon-bg);
2323
}
2424

2525
.sidebarWrapper {
@@ -76,7 +76,7 @@
7676
margin: 35px 0 5px 11px;
7777
font-size: $font-size-mini;
7878
transition: opacity $sidebar-transition-time ease-in-out;
79-
color: var(--sidebar-icon-bg);
79+
color: var(--sidebar-section);
8080
opacity: .6;
8181
font-weight: bold;
8282
}
@@ -185,3 +185,29 @@
185185
.groupTitle {
186186
margin-bottom: 15px;
187187
}
188+
189+
.labelRecent {
190+
color: var(--sidebar-core);
191+
}
192+
193+
.labelStarred {
194+
color: var(--sidebar-ui);
195+
}
196+
197+
.labelBackground {
198+
color: var(--sidebar-form);
199+
}
200+
201+
:global {
202+
.sidebar-bottom-aler-danger {
203+
& > .progress-bar {
204+
background-color: var(--sidebar-sales);
205+
}
206+
}
207+
208+
.sidebar-bottom-aler-primary {
209+
& > .progress-bar {
210+
background-color: var(--sideba-responsibility);
211+
}
212+
}
213+
}

0 commit comments

Comments
 (0)