Skip to content

Commit 2d84196

Browse files
guardofparadiseguardofparadise
committed
updated icon pack
1 parent 324b68a commit 2d84196

37 files changed

+613
-55
lines changed

‎changelog.md

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

3+
## [8.2.0]
4+
5+
- Updated Icon Pack
6+
- Refactored customization
7+
38
## [8.1.4]
49

510
- Fixed localStorage bug for customization

‎src/components/ColorPicker/ColorPicker.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { Component } from 'react';
2-
import ColorPicker from 'rc-color-picker';
32
import PropTypes from 'prop-types';
43
import s from './ColorPicker.module.scss';
54

@@ -22,7 +21,6 @@ class CustomColorPicker extends Component {
2221
)
2322
}
2423
)}
25-
<ColorPicker className={s.colorBox} defaultColor="#333333" onChange={(e) => updateColor(e.color, customizationItem)}/>
2624
</ul>
2725
</div>
2826
)

‎src/components/Header/Header.js

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@ import Joyride, { STATUS } from 'react-joyride';
2828
import { toggleSidebar, openSidebar, closeSidebar, changeActiveSidebarItem } from '../../actions/navigation';
2929

3030
import adminDefault from '../../images/chat/chat2.png';
31+
import MenuIcon from '../../images/sidebar/Fill/MenuIcon';
32+
import FlipIcon from '../../images/sidebar/Outline/Flip';
33+
import CloseIcon from '../../images/sidebar/Fill/CloseIconOne';
34+
import SearchIcon from '../../images/sidebar/Outline/Search';
35+
import SettingsIcon from '../../images/sidebar/Outline/Settings';
36+
import CalendarIcon from '../../images/sidebar/Outline/Calendar';
37+
import PersonIcon from '../../images/sidebar/Outline/Person';
38+
import EmailIcon from '../../images/sidebar/Outline/Email';
39+
import PowerIcon from '../../images/sidebar/Outline/Power';
3140

3241
import s from './Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
3342

