Skip to content

Commit 07761c6

Browse files
guardofparadiseguardofparadise
committed
updated icons
1 parent add4f6f commit 07761c6

34 files changed

+712
-57
lines changed

‎changelog.md‎

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

3+
## [1.3.0] 04/14/2021
4+
5+
- Updated customization component
6+
- Added new colors to theme-variables
7+
- Added brand new icons
8+
- Updated icons for sidebar
9+
- Updated icons for navbar
10+
- Added link to flatlogic forum
11+
312
## [1.2.2]
413

514
- Updated documentation

‎src/components/Header/Header.js‎

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@ import { logoutUser } from 'actions/auth';
2626
import { toggleSidebar, openSidebar, closeSidebar, changeActiveSidebarItem } from '../../actions/navigation';
2727

2828
import adminDefault from '../../images/people/chat2.png';
29+
import MenuIcon from '../../images/sidebar/Fill/MenuIcon';
30+
import FlipIcon from '../../images/sidebar/Outline/Flip';
31+
import CloseIcon from '../../images/sidebar/Fill/CloseIconOne';
32+
import SearchIcon from '../../images/sidebar/Outline/Search';
33+
import SettingsIcon from '../../images/sidebar/Outline/Settings';
34+
import PersonIcon from '../../images/sidebar/Outline/Person';
35+
import PowerIcon from '../../images/sidebar/Outline/Power';
2936
import s from './Header.module.scss';
3037

