better design for the column editions

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

@@ -1,5 +1,5 @@
 <div class="stream-edition">
-    <button (click)="moveLeft()">Move left</button>
-    <button (click)="moveRight()">Move right</button>
-    <button (click)="delete()">Delete</button>
+    <button (click)="moveLeft()" class="stream-edition__button" title="move left"><fa-icon [icon]="faChevronLeft"></fa-icon></button>
+    <button (click)="moveRight()" class="stream-edition__button" title="move right"><fa-icon [icon]="faChevronRight"></fa-icon></button>
+    <button (click)="delete()" class="stream-edition__button stream-edition__button--delete"  title="remove column"><fa-icon [icon]="faTimes"></fa-icon></button>
 </div>

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

@@ -1,5 +1,21 @@
+@import "variables";
+@import "mixins";
+
 .stream-edition {
     width: 100%;
-    min-height: 50px;
+    // min-height: 50px;
     background-color: #222736;
+    &__button {
+        @include clearButton;
+        padding: 5px 10px 5px 10px;
+        margin: 3px 0;
+        &--delete{
+            float: right;
+            margin-right: 5px;
+        }
+
+        &:hover {
+            color: darken($font-color-primary, 20);
+        }
+    }
 }

src/app/components/stream/stream-edition/stream-edition.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
 
 import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../../../states/streams.state';
 
@@ -9,6 +10,10 @@ import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../..
     styleUrls: ['./stream-edition.component.scss']
 })
 export class StreamEditionComponent implements OnInit {
+    faChevronLeft = faChevronLeft;
+    faChevronRight = faChevronRight;
+    faTimes = faTimes;
+
     @Input() streamElement: StreamElement;
 
     constructor(private readonly store: Store) { }

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

@@ -72,7 +72,7 @@ $stream-header-height: 40px;
 // }
 .stream-overlay {
     position: absolute;
-    z-index: 50;
+    z-index: 100;
     width: $stream-column-width;
     height: calc(100%);
 }

src/sass/_mixins.scss

@@ -4,4 +4,14 @@
         display: table;
         clear: both;        
     }    
+}
+
+@mixin clearButton {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit; 
+    cursor: pointer;
+    outline: inherit;
 }