Replace login icon, show "Sign In" text on mobile over icon (#637)

Replaces the "login" icon with "account_circle" on all devices, and
hides the icon on mobile/thin screens (width < 766px).
Also includes multiple toolbar changes to account for the width.

frontend/src/app/navigation/navigation.component.css

@@ -94,6 +94,18 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+#toolbar-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* NOTE: This is temporary until the admin pages are refactored. */
@@ -117,12 +129,9 @@ a {
 
 .profile-chip-container {
   display: flex;
-  margin-left: auto;
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 16px;
   align-items: center;
 }
+
 /* Round the border for the profile image chip */
 .mat-mdc-standard-chip {
   --mdc-chip-container-shape-radius: 16px;
@@ -141,7 +150,7 @@ a {
   height: 22px !important;
 }
 
-@media only screen and (max-width: 640px) {
+@media only screen and (max-width: 768px) {
   .desktop-profile-chips {
     display: none;
   }
@@ -164,4 +173,12 @@ a {
     margin-left: 3px;
     margin-top: 3px;
   }
+
+  ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__graphic {
+    display: none !important;
+  }
+
+  ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child) {
+    padding-left: 12px;
+  }
 }

frontend/src/app/navigation/navigation.component.html

@@ -121,18 +121,18 @@ <h3 matSubheader>Other</h3>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
       <div class="toolbar">
-        <button
-          type="button"
-          aria-label="Toggle sidenav"
-          mat-icon-button
-          (click)="drawer.toggle()"
-          *ngIf="isHandset">
+        <div class="toolbar-left">
+          <button
+           type="button"
+           aria-label="Toggle sidenav"
+           mat-icon-button
+           (click)="drawer.toggle()"
+           *ngIf="isHandset">
           <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-        </button>
-        <span [class]="isHandset ? 'title-medium' : ''">{{ navigationService.title$ | async }}</span>
-
+          </button>
+          <span id="toolbar-title" [class]="isHandset ? 'title-medium' : ''">{{ navigationService.title$ | async }}</span>
+        </div>
 
-
         <div class="profile-chip-container">
           @if(navigationAdminGearService.adminSettingsData()) {
             <button
@@ -144,7 +144,7 @@ <h3 matSubheader>Other</h3>
               <mat-icon aria-label="Admin icon" color="secondary">settings</mat-icon>
             </button>
           }
-          
+
             @if(profile$ | async; as profile) {
               <mat-chip-set class="desktop-profile-chips">
               <mat-chip class="profile-chip" routerLink="/profile">
@@ -168,23 +168,13 @@ <h3 matSubheader>Other</h3>
                 }
               </button>
             } @else {
-              <a class="desktop-profile-chips" href="/auth?continue_to={{ router.url }}">
+              <a class="profile-chip-container" href="/auth?continue_to={{ router.url }}">
                 <mat-chip class="profile-chip">
-                  <mat-icon matChipAvatar>login</mat-icon>
+                  <mat-icon matChipAvatar>account_circle</mat-icon>
                   Sign In
                 </mat-chip>
               </a>
-              <a class="mobile-icon-chips" href="/auth?continue_to={{ router.url }}">
-                <button
-                class="mat-csxl-stroked-icon-button profile-circle-icon"
-                  type="button"
-                  mat-icon-button>
-                  <mat-icon class="login-circle-icon" matChipAvatar>login</mat-icon>
-                </button>   
-              </a>
-
             }
-
         </div>
       </div>
     </mat-toolbar>