From b1b92a17ac98c2199e73482b316a162ffdf55e48 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Tue, 19 Mar 2019 22:07:42 -0400
Subject: [PATCH] added icons and colors for account panel

---
 .../manage-account.component.html             | 24 +++++++++----
 .../manage-account.component.scss             | 35 ++++++++++++-------
 .../manage-account.component.ts               |  6 ++--
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/manage-account.component.html b/src/app/components/floating-column/manage-account/manage-account.component.html
index d164b440..90187024 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.html
+++ b/src/app/components/floating-column/manage-account/manage-account.component.html
@@ -2,13 +2,25 @@
     <h3 class="panel__title">Manage Account</h3>
 
     <div class="account__header">
-        <!-- <div class="account__display-avatar"> -->
         <img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
-        <!-- </div> -->
-        <a href class="account__header--button"><fa-icon [icon]="faEnvelope"></fa-icon></a>
-        <a href class="account__header--button"><fa-icon [icon]="faAt"></fa-icon></a>
-        <a href class="account__header--button"><fa-icon [icon]="faBell"></fa-icon></a>
-        <a href class="account__header--button"><fa-icon [icon]="faUser"></fa-icon></a>
+
+        <!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
+        <a href class="account__header--button" 
+            [ngClass]="{ 'account__header--button--selected': true, 'account__header--button--notification': true }">
+            <fa-icon [icon]="faStar"></fa-icon>
+        </a>
+        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
+            <fa-icon [icon]="faEnvelope"></fa-icon>
+        </a>
+        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
+            <fa-icon [icon]="faAt"></fa-icon>
+        </a>
+        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': false }">
+            <fa-icon [icon]="faBell"></fa-icon>
+        </a>
+        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
+            <fa-icon [icon]="faUser"></fa-icon>
+        </a>
     </div>
 
     <div class="account__body flexcroll">
diff --git a/src/app/components/floating-column/manage-account/manage-account.component.scss b/src/app/components/floating-column/manage-account/manage-account.component.scss
index 6eb6d82d..c137f10e 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.scss
+++ b/src/app/components/floating-column/manage-account/manage-account.component.scss
@@ -1,9 +1,7 @@
 @import "variables";
 @import "panel";
 @import "commons";
-
 $account-header-height: 60px;
-
 .panel {
     padding-left: 0px;
     padding-right: 0px;
@@ -17,22 +15,36 @@ $account-header-height: 60px;
         padding-bottom: 5px;
         height: $account-header-height; //border-top: 1px solid #222736;
         border-bottom: 1px solid #222736;
-
-        &--button{
+        &--button {
             // outline: 1px greenyellow solid;
-
-            margin-top: 15px;
+            margin-top: 20px;
             width: 35px;
-            height: 35px;            
+            height: 35px;
             float: right;
             margin-left: 5px;
-            font-size: 24px;
-            color: whitesmoke;
+            font-size: 22px;
+            font-size: 20px;
+            color: $font-link-primary;
             padding-left: 6px;
-
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             text-rendering: optimizeLegibility;
+            transition: all .2s;
+            &:hover {
+                color: $font-link-primary-hover;
+            }
+            &--selected {
+                color: whitesmoke;
+                &:hover {
+                    color: whitesmoke;
+                }
+            }
+            &--notification {
+                color: rgb(250, 152, 41);
+                &:hover {
+                    color: rgb(250, 152, 41);
+                }
+            }
         }
     } // &__display-avatar {
     //     text-align: center;
@@ -47,8 +59,7 @@ $account-header-height: 60px;
         overflow: auto;
         height: calc(100% - #{$account-header-height} - 31px);
         padding-left: 10px;
-        padding-right: 10px;
-        // outline: 1px solid red;
+        padding-right: 10px; // outline: 1px solid red;
     }
     &__label {
         // text-decoration: underline;
diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts
index 8d303cfd..a66a1372 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.ts
+++ b/src/app/components/floating-column/manage-account/manage-account.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Store } from '@ngxs/store';
-import { faAt } from "@fortawesome/free-solid-svg-icons";
-import { faBell, faEnvelope, faUser,  } from "@fortawesome/free-regular-svg-icons";
+import { faAt, faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { faBell, faEnvelope, faUser, faStar } from "@fortawesome/free-regular-svg-icons";
 
 import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../states/streams.state';
 import { RemoveAccount } from '../../../states/accounts.state';
@@ -19,6 +19,8 @@ export class ManageAccountComponent implements OnInit {
     faBell = faBell;
     faEnvelope = faEnvelope;
     faUser = faUser;
+    faStar = faStar;
+    faUserPlus = faUserPlus;
 
     @Input() account: AccountWrapper;