@@ -164,7 +173,7 @@ class Header extends React.Component {
164173
const firstUserLetter = user && (user.firstName|| user.email)[0].toUpperCase();
165174

166175
return (
167-
<Navbar className={`${s.root} d-print-none ${navbarType === NavbarTypes.FLOATING ? s.navbarFloatingType : ''}`} style={{backgroundColor: navbarColor, zIndex: !openUsersList ? 100 : 0}}>
176+
<Navbar className={`${s.root} d-print-none ${navbarType === NavbarTypes.FLOATING ? s.navbarFloatingType : ''}`} style={{zIndex: !openUsersList ? 100 : 0}}>
168177
<Joyride
169178
callback={this.handleJoyrideCallback}
170179
continuous={true}
@@ -224,32 +233,40 @@ class Header extends React.Component {
224233
<Nav>
225234
<NavItem>
226235
<NavLink className={`d-md-down-none ${s.toggleSidebar}`} id="toggleSidebar" onClick={this.toggleSidebar}>
227-
<i className={`la la-bars ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}/>
236+
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
237+
<MenuIcon maskId={1001}/>
238+
</span>
228239
</NavLink>
229240
<UncontrolledTooltip placement="bottom" target="toggleSidebar">
230241
Turn on/off<br />sidebar<br />collapsing
231242
</UncontrolledTooltip>
232243
<NavLink className="fs-lg d-lg-none" onClick={this.switchSidebar}>
233244
<span
234-
className={`rounded rounded-lg d-md-none d-sm-down-block`}>
235-
<i
236-
className="la la-bars"
245+
className={`rounded rounded-lg d-md-none d-sm-down-block`} style={{marginTop: 7}}>
246+
<span
247+
className={`${s.headerSvgFlipColor}`}
237248
style={{fontSize: 30, color: navbarColor === "#ffffff"
238249
? "#ffffff"
239250
: chroma(navbarColor).luminance() < 0.4 ? "#ffffff" : ""}}
240-
/>
251+
><MenuIcon maskId={1000}/></span>
252+
</span>
253+
<span className={`ml-3 d-sm-down-none ${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
254+
<MenuIcon maskId={999}/>
241255
</span>
242-
<i className={`la la-bars ml-3 d-sm-down-none ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}/>
243256
</NavLink>
244257
</NavItem>
245258
<NavItem className="d-sm-down-none">
246259
<NavLink className="px-2">
247-
<i className={`la la-refresh ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}/>
260+
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
261+
<FlipIcon />
262+
</span>
248263
</NavLink>
249264
</NavItem>
250265
<NavItem className="d-sm-down-none">
251266
<NavLink className="px-2">
252-
<i className={`la la-times ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`} />
267+
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
268+
<CloseIcon />
269+
</span>
253270
</NavLink>
254271
</NavItem>
255272

@@ -261,14 +278,14 @@ class Header extends React.Component {
261278
cx('input-group-no-border', {'focus' : !!focus})
262279
}>
263280
<InputGroupAddon addonType="prepend">
264-
<i className="la la-search" />
281+
<span className={`${s.headerSvgFlipColor}`}><SearchIcon /></span>
265282
</InputGroupAddon>
266283
<Input id="search-input" placeholder="Search Dashboard" className={cx({'focus' : !!focus})} />
267284
</InputGroup>
268285
</FormGroup>
269286
</Form>
270287

271-
<NavLink className={`${s.navbarBrand} d-md-none ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}>
288+
<NavLink className={`${s.navbarBrand} d-md-none ${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : ""}`}>
272289
<i className="fa fa-circle text-primary mr-n-sm" />
273290
<i className="fa fa-circle text-danger" />
274291
&nbsp;
@@ -280,7 +297,7 @@ class Header extends React.Component {
280297

281298
<Nav className="ml-auto">
282299
<Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu}`}>
283-
<DropdownToggle nav caret className={`${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}>
300+
<DropdownToggle nav caret className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : ""}`}>
284301
<span className={`${s.avatar} rounded-circle float-left mr-2`}>
285302
{avatar ? (
286303
<img src={avatar} onError={e => e.target.src = adminDefault} alt="..." title={user && (user.firstName || user.email)} />
@@ -289,7 +306,7 @@ class Header extends React.Component {
289306
) : <span title={user && (user.firstName || user.email)}>{firstUserLetter}</span>
290307
}
291308
</span>
292-
<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>
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>
293310
<span className="ml-1 circle bg-primary text-white fw-bold d-sm-down-none">13</span>
294311
</DropdownToggle>
295312
<DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
@@ -298,15 +315,17 @@ class Header extends React.Component {
298315
</Dropdown>
299316
<Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="tutorial-dropdown pr-4">
300317
<DropdownToggle nav className={`${s.mobileCog}`}>
301-
<i className={`la la-cog ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`} />
318+
<span className={`${chroma(navbarColor).luminance() < 0.4 ? `${s.headerSvgFlipColor}` : "text-dark"}`}>
319+
<SettingsIcon/>
320+
</span>
302321
</DropdownToggle>
303-
<DropdownMenu right className={`super-colors`}>
304-
<DropdownItem href="http://demo-flatlogic2.herokuapp.com/sing-app-react/#/app/profile"><i className="la la-user" /> My Account</DropdownItem>
322+
<DropdownMenu right className={`${s.headerDropdownLinks} super-colors`}>
323+
<DropdownItem href="http://demo-flatlogic2.herokuapp.com/sing-app-react/#/app/profile"><span className={s.headerDropdownIcon}><PersonIcon/></span> My Account</DropdownItem>
305324
<DropdownItem divider />
306-
<DropdownItem href="http://demo-flatlogic2.herokuapp.com/sing-app-react/#/app/extra/calendar">Calendar</DropdownItem>
307-
<DropdownItem href="http://demo-flatlogic2.herokuapp.com/sing-app-react/#/app/inbox">Inbox &nbsp;&nbsp;<Badge color="danger" pill className="animated bounceIn">9</Badge></DropdownItem>
325+
<DropdownItem href="http://demo-flatlogic2.herokuapp.com/sing-app-react/#/app/extra/calendar"><span className={s.headerDropdownIcon}><CalendarIcon/></span>Calendar</DropdownItem>
326+
<DropdownItem href="http://demo-flatlogic2.herokuapp.com/sing-app-react/#/app/inbox"><span className={s.headerDropdownIcon}><EmailIcon/></span>Inbox &nbsp;&nbsp;</DropdownItem>
308327
<DropdownItem divider />
309-
<DropdownItem onClick={this.doLogout}><i className="la la-sign-out" /> Log Out</DropdownItem>
328+
<DropdownItem onClick={this.doLogout}><span className={s.headerDropdownIcon}><PowerIcon/></span> Log Out</DropdownItem>
310329
</DropdownMenu>
311330
</Dropdown>
312331
</Nav>

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

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
}
3030

3131
.input-group-prepend {
32-
background-color: #fff;
32+
background-color: var(--input-bg);
3333
transition: background-color ease-in-out 0.15s;
3434
border-top-left-radius: 0.3rem;
3535
border-bottom-left-radius: 0.3rem;
@@ -38,9 +38,16 @@
3838
align-items: center;
3939
width: 35px;
4040
}
41+
.form-control {
42+
background-color: var(--input-bg);
43+
color: var(--input-color);
44+
&.focus {
45+
background-color: var(--input-bg);
46+
}
47+
}
4148

4249
.focus .input-group-prepend {
43-
background: #f8f9fa;
50+
background-color: var(--input-bg);
4451
}
4552
}
4653
}
@@ -178,6 +185,30 @@
178185
}
179186
}
180187

188+
.headerSvgFlipColor {
189+
display: flex;
190+
color: var(--navbar-icon-bg);
191+
:global {
192+
.bg-primary {
193+
background-color: var(--navbar-icon-bg)!important;
194+
}
195+
}
196+
}
197+
198+
.headerDropdownLinks{
199+
color: inherit;
200+
& > a, & > button {
201+
display: flex;
202+
padding: 15px 8px;
203+
}
204+
}
205+
206+
.headerDropdownIcon {
207+
display: flex;
208+
margin-right: 8px;
209+
color: var(--sidebar-icon-bg);
210+
}
211+
181212
.toggleSidebar {
182213
margin-left: 30px;
183214
}

‎src/components/Layout/Layout.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ class Layout extends React.Component {
122122
!this.props.sidebarOpened ? s.sidebarClose : '',
123123
'sing-dashboard',
124124
`dashboard-${(localStorage.getItem("sidebarType") === SidebarTypes.TRANSPARENT) ? "light" : localStorage.getItem("dashboardTheme")}`,
125+
`header-${localStorage.getItem("navbarColor").replace('#', '')}`
125126
].join(' ')}
126127
>
127128
<Sidebar />
@@ -223,6 +224,7 @@ function mapStateToProps(store) {
223224
sidebarOpened: store.navigation.sidebarOpened,
224225
sidebarStatic: store.navigation.sidebarStatic,
225226
dashboardTheme: store.layout.dashboardTheme,
227+
navbarColor: store.layout.navbarColor,
226228
sidebarType: store.layout.sidebarType,
227229
currentUser: store.auth.currentUser,
228230
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ class LinksGroup extends Component {
7474
target={this.props.target}
7575
>
7676
<span className={classnames('icon', s.icon)}>
77-
<i className={`fi ${this.props.iconName}`} />
77+
{this.props.iconElement ? this.props.iconElement : <i className={`fi ${this.props.iconName}`} />}
7878
</span>
7979
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerUpdate} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
8080
{this.props.badge && <Badge className={s.badge} pill>9</Badge>}
@@ -115,7 +115,7 @@ class LinksGroup extends Component {
115115
>
116116
{this.props.isHeader ?
117117
<span className={classnames('icon', s.icon)}>
118-
<i className={`fi ${this.props.iconName}`} />
118+
{this.props.iconElement ? this.props.iconElement : <i className={`fi ${this.props.iconName}`} />}
119119
</span> : null
120120
}
121121
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode} ml-1 text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}

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

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
a {
1111
display: block;
1212
color: var(--sidebar-color);
13+
transition: all .35s ease;
1314
text-decoration: none;
1415
cursor: pointer;
1516

@@ -45,14 +46,20 @@
4546

4647
.icon {
4748
font-size: $font-size-larger;
48-
display: block;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
transition: all .35s ease;
53+
color: var(--sidebar-icon-bg);
54+
background-color: transparent;
4955
position: absolute;
5056
top: 3px;
5157
left: 11px;
5258
width: 28px;
5359
height: 28px;
5460
line-height: 28px;
5561
text-align: center;
62+
border-radius: 0;
5663
opacity: .7;
5764

5865
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
@@ -79,20 +86,24 @@
7986
.headerUpdate {
8087
color: var(--update-notification)
8188
}
82-
89+
8390
a.headerLinkActive {
8491
color: var(--sidebar-item-active-color);
85-
font-weight: $font-weight-normal;
86-
92+
font-weight: $font-weight-bold;
93+
8794
&:hover {
88-
color: var(--sidebar-item-active-color);
95+
color: var(--sidebar-icon-bg);
8996
}
9097

9198
.icon {
9299
border-radius: 50%;
93-
background-color: var(--sidebar-item-active-color);
100+
background-color: var(--sidebar-icon-bg);
94101
opacity: 1;
95-
102+
display: flex;
103+
justify-content: center;
104+
transform: rotate(360deg);
105+
align-items: center;
106+
color: var(--sidebar-bg-color);
96107
i {
97108
color: var(--sidebar-bg-color);
98109
}
@@ -113,8 +124,9 @@
113124
display: flex;
114125
align-items: center;
115126
margin-left: auto;
127+
font-size: 19px;
116128
margin-right: 15px;
117-
129+
color: var(--sidebar-icon-bg);;
118130
@include transition(transform 0.3s ease-in-out);
119131
}
120132

0 commit comments

Comments
 (0)