feat: header icon as buttons

Author: kulgavy

src/components/Header/Header.js

@@ -16,6 +16,7 @@ import {
   Navbar,
   Nav,
   NavItem,
+  Button,
   Dropdown,
   DropdownToggle,
   DropdownMenu,
@@ -95,15 +96,21 @@ class Header extends React.Component {
             </DropdownMenu>
           </Dropdown>
           <NavItem className={cx('', s.headerIcon)}>
-            <Icon glyph="mail"/>
-            <span>8</span>
+            <Button>
+              <Icon glyph="mail"/>
+              <span>8</span>
+            </Button>
           </NavItem>
           <NavItem className={cx('', s.headerIcon)}>
-            <Icon glyph="notification"/>
-            <span>13</span>
+            <Button>
+              <Icon glyph="notification"/>
+              <span>13</span>
+            </Button>
           </NavItem>
           <NavItem className={cx('', s.headerIcon)}>
-            <Icon glyph="settings"/>
+            <Button>
+              <Icon glyph="settings"/>
+            </Button>
           </NavItem>
         </Nav>
       </Navbar>

src/components/Header/Header.scss

@@ -26,7 +26,7 @@
         width: 250px;
 
         @include media-breakpoint-down(md) {
-          width: 125px;
+          width: 100px;
         }
 
         @include media-breakpoint-down(sm) {
@@ -102,8 +102,22 @@
   align-items: center;
   position: relative;
 
+  :global .btn {
+    background: $white;
+    border: none;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus:active {
+      background: $white;
+      box-shadow: none !important;
+      outline: none;
+    }
+  }
+
   &:nth-child(n + 2) {
-    margin-left: 1.25rem;
+    margin-left: 0.5rem;
 
     @include media-breakpoint-down(sm) {
       display: none;