[Account switching] Design changes (#1240)

* Various design changes to the account switcher

* Hide serverUrl on cloud accounts

* Display account limit reached instead of add account

src/app/layout/account-switcher.component.html

@@ -39,14 +39,39 @@
         href="#"
         (mousedown)="switch(a.key)"
       >
-        <span class="email">{{ a.value.profile.email }}</span>
+        <app-avatar
-        <span class="server">{{ a.value.serverUrl }}</span>
+          [data]="a.value.profile.email"
-        <span class="status">{{ a.value.profile.authenticationStatus }}</span>
+          size="25"
+          [circle]="true"
+          [fontSize]="14"
+          [dynamic]="true"
+          *ngIf="a.value.profile.email != null"
+        ></app-avatar>
+        <div class="accountInfo">
+          <span class="email">{{ a.value.profile.email }}</span>
+          <span class="server" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
+            a.value.serverUrl
+          }}</span>
+          <span class="status">{{ a.value.profile.authenticationStatus }}</span>
+        </div>
+        <i
+          class="fa fa-unlock fa-2x text-muted"
+          *ngIf="a.value.profile.authenticationStatus == 'unlocked'"
+        ></i>
+        <i
+          class="fa fa-lock fa-2x text-muted"
+          *ngIf="a.value.profile.authenticationStatus == 'locked'"
+        ></i>
       </a>
     </div>
     <div class="border"></div>
-    <a class="add" routerLink="/login" (click)="toggle()">
+    <ng-container *ngIf="numberOfAccounts < 5">
-      <i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
+      <a class="add" routerLink="/login" (click)="toggle()">
-    </a>
+        <i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
+      </a>
+    </ng-container>
+    <ng-container *ngIf="numberOfAccounts == 5">
+      <a class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </a>
+    </ng-container>
   </div>
 </ng-template>

src/app/layout/account-switcher.component.ts

@@ -60,6 +60,14 @@ export class AccountSwitcherComponent implements OnInit {
     return !Utils.isNullOrWhitespace(this.activeAccountEmail);
   }
 
+  get numberOfAccounts() {
+    if (this.accounts == null) {
+      this.isOpen = false;
+      return 0;
+    }
+    return Object.keys(this.accounts).length;
+  }
+
   constructor(
     private stateService: StateService,
     private vaultTimeoutService: VaultTimeoutService,

src/locales/en/messages.json

@@ -1792,5 +1792,8 @@
   },
   "accountLimitReached": {
     "message": "No more than 5 accounts may be logged in at the same time."
+  },
+  "accountSwitcherLimitReached": {
+    "message": "Account limit reached. Log out of an account to add another."
   }
 }

src/scss/header.scss

@@ -130,28 +130,33 @@
   }
 
   .accounts {
-    padding: 4px 0;
+    padding: 7px 0;
 
     .account {
       display: grid;
-      grid-column-gap: 5px;
+      grid-template-columns: 24px auto 24px;
-      grid-template:
+      grid-column-gap: 11px;
-        [row1-start] "email  status" [row1-end]
+      align-items: center;
-        [row2-start] "server server" [row2-end]
+      justify-items: left;
-        / 1fr auto;
-      align-items: baseline;
 
-      .server {
+      .accountInfo {
-        font-size: $font-size-small;
+        display: grid;
-      }
 
-      .email {
+        .email {
-        font-size: $font-size-large;
+          font-size: $font-size-base;
-      }
+          max-width: 168px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
-      .status {
+        .server {
-        font-style: italic;
+          font-size: $font-size-small;
-        grid-area: status;
+        }
+
+        .status {
+          font-size: $font-size-small;
+          font-style: italic;
+        }
       }
     }
   }
@@ -169,4 +174,9 @@
   .add {
     margin: 4px 0;
   }
+
+  .accountLimitReached {
+    margin: 4px 0;
+    font-size: $font-size-small;
+  }
 }