3138
class Header extends React.Component {
@@ -105,27 +112,44 @@ class Header extends React.Component {
105112

106113
return (
107114
<Navbar className={`${s.root} d-print-none ${navbarType === NavbarTypes.FLOATING ? s.navbarFloatingType : ''}`} style={{backgroundColor: navbarColor, zIndex: !openUsersList ? 100 : 0}}>
108-
<Nav>
115+
<Nav>
109116
<NavItem>
110-
<NavLink className="d-md-down-none ml-5" id="toggleSidebar" onClick={this.toggleSidebar}>
111-
<i className={`la la-bars ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}/>
117+
<NavLink className={`d-md-down-none ml-5 ${s.toggleSidebar}`} id="toggleSidebar" onClick={this.toggleSidebar}>
118+
<span className={s.headerSvgFlipColor}>
119+
<MenuIcon maskId={1001}/>
120+
</span>
112121
</NavLink>
113122
<UncontrolledTooltip placement="bottom" target="toggleSidebar">
114123
Turn on/off<br />sidebar<br />collapsing
115124
</UncontrolledTooltip>
116125
<NavLink className="fs-lg d-lg-none" onClick={this.switchSidebar}>
117-
<span
118-
className={`rounded rounded-lg d-md-none d-sm-down-block`}>
119-
<i
120-
className="la la-bars"
121-
style={{fontSize: 30, color: navbarColor === "#ffffff"
122-
? "#ffffff"
123-
: chroma(navbarColor).luminance() < 0.4 ? "#ffffff" : ""}}
124-
/>
126+
<span
127+
className={`rounded rounded-lg d-md-none d-sm-down-block`} style={{marginTop: 7}}>
128+
<span
129+
className={s.headerSvgFlipColor}
130+
style={{fontSize: 30}}
131+
><MenuIcon maskId={1000}/></span>
132+
</span>
133+
<span className={`ml-3 d-sm-down-none ${s.headerSvgFlipColor}`}>
134+
<MenuIcon maskId={999}/>
135+
</span>
136+
</NavLink>
137+
</NavItem>
138+
<NavItem className="d-sm-down-none">
139+
<NavLink className="px-2">
140+
<span className={s.headerSvgFlipColor}>
141+
<FlipIcon />
125142
</span>
126-
<i className={`la la-bars ml-3 d-sm-down-none ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}/>
127143
</NavLink>
128144
</NavItem>
145+
<NavItem className="d-sm-down-none">
146+
<NavLink className="px-2">
147+
<span className={s.headerSvgFlipColor}>
148+
<CloseIcon />
149+
</span>
150+
</NavLink>
151+
</NavItem>
152+
129153
</Nav>
130154

131155
<Form className={`d-sm-down-none ml-5 ${s.headerSearchInput}`} inline>
@@ -134,14 +158,14 @@ class Header extends React.Component {
134158
cx('input-group-no-border', {'focus' : !!focus})
135159
}>
136160
<InputGroupAddon addonType="prepend">
137-
<i className="la la-search" />
161+
<span className={`${s.headerSvgFlipColor}`}><SearchIcon /></span>
138162
</InputGroupAddon>
139163
<Input id="search-input" placeholder="Search Dashboard" className={cx({'focus' : !!focus})} />
140164
</InputGroup>
141165
</FormGroup>
142166
</Form>
143167

144-
<NavLink className={`${s.navbarBrand} d-md-none ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}>
168+
<NavLink className={`${s.navbarBrand} d-md-none ${s.headerSvgFlipColor}`}>
145169
<i className="la la-circle text-primary mr-n-sm" />
146170
<i className="la la-circle text-danger" />
147171
&nbsp;
@@ -164,12 +188,14 @@ class Header extends React.Component {
164188
<span className={`d-sm-down-none ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}>{user && (user.firstName || user.email)}</span>
165189
</NavbarText>
166190
<Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="tutorial-dropdown pr-4">
167-
<DropdownToggle nav>
168-
<i className={`la la-cog ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`} />
191+
<DropdownToggle nav className={`${s.mobileCog}`}>
192+
<span className={`${s.headerSvgFlipColor}`}>
193+
<SettingsIcon/>
194+
</span>
169195
</DropdownToggle>
170-
<DropdownMenu right className={`super-colors`}>
171-
<DropdownItem href="/#/app/profile"><i className="la la-user" /> My Account</DropdownItem>
172-
<DropdownItem onClick={this.doLogout}><i className="la la-sign-out" /> Log Out</DropdownItem>
196+
<DropdownMenu right className={`${s.headerDropdownLinks} super-colors`}>
197+
<DropdownItem href="/#/app/profile"><span className={s.headerDropdownIcon}><PersonIcon/></span> My Account</DropdownItem>
198+
<DropdownItem onClick={this.doLogout}><span className={s.headerDropdownIcon}><PowerIcon/></span> Log Out</DropdownItem>
173199
</DropdownMenu>
174200
</Dropdown>
175201
</Nav>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,36 @@
4646
}
4747
}
4848

49+
.headerDropdownLinks{
50+
color: inherit;
51+
& > a, & > button {
52+
display: flex;
53+
padding: 18px 22px;
54+
}
55+
}
56+
57+
.headerDropdownIcon {
58+
display: flex;
59+
margin-right: 8px;
60+
color: var(--sidebar-icon-bg);
61+
}
62+
63+
.headerSvgFlipColor {
64+
display: flex;
65+
color: var(--navbar-icon-bg);
66+
:global {
67+
.bg-primary {
68+
background-color: var(--navbar-icon-bg)!important;
69+
}
70+
}
71+
}
72+
73+
.mobileCog {
74+
@include media-breakpoint-down(sm) {
75+
padding: 0.5rem 0!important;
76+
}
77+
}
78+
4979
.logo {
5080
font-size: 16px;
5181
}

‎src/components/Helper/Helper.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,15 +124,15 @@ class Helper extends Component {
124124
<Button
125125
href="https://react-user-management.herokuapp.com/#/documentation/getting-started/overview"
126126
target="_blank"
127-
className="btn-rounded-f btn-block fs-mini text-white"
127+
className="btn-rounded-f btn-block fs-mini text-white mt-4"
128128
color="primary"
129129
>
130130
Documentation
131131
</Button>
132132
</div>
133133
<div className="d-flex justify-content-between mt-lg">
134134
<Button
135-
href="https://flatlogic.com/contact"
135+
href="https://flatlogic.com/forum"
136136
target="_blank"
137137
className="btn-outline-default btn-rounded-f fs-mini text-muted px-2"
138138
>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@ class LinksGroup extends Component {
7474
target={this.props.target}
7575
>
7676
<span className={classnames('icon', s.icon)}>
77-
<i className={`la ${this.props.iconName}`} />
77+
{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
);
@@ -115,11 +115,11 @@ 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
}
121-
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode} ml-1 text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
122-
<b className={['la la-angle-left', s.caret].join(' ')} />
121+
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerNode}`}>{this.props.label}</sup>}
122+
<b className={['fa fa-angle-left', s.caret].join(' ')} />
123123
</a>
124124
{/* eslint-enable */}
125125
<Collapse className={s.panel} isOpen={isOpen}>

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

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22

33
.headerLink {
44
overflow-x: hidden;
5-
5+
66
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
77
font-size: 13px;
88
}
99

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: unset;
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) {
@@ -65,34 +72,39 @@
6572
line-height: 8px;
6673
margin-top: 9px;
6774
margin-right: 15px;
68-
background: $blue;
69-
color: var(--badge-item-color);
75+
background: var(--sidebar-icon-bg);
76+
color: var(--sidebar-badge-color);
7077
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
7178
margin-top: 16px;
7279
}
7380
}
7481

7582
.headerNode {
76-
color: var(--important-notification)
83+
color: var(--sidebar-hightlight-two)
7784
}
7885

7986
.headerUpdate {
80-
color: var(--update-notification)
87+
color: var(--sidebar-hightlight)
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+
white-space: nowrap;
94+
8795
&:hover {
88-
color: var(--sidebar-item-active-color);
96+
color: var(--sidebar-icon-bg);
8997
}
9098

9199
.icon {
92100
border-radius: 50%;
93-
background-color: var(--sidebar-item-active-color);
101+
background-color: var(--sidebar-icon-bg);
94102
opacity: 1;
95-
103+
display: flex;
104+
justify-content: center;
105+
transform: rotate(360deg);
106+
align-items: center;
107+
color: var(--sidebar-bg-color);
96108
i {
97109
color: var(--sidebar-bg-color);
98110
}
@@ -113,8 +125,9 @@
113125
display: flex;
114126
align-items: center;
115127
margin-left: auto;
128+
font-size: 19px;
116129
margin-right: 15px;
117-
130+
color: var(--sidebar-icon-bg);;
118131
@include transition(transform 0.3s ease-in-out);
119132
}
120133

‎src/components/Sidebar/Sidebar.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../../action
88
import isScreen from '../../core/screenHelper';
99
import { logoutUser } from 'actions/auth';
1010

11+
import HomeIcon from '../../images/sidebar/Outline/Home';
12+
import FileTextIcon from '../../images/sidebar/Outline/FileText';
13+
import GridIcon from '../../images/sidebar/Outline/Grid';
14+
import LayoutIcon from '../../images/sidebar/Outline/Layout';
15+
import PersonIcon from '../../images/sidebar/Outline/Person';
16+
17+
1118
class Sidebar extends React.Component {
1219
static propTypes = {
1320
sidebarStatic: PropTypes.bool,
@@ -72,6 +79,7 @@ class Sidebar extends React.Component {
7279
link="/app/dashboard"
7380
isHeader
7481
iconName="la-home"
82+
iconElement={<HomeIcon />}
7583
className="tour_item_home"
7684
/>
7785

@@ -83,6 +91,7 @@ class Sidebar extends React.Component {
8391
link="/admin/users"
8492
isHeader
8593
iconName="la-users"
94+
iconElement={<GridIcon />}
8695
className="tour_item_users"
8796
/>
8897
}
@@ -93,6 +102,7 @@ class Sidebar extends React.Component {
93102
header="My Profile"
94103
link="/app/profile"
95104
isHeader
105+
iconElement={<PersonIcon />}
96106
iconName="la-user"
97107
className="tour_item_user"
98108
/>
@@ -101,6 +111,7 @@ class Sidebar extends React.Component {
101111
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
102112
activeItem={this.props.activeItem}
103113
header="Change Password"
114+
iconElement={<FileTextIcon />}
104115
link="/app/password"
105116
isHeader
106117
iconName="la-key"
@@ -114,6 +125,7 @@ class Sidebar extends React.Component {
114125
link="/documentation"
115126
isHeader
116127
iconName="la-book"
128+
iconElement={<LayoutIcon />}
117129
index="documentation"
118130
labelColor="success"
119131
target="_blank"

‎src/images/sidebar/Fill/ArrowDown.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
const ArrowDown = () => (
4+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path fillRule="evenodd" clipRule="evenodd" d="M7.99998 10.6667C7.84798 10.6667 7.69665 10.6153 7.57331 10.512L3.57331 7.17867C3.29065 6.94333 3.25198 6.52267 3.48798 6.24C3.72331 5.95733 4.14331 5.91933 4.42665 6.15467L8.00731 9.13867L11.582 6.262C11.8686 6.03133 12.2886 6.07667 12.5193 6.36333C12.75 6.65 12.7046 7.06933 12.418 7.30067L8.41798 10.5193C8.29598 10.6173 8.14798 10.6667 7.99998 10.6667Z" fill="currentColor"/>
6+
<mask id="mask119" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="6" width="10" height="5">
7+
<path fillRule="evenodd" clipRule="evenodd" d="M7.99998 10.6667C7.84798 10.6667 7.69665 10.6153 7.57331 10.512L3.57331 7.17867C3.29065 6.94333 3.25198 6.52267 3.48798 6.24C3.72331 5.95733 4.14331 5.91933 4.42665 6.15467L8.00731 9.13867L11.582 6.262C11.8686 6.03133 12.2886 6.07667 12.5193 6.36333C12.75 6.65 12.7046 7.06933 12.418 7.30067L8.41798 10.5193C8.29598 10.6173 8.14798 10.6667 7.99998 10.6667Z" fill="white"/>
8+
</mask>
9+
<g mask="url(#mask119)">
10+
<rect width="16" height="16" fill="currentColor"/>
11+
</g>
12+
</svg>
13+
)
14+
15+
16+
export default ArrowDown

0 commit comments

Comments
 (0)