Improve settings selectors layout (#205)

apps/client/src/app/pages/account/account-page.html

@@ -16,14 +16,19 @@
             <div class="w-50" i18n>Membership</div>
             <div class="w-50">
               <div class="align-items-center d-flex mb-1">
-                {{ user.subscription.type }}
+                {{ user?.subscription?.type }}
+                <ion-icon
+                  *ngIf="user?.subscription?.type === 'Premium'"
+                  class="ml-1 text-muted"
+                  name="diamond-outline"
+                ></ion-icon>
               </div>
-              <div *ngIf="user.subscription.expiresAt">
+              <div *ngIf="user?.subscription?.expiresAt">
-                Valid until {{ user.subscription.expiresAt | date:
+                Valid until {{ user?.subscription?.expiresAt | date:
                 defaultDateFormat }}
               </div>
               <div
-                *ngIf="hasPermissionForSubscription && !user.subscription.expiresAt"
+                *ngIf="hasPermissionForSubscription && !user?.subscription?.expiresAt"
               >
                 <button
                   color="primary"
@@ -46,11 +51,13 @@
             </div>
           </div>
           <div class="d-flex mt-4 py-1">
-            <div class="pt-4 w-50" i18n>Settings</div>
+            <form #changeUserSettingsForm="ngForm" class="w-100">
+              <div class="d-flex mb-2">
+                <div class="align-items-center d-flex pt-1 w-50" i18n>
+                  Base Currency
+                </div>
                 <div class="w-50">
-              <form #changeUserSettingsForm="ngForm">
+                  <mat-form-field appearance="outline" class="w-100">
-                <mat-form-field appearance="outline" class="mb-3 w-100">
-                  <mat-label i18n>Base Currency</mat-label>
                     <mat-select
                       name="baseCurrency"
                       [disabled]="!hasPermissionToUpdateUserSettings"
@@ -64,9 +71,20 @@
                       >
                     </mat-select>
                   </mat-form-field>
+                </div>
+              </div>
+              <div class="d-flex">
+                <div class="align-items-center d-flex pt-1 w-50" i18n>
+                  View Mode
+                  <ion-icon
+                    *ngIf="!hasPermissionToUpdateViewMode"
+                    class="mx-1 text-muted"
+                    name="diamond-outline"
+                  ></ion-icon>
+                </div>
+                <div class="w-50">
                   <div class="align-items-center d-flex overflow-hidden">
-                  <mat-form-field appearance="outline" class="flex-grow-1">
+                    <mat-form-field appearance="outline" class="w-100">
-                    <mat-label i18n>View Mode</mat-label>
                       <mat-select
                         name="viewMode"
                         [disabled]="!hasPermissionToUpdateViewMode"
@@ -77,15 +95,11 @@
                         <mat-option value="ZEN">Zen</mat-option>
                       </mat-select>
                     </mat-form-field>
-                  <ion-icon
-                    *ngIf="!hasPermissionToUpdateViewMode"
-                    class="h5 mb-0 mx-3 text-muted"
-                    name="diamond-outline"
-                  ></ion-icon>
                   </div>
-              </form>
                 </div>
               </div>
+            </form>
+          </div>
           <div class="align-items-center d-flex mt-4 py-1">
             <div class="w-50" i18n>Sign in with fingerprint</div>
             <div class="w-50">