From 18b852ccde82f06000b6d633dd26035affe9766b Mon Sep 17 00:00:00 2001
From: Chris Veilleux <veilleux.chris@gmail.com>
Date: Fri, 15 Mar 2019 01:39:03 -0500
Subject: [PATCH] improved spacing

---
 .../device/defaults/defaults.component.html   | 122 +++++++++---------
 .../device/defaults/defaults.component.scss   |   4 +
 2 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/projects/account/src/app/modules/device/defaults/defaults.component.html b/projects/account/src/app/modules/device/defaults/defaults.component.html
index fc19d3c..ad24893 100644
--- a/projects/account/src/app/modules/device/defaults/defaults.component.html
+++ b/projects/account/src/app/modules/device/defaults/defaults.component.html
@@ -5,66 +5,68 @@
         <p class="mat-body">Optional values used as defaults during device setup.</p>
 
         <h2 class="mat-h2">Geographical Location</h2>
-        <mat-form-field [appearance]="'outline'">
-            <mat-label>Country</mat-label>
-            <input
-                    matInput
-                    type="text"
-                    formControlName="country"
-                    [matAutocomplete]="countryComplete"
-                    (focus)="getCountries()"
-            >
-            <mat-autocomplete #countryComplete="matAutocomplete">
-                <mat-option *ngFor="let country of filteredCountries$ | async" [value]="country.name">
-                    {{country.name}}
-                </mat-option>
-            </mat-autocomplete>
-        </mat-form-field>
-        <mat-form-field [appearance]="'outline'">
-            <mat-label>Region</mat-label>
-            <input
-                    matInput
-                    type="text"
-                    formControlName="region"
-                    [matAutocomplete]="regionComplete"
-                    (focus)="getRegions()"
-            >
-            <mat-autocomplete #regionComplete="matAutocomplete">
-                <mat-option *ngFor="let region of filteredRegions$ | async" [value]="region.name">
-                    {{region.name}}
-                </mat-option>
-            </mat-autocomplete>
-        </mat-form-field>
-         <mat-form-field [appearance]="'outline'">
-            <mat-label>City</mat-label>
-            <input
-                    matInput
-                    type="text"
-                    formControlName="city"
-                    [matAutocomplete]="cityComplete"
-                    (focus)="getCities()"
-            >
-            <mat-autocomplete #cityComplete="matAutocomplete">
-                <mat-option *ngFor="let city of filteredCities$ | async" [value]="city.name">
-                    {{city.name}}
-                </mat-option>
-            </mat-autocomplete>
-        </mat-form-field>
-         <mat-form-field [appearance]="'outline'">
-            <mat-label>Time Zone</mat-label>
-            <input
-                    matInput
-                    type="text"
-                    formControlName="timezone"
-                    [matAutocomplete]="timezoneComplete"
-                    (focus)="getTimezones()"
-            >
-            <mat-autocomplete #timezoneComplete="matAutocomplete">
-                <mat-option *ngFor="let timezone of filteredTimezones$ | async" [value]="timezone.name">
-                    {{timezone.name}}
-                </mat-option>
-            </mat-autocomplete>
-        </mat-form-field>
+        <div fxLayout="row wrap" fxLayoutAlign="space-around" fxLayout.xs="column">
+            <mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
+                <mat-label>Country</mat-label>
+                <input
+                        matInput
+                        type="text"
+                        formControlName="country"
+                        [matAutocomplete]="countryComplete"
+                        (focus)="getCountries()"
+                >
+                <mat-autocomplete #countryComplete="matAutocomplete">
+                    <mat-option *ngFor="let country of filteredCountries$ | async" [value]="country.name">
+                        {{country.name}}
+                    </mat-option>
+                </mat-autocomplete>
+            </mat-form-field>
+            <mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
+                <mat-label>Region</mat-label>
+                <input
+                        matInput
+                        type="text"
+                        formControlName="region"
+                        [matAutocomplete]="regionComplete"
+                        (focus)="getRegions()"
+                >
+                <mat-autocomplete #regionComplete="matAutocomplete">
+                    <mat-option *ngFor="let region of filteredRegions$ | async" [value]="region.name">
+                        {{region.name}}
+                    </mat-option>
+                </mat-autocomplete>
+            </mat-form-field>
+             <mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
+                <mat-label>City</mat-label>
+                <input
+                        matInput
+                        type="text"
+                        formControlName="city"
+                        [matAutocomplete]="cityComplete"
+                        (focus)="getCities()"
+                >
+                <mat-autocomplete #cityComplete="matAutocomplete">
+                    <mat-option *ngFor="let city of filteredCities$ | async" [value]="city.name">
+                        {{city.name}}
+                    </mat-option>
+                </mat-autocomplete>
+            </mat-form-field>
+             <mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
+                <mat-label>Time Zone</mat-label>
+                <input
+                        matInput
+                        type="text"
+                        formControlName="timezone"
+                        [matAutocomplete]="timezoneComplete"
+                        (focus)="getTimezones()"
+                >
+                <mat-autocomplete #timezoneComplete="matAutocomplete">
+                    <mat-option *ngFor="let timezone of filteredTimezones$ | async" [value]="timezone.name">
+                        {{timezone.name}}
+                    </mat-option>
+                </mat-autocomplete>
+            </mat-form-field>
+        </div>
 
         <h2 class="mat-h2">Voice</h2>
         <account-option-buttons
diff --git a/projects/account/src/app/modules/device/defaults/defaults.component.scss b/projects/account/src/app/modules/device/defaults/defaults.component.scss
index 01bf450..4c3446a 100644
--- a/projects/account/src/app/modules/device/defaults/defaults.component.scss
+++ b/projects/account/src/app/modules/device/defaults/defaults.component.scss
@@ -15,4 +15,8 @@ mat-card {
         color: mat-color($mycroft-accent, A700);
         margin-top: 32px;
     }
+
+    mat-form-field {
+        max-width: 280px;
+    }
 }