better display of the column header

src/app/components/stream/stream.component.html

@@ -7,7 +7,7 @@
         [browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
 
     <div class="stream-column__stream-header">
-        <a href title="return to top" (click)="goToTop()">
+        <a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
             <h1>{{ streamElement.name.toUpperCase() }}</h1>
         </a>
     </div>

src/app/components/stream/stream.component.scss

@@ -1,30 +1,39 @@
 @import "variables";
 @import "commons";
+$stream-header-height: 40px;
 .stream-column {
     position: relative;
-
     width: $stream-column-width;
     height: calc(100%);
     background-color: $column-color;
     margin: 0 0 0 $stream-column-separator;
-    &__stream-header {
+    &__stream-header {         
+        border-bottom: 1px solid #222736;       
+    }
+
+    &__stream-selector {
+        display: block;
         width: calc(100%);
-        height: 30px;
+        height: $stream-header-height;
         background-color: $column-header-background-color;
-        border-bottom: 1px solid black;
+        
+        &:hover {
+            text-decoration: none;
+        }
+
         & h1 {
             color: whitesmoke;
             font-size: 0.8em;
             font-weight: normal;
             margin: 0;
-            padding: 8px 0 0 10px;
+            padding: 13px 0 0 10px;
         }
     }
 }
 
 .stream-statuses {
     display: block;
-    height: calc(100% - 30px);
+    height: calc(100% - #{$stream-header-height});
     width: 320px;
 }
 
@@ -37,10 +46,8 @@
 //         border-width: 0 0 1px 0;
 //     }
 // }
-
 .stream-overlay {
     position: absolute;
-
     z-index: 50;
     width: $stream-column-width;
     height: calc(100%);

src/sass/_variables.scss

@@ -6,7 +6,7 @@ $color-primary: #141824;
 $color-secondary: #090b10;
 
 $column-color: #0f111a;
-$column-header-background-color: black;
+$column-header-background-color: #0c0c10;
 
 
 
@@ -32,6 +32,7 @@ $stream-selector-height: 30px;
 $stream-column-separator: 7px;
 $stream-column-width: 320px;
 $avatar-column-space: 70px;
+
 //Bootstrap cuistomization
 $enable-rounded: false;