better display of hashtag panel

src/app/components/floating-column/search/search.component.scss

@@ -2,12 +2,8 @@
 @import "mixins";
 @import "panel";
 @import "commons";
-$separator-color:$color-primary;
-$button-size: 30px;
-$button-color: darken(white, 30);
-$button-color-hover: white;
-$button-background-color: $color-primary;
-$button-background-color-hover: lighten($color-primary, 20);
+
+
 .form-section {
     overflow: auto;
     width: 100%;

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

@@ -1,11 +1,11 @@
 <div class="hashtag-column">
     <div class="hashtag-header">
-        <a href (click)="goToTop()" class="hashtag-header__gototop">
+        <a href (click)="goToTop()" class="hashtag-header__gototop" title="go to top">
             <h3 class="hashtag-header__title">#{{hashtagElement.tag}}</h3>
 
-            <button class="hashtag-header__add-column" (click)=" addColumn($event)">add column</button>
+            <button class="btn-custom-secondary hashtag-header__add-column" (click)=" addColumn($event)" title="add column to board">add column</button>
         </a>
     </div>
     <app-stream-statuses class="hashtag-stream" *ngIf="hashtagElement" [streamElement]="hashtagElement" [goToTop]="goToTopSubject.asObservable()"
-        (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-stream-statuses>
+        (browseAccount)="selectAccount($event)" (browseHashtag)="selectHashtag($event)"></app-stream-statuses>
 </div>

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

@@ -1,3 +1,6 @@
+@import "variables";
+@import "buttons";
+
 $hashtag-header-height: 40px;
 $inner-column-size: 320px;
 
@@ -16,6 +19,11 @@ $inner-column-size: 320px;
         width: calc(100%);
         height: calc(100%);
         color: white;
+        transition: all .2s;
+
+        // &:hover {
+        //     background-color: $btn-primary-color-hover;
+        // }
     }
 
     &__title {
@@ -26,8 +34,11 @@ $inner-column-size: 320px;
     }
     &__add-column {
         position: absolute;
-        top: 5px;
-        right: 10px;
+        top: 7px;
+        right: 7px;
+        padding: 0 10px 0 10px;
+        border: 1px solid black;
+        color: white;
     }
 }
 

src/app/components/stream/hashtag/hashtag.component.ts

@@ -33,4 +33,11 @@ export class HashtagComponent implements OnInit {
         return false;        
     }
 
+    selectAccount(account: string) {
+        this.browseAccount.next(account);
+    }
+
+    selectHashtag(hashtag: string) {
+        this.browseHashtag.next(hashtag);
+    }
 }

src/sass/_buttons.scss

@@ -30,4 +30,17 @@
     // &:visited {
     //     outline: none;
     // }
+}
+
+.btn-custom-secondary {
+    border: none;
+    outline: none;
+    cursor: pointer;
+    background-color: $button-background-color;
+    color: $button-color;
+    transition: all .2s;
+    &:hover {
+        background-color: $button-background-color-hover;
+        color: $button-color-hover;
+    }
 }

src/sass/_variables.scss

@@ -33,4 +33,11 @@ $stream-column-separator: 7px;
 $stream-column-width: 320px;
 $avatar-column-space: 70px;
 //Bootstrap cuistomization
-$enable-rounded: false;
+$enable-rounded: false;
+
+$separator-color:$color-primary;
+$button-size: 30px;
+$button-color: darken(white, 30);
+$button-color-hover: white;
+$button-background-color: $color-primary;
+$button-background-color-hover: lighten($color-primary, 20);