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,33 +171,24 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
-              </mat-form-field>
+                <mat-hint class="d-flex mt-2 text-muted">
-            </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
+                  />
-              >
+                  <span class="mx-1">·</span>
                   <gf-value
-                i18n
                     [isCurrency]="true"
                     [isLoading]="isLoading"
                     [locale]="user.settings.locale"
                     [unit]="user.settings.baseCurrency"
                     [value]="previewValue"
-                >Value</gf-value
+                  />
-              >
+                </mat-hint>
+              </mat-form-field>
             </div>
           </div>
           <div class="d-flex">