Skip to content

Commit e25cb6f

Browse files
guardofparadiseguardofparadise
guardofparadise
authored and
guardofparadise
committed
2 parents 67cbe51 + 18b5816 commit e25cb6f

38 files changed

+743
-67
lines changed

‎changelog.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
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+
12+
## [1.2.2]
13+
14+
- Updated documentation
15+
316
# Improvement
417

518
## [1.2.1]

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5+
<meta name="referrer" content="no-referrer-when-downgrade">
56
<link
67
rel="shortcut icon"
78
href="%PUBLIC_URL%/favicon.ico"

‎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"

0 commit comments

Comments
 (0)