feature: header: user panel

src/styles/base/header.scss

@@ -394,20 +394,33 @@ solid-notifications {
         list-style: none;
         margin: 0;
         padding: 0;
-        
+
+        solid-route {
+          display: block;
+
+          &:hover a {
+            color: var(--color-secondary);
+          }
+        }
+
         li {
 
           solid-link {
             display: block;
-            border-bottom: 1px solid #E4E8ED;
             /*margin-right: 0;*/
             /*padding: 1.6rem 1.3rem;*/
+          }
+          &:hover {
 
-            &:hover {
+            solid-link {
               color: var(--color-secondary);
             }
           }
         }
+        
+        .icon::before {
+          margin-right: 10px;
+        }
       }
 
       button {

src/styles/base/main.scss

@@ -111,6 +111,10 @@
   }
 }
 
+.border-bottom {
+  border-bottom: 1px solid #D6CECE;
+}
+
 .shadow {
   box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
 }
@@ -123,10 +127,30 @@
   background: white;
 }
 
+.icon-color-primary::before {
+  color: var(--color-primary);
+}
+
+.icon-color-secondary::before {
+  color: var(--color-secondary);
+}
+
+.icon-color-third::before {
+  color: var(--color-third);
+}
+
+.icon-color-heading::before {
+  color: var(--color-heading);
+}
+
 .text-bold {
   font-weight: 600;
 }
 
+.text-normal {
+  font-weight: normal;
+}
+
 .text-uppercase {
   text-transform: uppercase;
 }

src/styles/components/icons/icons.scss

@@ -43,10 +43,6 @@
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
 
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: 0.2em;
-
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */