Add live preview of date and number format

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -146,7 +146,7 @@
               </mat-form-field>
             </div>
           </div>
-          <div class="align-items-center d-flex mb-2">
+          <div class="align-items-center d-flex mb-4">
             <div class="pr-1 w-50">
               <div i18n>Locale</div>
               <div class="hint-text text-muted">
@@ -154,7 +154,10 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-form-field appearance="outline" class="w-100 without-hint">
+              <mat-form-field
+                appearance="outline"
+                class="w-100 with-value-hint"
+              >
                 <mat-select
                   name="locale"
                   [disabled]="!hasPermissionToUpdateUserSettings"
@@ -168,35 +171,26 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
+                <mat-hint class="d-flex mt-2 text-muted">
+                  <gf-value
+                    [deviceType]="deviceType()"
+                    [isDate]="true"
+                    [isLoading]="isLoading"
+                    [locale]="user.settings.locale"
+                    [value]="previewDate"
+                  />
+                  <span class="mx-1">·</span>
+                  <gf-value
+                    [isCurrency]="true"
+                    [isLoading]="isLoading"
+                    [locale]="user.settings.locale"
+                    [unit]="user.settings.baseCurrency"
+                    [value]="previewValue"
+                  />
+                </mat-hint>
               </mat-form-field>
             </div>
           </div>
-          <div class="d-flex mb-2">
-            <div class="align-items-center d-flex pr-1 pt-1 w-50">
-              <ng-container i18n>Preview</ng-container>
-            </div>
-            <div class="d-flex pl-1 w-50">
-              <gf-value
-                class="mr-3"
-                i18n
-                [deviceType]="deviceType()"
-                [isDate]="true"
-                [isLoading]="isLoading"
-                [locale]="user.settings.locale"
-                [value]="previewDate"
-                >Date</gf-value
-              >
-              <gf-value
-                i18n
-                [isCurrency]="true"
-                [isLoading]="isLoading"
-                [locale]="user.settings.locale"
-                [unit]="user.settings.baseCurrency"
-                [value]="previewValue"
-                >Value</gf-value
-              >
-            </div>
-          </div>
           <div class="d-flex">
             <div class="align-items-center d-flex pr-1 pt-1 w-50">
               <ng-container i18n>Appearance</ng-container>