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,45 +51,54 @@
             </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="w-50">
+              <div class="d-flex mb-2">
-              <form #changeUserSettingsForm="ngForm">
+                <div class="align-items-center d-flex pt-1 w-50" i18n>
-                <mat-form-field appearance="outline" class="mb-3 w-100">
+                  Base Currency
-                  <mat-label i18n>Base Currency</mat-label>
+                </div>
-                  <mat-select
+                <div class="w-50">
-                    name="baseCurrency"
+                  <mat-form-field appearance="outline" class="w-100">
-                    [disabled]="!hasPermissionToUpdateUserSettings"
-                    [value]="user.settings.baseCurrency"
-                    (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
-                  >
-                    <mat-option
-                      *ngFor="let currency of currencies"
-                      [value]="currency"
-                      >{{ currency }}</mat-option
-                    >
-                  </mat-select>
-                </mat-form-field>
-                <div class="align-items-center d-flex overflow-hidden">
-                  <mat-form-field appearance="outline" class="flex-grow-1">
-                    <mat-label i18n>View Mode</mat-label>
                     <mat-select
-                      name="viewMode"
+                      name="baseCurrency"
-                      [disabled]="!hasPermissionToUpdateViewMode"
+                      [disabled]="!hasPermissionToUpdateUserSettings"
-                      [value]="user.settings.viewMode"
+                      [value]="user.settings.baseCurrency"
-                      (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
+                      (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
                     >
-                      <mat-option value="DEFAULT">Default</mat-option>
+                      <mat-option
-                      <mat-option value="ZEN">Zen</mat-option>
+                        *ngFor="let currency of currencies"
+                        [value]="currency"
+                        >{{ currency }}</mat-option
+                      >
                     </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="h5 mb-0 mx-3 text-muted"
+                    class="mx-1 text-muted"
                     name="diamond-outline"
                   ></ion-icon>
                 </div>
-              </form>
+                <div class="w-50">
-            </div>
+                  <div class="align-items-center d-flex overflow-hidden">
+                    <mat-form-field appearance="outline" class="w-100">
+                      <mat-select
+                        name="viewMode"
+                        [disabled]="!hasPermissionToUpdateViewMode"
+                        [value]="user.settings.viewMode"
+                        (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
+                      >
+                        <mat-option value="DEFAULT">Default</mat-option>
+                        <mat-option value="ZEN">Zen</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                  </div>
+                </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>