Navbar improvements.

frontend/app/shell/pages/internal/apps-menu.component.html

@@ -39,6 +39,19 @@
             </ng-container>
         </ng-container>
     </li>
+
+    <ng-container *ngIf="appsState.selectedAppOrNull | async; let app">
+        <li class="nav-item" *ngIf="app.planUpgrade && app.planName">
+            <div class="btn-group app-upgrade">
+                <button type="button" class="btn btn-primary btn-plan">
+                    You are on the <strong>{{app.planName}}</strong> plan.
+                </button>
+                <button type="button" class="btn btn-warning" [routerLink]="['/app', app.name, 'settings', 'plans']">
+                    Upgrade!
+                </button>
+            </div>
+        </li>
+    </ng-container>
 </ul>
 
 

frontend/app/shell/pages/internal/apps-menu.component.scss

@@ -72,4 +72,35 @@ $color-nav-shadow: rgba(26, 93, 184, .26);
     &-pill {
         @include absolute(.5rem, .625rem, auto, auto);
     }
-}
+}
+
+.app-upgrade {
+    & {
+        margin-left: 2rem;
+        margin-right: 0;
+        vertical-align: top;
+    }
+
+    .btn {
+        padding: .375rem;
+    }
+
+    .btn-plan {
+        padding: .375rem 1rem;
+    }
+
+    .btn-warning {
+        color: $color-dark-foreground;
+    }
+
+    .btn-primary {
+        @include box-shadow-outer;
+        background: $color-theme-blue-dark;
+        border: 0;
+        pointer-events: none;
+    }
+
+    @media (max-width: 1400px) {
+        display: none;
+    }
+}

frontend/app/shell/pages/internal/profile-menu.component.html

@@ -9,7 +9,7 @@
             <span class="user">
                 <img class="user-picture" [src]="snapshot.profileId | sqxUserIdPicture" />
                 
-                <span>{{snapshot.profileDisplayName}}</span>
+                <span class="profile-name">{{snapshot.profileDisplayName}}</span>
             </span>
         </span>
     </li>

frontend/app/shell/pages/internal/profile-menu.component.scss

@@ -12,4 +12,16 @@
         font-weight: normal;
         line-height: 1.4rem;
     }
+}
+
+@media (max-width: 1200px) {
+    .profile-name {
+        display: none;
+    }
+}
+
+@media (max-width: 1000px) {
+    .nav-item-help {
+        display: none;
+    }
 }

frontend/app/shell/pages/internal/search-menu.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="searchSource.selectedAppOrNull | async">
-    <div class="search-container">
+    <div class="search-container ml-4">
         <sqx-autocomplete [source]="searchSource" inputName="searchMenu" placeholder="Quick Nav (Press 'q')" icon="search" #searchControl
             dropdownWidth="30rem"
             [ngModel]="selection"