Skip to content

Commit 39f6f79

Browse files
guardofparadiseguardofparadise
authored
Merge pull request #13 from flatlogic/colors_update
Colors update
2 parents 0fc0861 + e6c1ef3 commit 39f6f79

File tree

84 files changed

+864
-486
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+864
-486
lines changed

‎src/components/Header/Header.js

Lines changed: 50 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,16 @@ import {
2323
Form,
2424
FormGroup,
2525
} from 'reactstrap';
26+
import Notifications from '../Notifications';
2627
import { logoutUser } from '../../actions/user';
2728
import { openSidebar, closeSidebar, changeSidebarPosition, changeSidebarVisibility } from '../../actions/navigation';
2829

2930
import sender1 from '../../images/1.png';
3031
import sender2 from '../../images/2.png';
3132
import sender3 from '../../images/3.png';
3233

34+
import avatar from '../../images/people/a5.jpg';
35+
3336
import s from './Header.module.scss';
3437

3538
class Header extends React.Component {
@@ -57,9 +60,16 @@ class Header extends React.Component {
5760
settingsOpen: false,
5861
searchFocused: false,
5962
searchOpen: false,
63+
notificationsOpen: false
6064
};
6165
}
6266

67+
toggleNotifications = () => {
68+
this.setState({
69+
notificationsOpen: !this.state.notificationsOpen,
70+
});
71+
}
72+
6373
onDismiss() {
6474
this.setState({ visible: false });
6575
}
@@ -116,7 +126,7 @@ class Header extends React.Component {
116126
render() {
117127
return (
118128
<Navbar className={`d-print-none ${s.root}`}>
119-
<UncontrolledAlert className={`${s.alert} mr-3`}>
129+
<UncontrolledAlert className={`${s.alert} mr-3 d-lg-down-none`}>
120130
<i className="fa fa-info-circle mr-1" /> Check out Light Blue <button className="btn-link" onClick={() => this.setState({ settingsOpen: true })}>settings</button> on
121131
the right!
122132
</UncontrolledAlert>
@@ -130,7 +140,7 @@ class Header extends React.Component {
130140
/>
131141
</InputGroup>
132142
</Collapse>
133-
<Form className="d-sm-down-none mr-3 ml-3" inline>
143+
<Form className="d-md-down-none mr-3 ml-3" inline>
134144
<FormGroup>
135145
<InputGroup className="input-group-no-border">
136146
<InputGroupAddon addonType="prepend">
@@ -140,14 +150,27 @@ class Header extends React.Component {
140150
</InputGroup>
141151
</FormGroup>
142152
</Form>
153+
143154
<Nav className="ml-md-0">
144-
<NavItem className="d-md-none">
155+
<Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu}`}>
156+
<DropdownToggle nav caret style={{color: "#f4f4f5", padding: 0}}>
157+
<span className={`${s.avatar} rounded-circle thumb-sm float-left mr-2`}>
158+
<img src={avatar} alt="..."/>
159+
</span>
160+
<span className={`small ${s.accountCheck}`}>Philip smith</span>
161+
<Badge className={s.badge} color="primary">13</Badge>
162+
</DropdownToggle>
163+
<DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
164+
<Notifications />
165+
</DropdownMenu>
166+
</Dropdown>
167+
<NavItem className="d-lg-none d-md-block">
145168
<NavLink onClick={this.toggleSearchOpen} className={s.navItem} href="#">
146-
<i className="glyphicon glyphicon-search" />
169+
<i className="glyphicon glyphicon-search text-white" />
147170
</NavLink>
148171
</NavItem>
149172
<Dropdown nav isOpen={this.state.messagesOpen} toggle={this.toggleMessagesDropdown}>
150-
<DropdownToggle nav className={s.navItem}>
173+
<DropdownToggle nav className={`${s.navItem} text-white`}>
151174
<i className="glyphicon glyphicon-comments" />
152175
</DropdownToggle>
153176
<DropdownMenu className={`${s.dropdownMenu} ${s.messages}`}>
@@ -186,8 +209,26 @@ class Header extends React.Component {
186209
</DropdownItem>
187210
</DropdownMenu>
188211
</Dropdown>
212+
<NavItem className={`${s.divider} text-white`} />
213+
<Dropdown nav isOpen={this.state.settingsOpen} toggle={this.toggleSettingsDropdown}>
214+
<DropdownToggle nav className={`${s.navItem} text-white`}>
215+
<i className="glyphicon glyphicon-cog" />
216+
</DropdownToggle>
217+
<DropdownMenu className={`${s.dropdownMenu} ${s.settings}`}>
218+
<h6>Sidebar on the</h6>
219+
<ButtonGroup size="sm">
220+
<Button color="dark" onClick={() => this.moveSidebar('left')} className={this.props.sidebarPosition === 'left' ? 'active' : ''}>Left</Button>
221+
<Button color="dark" onClick={() => this.moveSidebar('right')} className={this.props.sidebarPosition === 'right' ? 'active' : ''}>Right</Button>
222+
</ButtonGroup>
223+
<h6 className="mt-2">Sidebar</h6>
224+
<ButtonGroup size="sm">
225+
<Button color="dark" onClick={() => this.toggleVisibilitySidebar('show')} className={this.props.sidebarVisibility === 'show' ? 'active' : ''}>Show</Button>
226+
<Button color="dark" onClick={() => this.toggleVisibilitySidebar('hide')} className={this.props.sidebarVisibility === 'hide' ? 'active' : ''}>Hide</Button>
227+
</ButtonGroup>
228+
</DropdownMenu>
229+
</Dropdown>
189230
<Dropdown nav isOpen={this.state.supportOpen} toggle={this.toggleSupportDropdown}>
190-
<DropdownToggle nav className={s.navItem}>
231+
<DropdownToggle nav className={`${s.navItem} text-white`}>
191232
<i className="glyphicon glyphicon-globe" />
192233
<span className={s.count}>8</span>
193234
</DropdownToggle>
@@ -230,60 +271,13 @@ class Header extends React.Component {
230271
</DropdownItem>
231272
</DropdownMenu>
232273
</Dropdown>
233-
<NavItem className={s.divider} />
234-
<Dropdown nav isOpen={this.state.settingsOpen} toggle={this.toggleSettingsDropdown} className="d-none d-md-block">
235-
<DropdownToggle nav className={s.navItem}>
236-
<i className="glyphicon glyphicon-cog" />
237-
</DropdownToggle>
238-
<DropdownMenu className={`${s.dropdownMenu} ${s.settings}`}>
239-
<h6>Sidebar on the</h6>
240-
<ButtonGroup size="sm">
241-
<Button color="dark" onClick={() => this.moveSidebar('left')} className={this.props.sidebarPosition === 'left' ? 'active' : ''}>Left</Button>
242-
<Button color="dark" onClick={() => this.moveSidebar('right')} className={this.props.sidebarPosition === 'right' ? 'active' : ''}>Right</Button>
243-
</ButtonGroup>
244-
<h6 className="mt-2">Sidebar</h6>
245-
<ButtonGroup size="sm">
246-
<Button color="dark" onClick={() => this.toggleVisibilitySidebar('show')} className={this.props.sidebarVisibility === 'show' ? 'active' : ''}>Show</Button>
247-
<Button color="dark" onClick={() => this.toggleVisibilitySidebar('hide')} className={this.props.sidebarVisibility === 'hide' ? 'active' : ''}>Hide</Button>
248-
</ButtonGroup>
249-
</DropdownMenu>
250-
</Dropdown>
251-
<Dropdown isOpen={this.state.accountOpen} toggle={this.toggleAccountDropdown} className="d-none d-md-block">
252-
<DropdownToggle nav className={s.navItem}>
253-
<i className="glyphicon glyphicon-user" />
254-
</DropdownToggle>
255-
<DropdownMenu right className={`${s.dropdownMenu} ${s.account}`}>
256-
<section>
257-
<img src={sender1} alt="" className={s.imageAccount} />
258-
<span className="text-white">Philip Daineka</span>
259-
</section>
260-
<DropdownItem>
261-
<NavLink href="/#/app/profile">
262-
<i className="fa fa-user fa-fw" />
263-
Profile
264-
</NavLink>
265-
</DropdownItem>
266-
<DropdownItem>
267-
<NavLink href="/#/app/extra/calendar">
268-
<i className="fa fa-calendar fa-fw" />
269-
Calendar
270-
</NavLink>
271-
</DropdownItem>
272-
<DropdownItem>
273-
<NavLink href="/#/app/inbox">
274-
<i className="fa fa-inbox fa-fw" />
275-
Inbox
276-
</NavLink>
277-
</DropdownItem>
278-
</DropdownMenu>
279-
</Dropdown>
280-
<NavItem className="d-none d-md-block">
281-
<NavLink onClick={this.doLogout} className={s.navItem} href="#">
274+
<NavItem>
275+
<NavLink onClick={this.doLogout} className={`${s.navItem} text-white`} href="#">
282276
<i className="glyphicon glyphicon-off" />
283277
</NavLink>
284278
</NavItem>
285279
<NavItem className="d-md-none">
286-
<NavLink onClick={this.toggleSidebar} className={s.navItem} href="#">
280+
<NavLink onClick={this.toggleSidebar} className={`${s.navItem} text-white`} href="#">
287281
<i className="fa fa-bars" />
288282
</NavLink>
289283
</NavItem>

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

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
margin-bottom: 50px;
77
}
88

9+
ul > li > a {
10+
padding: 0.5rem 0.5rem
11+
}
12+
913
:global {
1014
.alert {
1115
width: 265px;
@@ -57,6 +61,8 @@
5761
color: $white;
5862
}
5963

64+
65+
6066
@media (max-width: breakpoint-max(sm)) {
6167
top: 10px;
6268
left: 15px;
@@ -129,12 +135,11 @@
129135
.divider {
130136
display: block;
131137
width: 1px;
132-
margin: 0 20px;
133-
background: linear-gradient(rgba($text-transparent, 0), $text-transparent, rgba($gray-600, 0));
138+
margin: 10px 20px;
139+
background: $white;
134140
}
135141

136142
.navItem {
137-
color: $text-transparent;
138143
font-size: 1.5rem;
139144
outline: 0;
140145
text-align: center;
@@ -162,7 +167,9 @@
162167
}
163168

164169
.dropdownMenu {
165-
background: rgba(51,51,51,.85) !important;
170+
background: $main-gradient !important;
171+
box-shadow: 0 0px 40px 2px rgba(#020202,.5);
172+
border: none;
166173
color: $white;
167174

168175
@media (max-width: breakpoint-max(xs)) {
@@ -290,3 +297,47 @@
290297
padding: 2px 4px;
291298
border-radius: 10px;
292299
}
300+
301+
.notificationsMenu {
302+
> a {
303+
background-color: transparent!important;
304+
}
305+
306+
:global .dropdown-menu {
307+
left: auto !important;
308+
right: 0 !important;
309+
top: $navbar-height !important;
310+
}
311+
312+
@media(max-width: 580px) {
313+
:global .dropdown-menu {
314+
right: -50% !important;
315+
}
316+
}
317+
}
318+
319+
.accountCheck {
320+
color: $text-color
321+
}
322+
323+
.notificationsWrapper {
324+
width: min-content;
325+
}
326+
327+
.avatar {
328+
display: flex;
329+
align-items: center;
330+
justify-content: center;
331+
overflow: hidden;
332+
height: 40px;
333+
width: 40px;
334+
background: $blue;
335+
font-weight: 600;
336+
font-size: 18px;
337+
}
338+
339+
.badge {
340+
margin-left: 5px;
341+
margin-right: 5px;
342+
border-radius: 10px
343+
}

‎src/components/Notifications/Notifications.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@ class Notifications extends React.Component {
6060
break;
6161
}
6262
return (
63-
<section className={`${s.notifications} card navbar-notifications`}>
63+
<section className={`${s.notifications} navbar-notifications`}>
6464
<header className={[s.cardHeader, 'card-header'].join(' ')}>
6565
<div className="text-center mb-sm">
6666
<strong>You have 13 notifications</strong>
6767
</div>
68-
<ButtonGroup id="notification-buttons">
69-
<Button color="secondary" onClick={() => this.changeNotificationsTab(1)} active={this.state.notificationsTabSelected === 1}>Notifications</Button>
70-
<Button color="secondary" onClick={() => this.changeNotificationsTab(2)} active={this.state.notificationsTabSelected === 2}>Messages</Button>
71-
<Button color="secondary" onClick={() => this.changeNotificationsTab(3)} active={this.state.notificationsTabSelected === 3}>Progress</Button>
68+
<ButtonGroup className={s.notificationButtons}>
69+
<Button outline color="default" size="sm" className={s.notificationButton} onClick={() => this.changeNotificationsTab(1)} active={this.state.notificationsTabSelected === 1}>Notifications</Button>
70+
<Button outline color="default" size="sm" className={s.notificationButton} onClick={() => this.changeNotificationsTab(2)} active={this.state.notificationsTabSelected === 2}>Messages</Button>
71+
<Button outline color="default" size="sm" className={s.notificationButton} onClick={() => this.changeNotificationsTab(3)} active={this.state.notificationsTabSelected === 3}>Progress</Button>
7272
</ButtonGroup>
7373
</header>
7474
{this.state.newNotifications || notificationsTab}

‎src/components/Notifications/Notifications.module.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
@include media-breakpoint-up(md) {
55
width: 333px;
66
}
7-
7+
background: $main-gradient;
8+
box-shadow: 0 0px 40px 2px rgba(#020202,.5);
9+
border-radius: $border-radius;
810
height: 100%;
911
border: none;
1012
}
@@ -13,6 +15,13 @@
1315
border-radius: 0;
1416
}
1517

18+
.notificationButtons {
19+
display: flex;
20+
.notificationButton {
21+
flex: 1 1;
22+
}
23+
}
24+
1625
.cardFooter {
1726
padding-top: 14px;
1827
padding-bottom: 14px;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ class LinksGroup extends Component {
7676
<i className={`fi ${this.props.iconName}`} />
7777
</span>
7878
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
79-
{this.props.badge && <Badge className={s.badge} color="warning" pill>9</Badge>}
79+
{this.props.badge && <Badge className={s.badge} color="primary" pill>9</Badge>}
8080
</NavLink>
8181
</li>
8282
);

‎src/components/Sidebar/Sidebar.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ class Sidebar extends React.Component {
153153
index="documentation"
154154
label="new"
155155
target="_blank"
156+
labelColor="success"
156157
/>
157158
<h5 className={[s.navTitle, s.groupTitle].join(' ')}>TEMPLATE</h5>
158159
<LinksGroup
@@ -409,13 +410,13 @@ class Sidebar extends React.Component {
409410
<ul className={s.sidebarLabels}>
410411
<li>
411412
<a href="#">
412-
<i className="fa fa-circle text-warning mr-2" />
413+
<i className="fa fa-circle text-success mr-2" />
413414
<span className={s.labelName}>My Recent</span>
414415
</a>
415416
</li>
416417
<li>
417418
<a href="#">
418-
<i className="fa fa-circle text-gray mr-2" />
419+
<i className="fa fa-circle text-primary mr-2" />
419420
<span className={s.labelName}>Starred</span>
420421
</a>
421422
</li>
@@ -439,7 +440,7 @@ class Sidebar extends React.Component {
439440
toggle={() => { this.dismissAlert(alert.id); }}
440441
>
441442
<span>{alert.title}</span><br />
442-
<Progress className={`${s.sidebarProgress} progress-xs mt-1`} color={alert.color} value={alert.value} />
443+
<Progress className={`bg-custom-dark progress-xs mt-1`} color={alert.color} value={alert.value} />
443444
<small>{alert.footer}</small>
444445
</Alert>,
445446
)}

‎src/components/Widget/Widget.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ class Widget extends React.Component {
332332

333333
<div className={`${s.widgetBody} widget-body ${bodyClass}`}>
334334
{reloading || fetchingData ? <Loader className={s.widgetLoader} size={40}/> : customBody ? (
335-
<div className="jumbotron handle bg-gray text-white mb-0">
335+
<div className="jumbotron handle bg-default text-white mb-0">
336336
<div className="container">
337337
<h1>Draggable story!</h1>
338338
<p className="lead">

0 commit comments

Comments
 (0)