added button to delete account

src/app/components/floating-column/manage-account/manage-account.component.html

@@ -1,16 +1,16 @@
 <div class="panel">
-  <h3 class="panel__title">Manage Account</h3>
+    <h3 class="panel__title">Manage Account</h3>
 
-  <div class="account-editor__display-avatar">
-    <img class="account-editor__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
-  </div>
+    <div class="account-editor__display-avatar">
+        <img class="account-editor__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
+    </div>
 
-  <h4 class="add-column__label">add column:</h4>
+    <h4 class="account__label">add column:</h4>
 
-  <a class="add-column__link" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
-    {{ stream.name }}
-  </a>
-  <!-- <a class="add-column__link" href>
+    <a class="account__link account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
+        {{ stream.name }}
+    </a>
+    <!-- <a class="add-column__link" href>
     Global Timeline
   </a>
   <a class="add-column__link" href>
@@ -20,4 +20,9 @@
     Lists, Favs, Activitires, etc
   </a> -->
 
+
+    <h4 class="account__label account__margin-top">remove account from sengi:</h4>
+    <a class="account__link account__red" href (click)="removeAccount()">
+        Delete
+    </a>
 </div>

src/app/components/floating-column/manage-account/manage-account.component.scss

@@ -20,25 +20,48 @@
     }
 }
 
-.add-column {
+.account {
     &__label {
         // text-decoration: underline;
         font-size: $small-font-size;
         margin-left: 5px;
         color: $font-color-secondary;
     }
+    &__margin-top {
+        margin-top: 25px;
+    }
     &__link {
         text-decoration: none;
         display: block; // width: calc(100% - 20px);
         width: 100%; // height: 30px;
         padding: 5px 10px; // border: solid 1px black;
-        background-color: $color-primary;
-        color: #fff;
         &:not(:last-child) {
             margin-bottom: 5px;
         }
+    }
+    &__mid-link {
+        text-decoration: none;
+        display: block; // width: calc(100% - 20px);
+        width: 45%; // height: 30px;
+        padding: 5px 10px; // border: solid 1px black;
+        &:not(:last-child) {
+            margin-bottom: 5px;
+        }
+    }
+    &__blue {
+        background-color: $color-primary;
+        color: #fff;
         &:hover {
             background-color: lighten($color-primary, 15);
         }
     }
+
+    &__red {
+        $red-button-color: rgb(65, 3, 3);
+        background-color: $red-button-color;
+        color: #fff;
+        &:hover {
+            background-color: lighten($red-button-color, 15);
+        }
+    }
 }

src/app/components/floating-column/manage-account/manage-account.component.ts

@@ -30,4 +30,9 @@ export class ManageAccountComponent implements OnInit {
         }
         return false;
     }
+
+    removeAccount(): boolean {
+
+        return false;
+    }
 }