Skip to content

Commit 116c8ba

Browse files
yurykurylovichyurykurylovich
committed
Fixed icons layout and style issues
1 parent 75a8eab commit 116c8ba

File tree

11 files changed

+52
-39
lines changed

11 files changed

+52
-39
lines changed

‎src/components/Header/Header.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,9 @@ class Header extends React.Component {
138138
const firstUserLetter = user && (user.firstName|| user.email)[0].toUpperCase();
139139
return (
140140
<Navbar className={`d-print-none ${s.root}`}>
141+
<NavLink onClick={this.toggleSidebar} className={`d-md-none ${s.navItem} text-white`} href="#">
142+
<BurgerIcon className={s.headerIcon} />
143+
</NavLink>
141144
<div className={s.alertPosition}>
142145
<UncontrolledAlert className={`${s.alert} mr-3 d-lg-down-none animate__animated animate__bounceIn animate__delay-1s`}>
143146
Check out Light Blue
@@ -176,7 +179,7 @@ class Header extends React.Component {
176179
</Form>
177180

178181
<Nav className="ml-md-0">
179-
<Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`d-none d-sm-block ${s.notificationsMenu}`} >
182+
<Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu}`} >
180183
<DropdownToggle nav caret style={{color: "#3979F6", padding: 0}}>
181184
<span className={`${s.avatar} rounded-circle float-left`}>
182185
{avatar ? (
@@ -193,7 +196,7 @@ class Header extends React.Component {
193196
<Notifications />
194197
</DropdownMenu>
195198
</Dropdown>
196-
<NavItem className="d-lg-none d-md-block d-sm-none">
199+
<NavItem className="d-lg-none">
197200
<NavLink onClick={this.toggleSearchOpen} className={s.navItem} href="#">
198201
<SearchIcon className={s.headerIcon} />
199202
</NavLink>
@@ -300,11 +303,6 @@ class Header extends React.Component {
300303
</DropdownItem>
301304
</DropdownMenu>
302305
</Dropdown>
303-
<NavItem className="d-md-none">
304-
<NavLink onClick={this.toggleSidebar} className={`${s.navItem} text-white`} href="#">
305-
<BurgerIcon className={s.headerIcon} />
306-
</NavLink>
307-
</NavItem>
308306
<NavItem>
309307
<NavLink onClick={this.doLogout} className={`${s.navItem} text-white`} href="#">
310308
<PowerIcon className={s.headerIcon} />

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

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
}
88

99
ul > li > a {
10-
padding: 0.5rem 0.75rem
10+
padding: 0.5rem 12px;
11+
@media(max-width: 580px) {
12+
padding: 0.5rem 6px;
13+
}
1114
}
1215

1316
:global {
@@ -140,7 +143,7 @@
140143
.divider {
141144
display: block;
142145
width: 1px;
143-
margin: 10px 5px;
146+
margin: 10px 4px;
144147
background: $content-color;
145148
}
146149

@@ -176,7 +179,7 @@
176179
}
177180

178181
.dropdownMenu {
179-
background: $main-gradient !important;
182+
background: $main-background !important;
180183
box-shadow: 0 0 40px 2px rgba(#020202,.5);
181184
border: none;
182185
color: $white;
@@ -304,16 +307,19 @@
304307
width: 6px;
305308
height: 6px;
306309
bottom: 8px;
307-
right: 5px;
310+
right: 11px;
308311
background: $green;
309312
border-radius: 50%;
310313
}
311314

312315
.notificationsMenu {
313-
padding: 0 0.75rem;
316+
padding: 0 12px;
314317
> a {
315318
background-color: transparent!important;
316319
}
320+
@media(max-width: 580px) {
321+
padding: 0;
322+
}
317323

318324
:global .dropdown-menu {
319325
left: auto !important;
@@ -322,7 +328,8 @@
322328
}
323329

324330
::after {
325-
padding-left: 0;
331+
padding: 0;
332+
margin: 0;
326333
}
327334

328335
@media(max-width: 580px) {
@@ -358,11 +365,16 @@
358365
}
359366

360367
.badge {
361-
margin-left: 6px;
362-
margin-right: 3px;
368+
display: flex;
369+
align-items: center;
370+
justify-content: center;
371+
width: 22px;
372+
height: 22px;
373+
margin: auto 6px;
363374
border-radius: 50%;
364-
font-size: $font-size-mini;
375+
font-size: 12px;
365376
font-weight: $font-weight-bold;
377+
color: $main-background;
366378
}
367379

368380
.headerIcon {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@include media-breakpoint-up(md) {
55
width: 333px;
66
}
7-
background: $main-gradient;
7+
background: $main-background;
88
box-shadow: 0 0px 40px 2px rgba(#020202,.5);
99
border-radius: $border-radius;
1010
height: 100%;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ class LinksGroup extends Component {
8686
<NavLink
8787
to={this.props.link}
8888
activeClassName={s.headerLinkActive}
89-
style={{ paddingLeft: `${45 + (10 * (this.props.deep - 1))}px` }}
89+
style={{ paddingLeft: `${40 + (10 * (this.props.deep - 1))}px` }}
9090
onClick={(e) => {
9191
// able to go to link is not available(for Demo)
9292
if (this.props.link.includes('menu')) {
@@ -109,7 +109,7 @@ class LinksGroup extends Component {
109109
return (
110110
<li className={classnames({ [s.headerLink]: this.props.isHeader }, this.props.className)}>
111111
<a className={classnames(s.accordionToggle, { [s.headerLinkActive]: match }, { [s.collapsed]: isOpen }, "d-flex")}
112-
style={{ paddingLeft: `${this.props.deep == 0 ? 5 : 35 + 10 * (this.props.deep - 1)}px` }}
112+
style={{ paddingLeft: `${this.props.deep == 0 ? 0 : 35 + 10 * (this.props.deep - 1)}px` }}
113113
onClick={(e) => this.togglePanelCollapse(this.props.link, e)}
114114
href="#"
115115
>

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,21 +40,24 @@
4040
}
4141

4242
.icon {
43-
margin-right: .5rem;
43+
margin-right: 8px;
4444
max-height: 32px;
4545
max-width: 32px;
4646
text-align: center;
4747
}
4848

4949
.badge {
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
5053
position: absolute;
51-
right: 4px;
52-
// float: right;
53-
line-height: 8px;
54-
margin-right: 5px;
55-
padding: 7px;
5654
width: 22px;
5755
height: 22px;
56+
right: 4px;
57+
margin-right: 5px;
58+
font-size: 12px;
59+
font-weight: $font-weight-bold;
60+
color: $main-background;
5861
}
5962
}
6063

@@ -132,7 +135,7 @@ a.headerLinkActive {
132135
font-weight: $font-weight-normal;
133136

134137
&:hover {
135-
background-color: $sidebar-item-hover-bg-color;
138+
background-color: $icon-color;
136139
}
137140
}
138141
}

‎src/components/Sidebar/Sidebar.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ class Sidebar extends React.Component {
9999
index="main"
100100
childrenLinks={[
101101
{
102-
header: 'Visits', link: '/app/main/dashboard',
102+
header: 'Analytics', link: '/app/main/analytics',
103103
},
104104
{
105-
header: 'Analytics', link: '/app/main/analytics',
105+
header: 'Visits', link: '/app/main/dashboard',
106106
},
107107
{
108108
header: 'Widgets', link: '/app/main/widgets',
@@ -143,7 +143,7 @@ class Sidebar extends React.Component {
143143
iconName={<EcommerceIcon className={s.menuIcon}/>}
144144
link="/app/ecommerce"
145145
index="ecommerce"
146-
label="NodeJS/.NET"
146+
// label="NodeJS/.NET"
147147
labelColor="danger"
148148
exact={false}
149149
childrenLinks={[

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696

9797
.navTitle {
9898
margin: 25px 0 0 10px;
99-
font-size: $font-size-mini;
99+
font-size: 13px;
100100
font-weight: $font-weight-bold;
101101
color: #474E80;
102102
transition: opacity $sidebar-transition-time ease-in-out;
@@ -201,7 +201,7 @@
201201
background: transparent;
202202
margin-bottom: 0;
203203
margin-right: 2px;
204-
padding: 0.5rem 11px 0.5rem 20px !important;
204+
padding: 0.5rem 11px 0.5rem 10px !important;
205205
padding-right: 15px;
206206

207207
button > span {

‎src/pages/email/components/MessageTableHeader/MessageTableHeader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const MessageTableHeader = (props) => {
5050
<UncontrolledButtonDropdown size="sm">
5151
<DropdownToggle
5252
caret color="subtle-blue"
53-
className="dropdown-toggle-split mr-xs"
53+
className="dropdown-toggle-split mr-xs mb-2"
5454
>
5555
Actions
5656
</DropdownToggle>

‎src/pages/profile/Profile.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,11 @@ const Profile = () => (
7373
</div>
7474
<p>
7575
{/* eslint-disable-next-line */}
76-
<a href="#" class="badge badge-info rounded-0 mb-2 mr-2">UI/UX</a>
76+
<a href="#" className="badge badge-info rounded-0 mb-2 mr-2">UI/UX</a>
7777
{/* eslint-disable-next-line */}
78-
<a href="#" class="badge badge-primary rounded-0 mr-2"> Web Design </a>
78+
<a href="#" className="badge badge-primary rounded-0 mr-2"> Web Design </a>
7979
{/* eslint-disable-next-line */}
80-
<a href="#" class="badge badge-default rounded-0"> Mobile Apps </a>
80+
<a href="#" className="badge badge-default rounded-0"> Mobile Apps </a>
8181
</p>
8282
<p className="lead mt-xlg">
8383
My name is Adam Johns and here is my new Light Blue user profile page.

‎src/styles/_general.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ html {
66
body {
77
overflow-x: hidden;
88
color: $text-color;
9-
background: $main-gradient;
9+
background: $main-background;
1010
background-attachment: fixed;
1111
background-size: cover;
1212
background-repeat: no-repeat;

0 commit comments

Comments
 (0)