fix all setup pages

Breeze.UI/src/app/setup/create/create.component.html

 <section id="breeze">
   <div class="login d-flex align-items-center text-center">
     <div class="container">
-      <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
+      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
       <h3 class="display-5">Welcome</h3>
       <div class="row d-flex justify-content-center">
-        <form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm">
+        <form class="col-md-6 col-xs-12 text-left" [formGroup]="createWalletForm">
           <!--<div class="form-group has-success">-->
           <div class="form-group">
             <label class="col-12 row" for="walletName">Name</label>
             <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
-            <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
+            <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
           </div>
           <div class="form-group">
             <label class="text-left" for="walletPassword">Password</label>
             <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
-            <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
+            <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
           </div>
           <div class="form-group">
             <label class="text-left" for="walletNetwork">Network</label>

Breeze.UI/src/app/setup/recover/recover.component.html

 <section id="breeze">
   <div class="login d-flex align-items-center text-center">
     <div class="container">
-      <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
+      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
       <h3 class="display-5">Welcome</h3>
       <div class="row d-flex justify-content-center">
-        <form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm">
+        <form class="col-md-6 col-xs-12 text-left" [formGroup]="recoverWalletForm">
           <!--<div class="form-group has-success">-->
           <div class="form-group">
             <label class="col-12 row" for="walletName">Name</label>
             <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
-            <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
+            <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
           </div>
           <div class="form-group">
             <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
-            <material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker>
+            <material-datepicker class="form-control col-4" [(date)]="creationDate"></material-datepicker>
           </div>
           <div class="form-group">
             <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
             <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
-            <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div>
+            <div *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
           </div>
           <div class="form-group">
             <label class="text-left" for="walletPassword">Password</label>
             <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
-            <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
+            <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
           </div>
           <div class="form-group">
             <label class="text-left" for="walletNetwork">Network</label>

Breeze.UI/src/app/setup/setup.component.html

@@ -4,15 +4,15 @@
       <!--<p class="text-back text-left mb-5 col-6 row">
         <button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button>
       </p>-->
-      <p class="text-back text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
+      <p class="text-back text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
       <h3 class="display-5">Welcome</h3>
-      <p class="lead">
+      <p class="lead mb-6">
         If you would like to create a new wallet, please click Create. <br/>
         When you have used Breeze before, you can click Restore to recover your wallet.
       </p>
       <div class="row d-flex justify-content-center">
-        <button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
         <button type="button" class="btn btn-linkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
+        <button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
       </div>
     </div>
     <!-- /container-->

Breeze.UI/src/scss/_custom.scss

@@ -8,9 +8,7 @@ a, button {&:hover {cursor: pointer !important;}}
 code {color: $spacegray !important;}
 .form-control::-webkit-input-placeholder { color: $input-color-placeholder; }  /* WebKit, Blink, Edge */
 .form-control:-moz-placeholder { color: $input-color-placeholder; }  /* Mozilla Firefox 4 to 18 */
-.form-control::-moz-placeholder { color: $input-color-placeholder; }  /* Mozilla Firefox 19+ */
 .form-control:-ms-input-placeholder { color: $input-color-placeholder; }  /* Internet Explorer 10-11 */
-.form-control::-ms-input-placeholder { color: $input-color-placeholder; }  /* Microsoft Edge */
 
 // button
 .twitter {
@@ -30,6 +28,17 @@ code {color: $spacegray !important;}
   }
 }
 
+// datepicker
+.datepicker__input {
+  border-color: transparent !important;
+  padding: 0 !important;
+  text-align: left;
+  color: $input-color !important;
+  width: 100%;
+  text-align: center;
+  &::-webkit-input-placeholder { color: $input-color-placeholder; }  /* WebKit, Blink, Edge */
+}
+
 // container
 #content {
     width: 100%;

Breeze.UI/src/styles.css

@@ -61,6 +61,20 @@ code {
   color: #fff !important;
 }
 
+.datepicker__input {
+  border-color: transparent !important;
+  padding: 0 !important;
+  text-align: left;
+  color: #99A4B4 !important;
+  width: 100%;
+  text-align: center;
+  /* WebKit, Blink, Edge */
+}
+
+.datepicker__input::-webkit-input-placeholder {
+  color: #d4d8df;
+}
+
 #content {
   width: 100%;
   position: relative;