feat: desing fixixes

Author: kulgavy

src/components/Header/Header.js

@@ -44,7 +44,7 @@ class Header extends React.Component {
   };
 
   state = { isOpen: false };
-  
+
   toggleDropdown = () => {
     this.setState(prevState => ({
       isOpen: !prevState.isOpen,
@@ -61,7 +61,7 @@ class Header extends React.Component {
       <Navbar className={s.root}>
         <Nav>
           <NavItem
-            className={cx('visible-xs', s.headerIcon)}
+            className={cx('visible-xs mr-4 d-sm-up-none', s.headerIcon, s.sidebarToggler)}
             href="#"
             onClick={this.props.sidebarToggle}
           >
@@ -71,12 +71,29 @@ class Header extends React.Component {
             <InputGroup>
               <Input placeholder="Search for..." />
               <InputGroupAddon addonType="append" className="px-2">
-                <i className="fa fa-search text-muted" />
+                <i className="fa fa-search" />
               </InputGroupAddon>
             </InputGroup>
           </NavItem>
         </Nav>
         <Nav className="ml-auto">
+          <NavItem className={cx('', s.headerIcon)}>
+            <Button>
+              <Icon glyph="mail"/>
+              <span>8</span>
+            </Button>
+          </NavItem>
+          <NavItem className={cx('', s.headerIcon)}>
+            <Button>
+              <Icon glyph="notification"/>
+              <span>13</span>
+            </Button>
+          </NavItem>
+          <NavItem className={cx('', s.headerIcon)}>
+            <Button>
+              <Icon glyph="settings"/>
+            </Button>
+          </NavItem>
           <Dropdown isOpen={isOpen} toggle={this.toggleDropdown}>
             <DropdownToggle nav>
               <img className={cx('rounded-circle mr-sm', s.adminPhoto)} src={photo} alt="administrator" />
@@ -95,23 +112,6 @@ class Header extends React.Component {
               </DropdownItem>
             </DropdownMenu>
           </Dropdown>
-          <NavItem className={cx('', s.headerIcon)}>
-            <Button>
-              <Icon glyph="mail"/>
-              <span>8</span>
-            </Button>
-          </NavItem>
-          <NavItem className={cx('', s.headerIcon)}>
-            <Button>
-              <Icon glyph="notification"/>
-              <span>13</span>
-            </Button>
-          </NavItem>
-          <NavItem className={cx('', s.headerIcon)}>
-            <Button>
-              <Icon glyph="settings"/>
-            </Button>
-          </NavItem>
         </Nav>
       </Navbar>
     );
@@ -123,4 +123,4 @@ function mapStateToProps(state) {
     init: state.runtime.initialNow,
   };
 }
-export default connect(mapStateToProps)(withStyles(s)(Header));
+export default connect(mapStateToProps)(withStyles(s)(Header));

src/components/Header/Header.scss

@@ -33,6 +33,19 @@
           width: 175px;
         }
 
+        &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+          color: $gray-300;
+          opacity: 1; /* Firefox */
+        }
+
+        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+          color: $gray-300;
+        }
+
+        &::-ms-input-placeholder { /* Microsoft Edge */
+          color: $gray-300;
+        }
+
         &:hover,
         &:active,
         &:focus {
@@ -49,6 +62,7 @@
 
         i {
           font-size: 1.25rem;
+          color: theme-color('light');
         }
       }
     }
@@ -102,6 +116,10 @@
   align-items: center;
   position: relative;
 
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+
   :global .btn {
     background: $white;
     border: none;
@@ -118,14 +136,12 @@
 
   &:nth-child(n + 2) {
     margin-left: 0.5rem;
-
-    @include media-breakpoint-down(sm) {
-      display: none;
-    }
   }
 
-  &:first-child {
-    margin-right: 1.25rem;
+  &:nth-child(2) {
+    span {
+      right: -1px;
+    }
   }
 
   img {
@@ -142,9 +158,17 @@
     right: -6px;
     color: $white;
     font-size: 0.55rem;
-    width: 12px;
-    height: 12px;
+    width: 15px;
+    height: 15px;
     border-radius: 50%;
     background-color: theme-color('danger');
   }
 }
+
+.sidebarToggler {
+  display: flex;
+
+  @include media-breakpoint-up(md) {
+    display: none !important;
+  }
+}

src/components/Sidebar/LinksGroup/LinksGroup.scss

@@ -3,7 +3,7 @@
 .headerLink {
   a {
     display: flex;
-    color: $sidebar-color;
+    color: $gray-500;
     align-items: center;
     text-decoration: none;
     cursor: pointer;

src/components/Widget/Widget.scss

@@ -6,7 +6,6 @@
   margin-bottom: 30px;
   padding: $widget-padding-y $widget-padding-x;
   background: $widget-bg;
-  border-radius: 3px;
 }
 
 .title {