From a939d9fcb43e8466d44e7d3736d918831a1f2595 Mon Sep 17 00:00:00 2001
From: Lucas Brown <lucas@tune.com>
Date: Fri, 2 Aug 2019 15:50:02 -0800
Subject: [PATCH] Updated formatting of the signup, login and error pages.

---
 cmd/web-app/static/assets/css/sb-admin-2.css  | 25 +++++++++---
 .../templates/content/error-generic.gohtml    |  2 +-
 .../templates/content/signup-step1.gohtml     | 39 ++++++++++++-------
 .../templates/content/user-login.gohtml       |  1 -
 4 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/cmd/web-app/static/assets/css/sb-admin-2.css b/cmd/web-app/static/assets/css/sb-admin-2.css
index 90de565..2bdfe65 100755
--- a/cmd/web-app/static/assets/css/sb-admin-2.css
+++ b/cmd/web-app/static/assets/css/sb-admin-2.css
@@ -11641,20 +11641,20 @@ a:focus {
 }
 
 .bg-login-image {
-  background: url("https://source.unsplash.com/K4mSJ7kc0As/600x800");
-  background-position: center;
+  background: url("https://dzuyel7n94hma.cloudfront.net/accelerator/img/saas-starter-kit-go-lang-login-600x800.png");
+  background-position: top center;
   background-size: cover;
 }
 
 .bg-register-image {
-  background: url("https://source.unsplash.com/Mv9hjnEUHR4/600x800");
-  background-position: center;
+  background: url("https://dzuyel7n94hma.cloudfront.net/accelerator/img/saas-starter-kit-go-lang-join-600x1000.png");
+  background-position: top center;
   background-size: cover;
 }
 
 .bg-password-image {
-  background: url("https://source.unsplash.com/oWTW-jNGl9I/600x800");
-  background-position: center;
+  background: url("https://dzuyel7n94hma.cloudfront.net/accelerator/img/saas-starter-kit-go-lang-green-600x800.png");
+  background-position: top center;
   background-size: cover;
 }
 
@@ -11674,6 +11674,19 @@ form.user .btn-user {
   padding: 0.75rem 1rem;
 }
 
+.form-control-select-wrapper {
+  font-size: 0.8rem;
+  border-radius: 10rem;
+  padding: .55rem 1rem;
+  border: 1px solid #d1d3e2;
+}
+.form-control-select-box {
+  font-size: 0.8rem;
+  padding: 0;
+  border: 0px;
+}
+
+
 .btn-google {
   color: #fff;
   background-color: #ea4335;
diff --git a/cmd/web-app/templates/content/error-generic.gohtml b/cmd/web-app/templates/content/error-generic.gohtml
index f1bbb51..cd6abe3 100644
--- a/cmd/web-app/templates/content/error-generic.gohtml
+++ b/cmd/web-app/templates/content/error-generic.gohtml
@@ -6,7 +6,7 @@
     <div class="container-fluid">
 
         <!-- Error Text -->
-        <div class="text-center">
+        <div class="text-center mt-5">
             <div class="error mx-auto" data-text="{{ .statusCode }}">{{ .statusCode }}</div>
             <p class="lead text-gray-800 mb-5">{{ .errorMessage }}</p>
             {{ if .fullError }}
diff --git a/cmd/web-app/templates/content/signup-step1.gohtml b/cmd/web-app/templates/content/signup-step1.gohtml
index 5502991..b474a31 100644
--- a/cmd/web-app/templates/content/signup-step1.gohtml
+++ b/cmd/web-app/templates/content/signup-step1.gohtml
@@ -1,4 +1,4 @@
-{{define "title"}}Crean an Account{{end}}
+{{define "title"}}Create an Account{{end}}
 {{define "style"}}
 
 {{end}}
@@ -16,7 +16,14 @@
                                 <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
                             </div>
                             {{ template "top-error" . }}
+
+                            <hr>
                             <form class="user" method="post" novalidate>
+
+                                <div>
+                                    <h2 class="h5 text-gray-900 mt-3 mb-3">Your Organization details</h2>
+                                </div>
+
                                 <div class="form-group row">
                                     <div class="col-sm-6 mb-3 mb-sm-0">
                                         <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Account.Name" }}" name="Account.Name" value="{{ $.form.Account.Name }}" placeholder="Company Name" required>
@@ -35,16 +42,18 @@
                                 </div>
                                 <div class="form-group row">
                                     <div class="col-sm-6 mb-3 mb-sm-0">
-                                        <select class="form-control {{ ValidationFieldClass $.validationErrors "Account.Country" }}" id="selectAccountCountry" name="Account.Country" placeholder="Country" required>
-                                            {{ range $i := $.countries }}
-                                                {{ $hasGeonames := false }}
-                                                {{ range $c := $.geonameCountries }}
-                                                    {{ if eq $c $i.Code }}{{ $hasGeonames = true }}{{ end }}
+                                        <div class="form-control-select-wrapper">
+                                            <select class="form-control form-control-select-box {{ ValidationFieldClass $.validationErrors "Account.Country" }}" id="selectAccountCountry" name="Account.Country" placeholder="Country" required>
+                                                {{ range $i := $.countries }}
+                                                    {{ $hasGeonames := false }}
+                                                    {{ range $c := $.geonameCountries }}
+                                                        {{ if eq $c $i.Code }}{{ $hasGeonames = true }}{{ end }}
+                                                    {{ end }}
+                                                    <option value="{{ $i.Code }}" data-geonames="{{ if $hasGeonames  }}1{{ else }}0{{ end }}" {{ if eq $.form.Account.Country $i.Code }}selected="selected"{{ end }}>{{ $i.Name }}</option>
                                                 {{ end }}
-                                                <option value="{{ $i.Code }}" data-geonames="{{ if $hasGeonames  }}1{{ else }}0{{ end }}" {{ if eq $.form.Account.Country $i.Code }}selected="selected"{{ end }}>{{ $i.Name }}</option>
-                                            {{ end }}
-                                        </select>
-                                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Account.Country" }}
+                                            </select>
+                                            {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Account.Country" }}
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="form-group row">
@@ -57,7 +66,7 @@
                                         {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Account.Region" }}
                                     </div>
                                 </div>
-                                <div class="form-group row">
+                                <div class="form-group row mb-4">
                                     <div class="col-sm-6 mb-3 mb-sm-0">
                                         <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Account.City" }}" id="inputAccountCity" name="Account.City" value="{{ $.form.Account.City }}" placeholder="City" required>
                                         {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Account.City" }}
@@ -70,6 +79,10 @@
 
                                 <hr>
 
+                                <div>
+                                    <h2 class="h5 text-gray-900 mt-3 mb-3">Your User details</h2>
+                                </div>
+
                                 <div class="form-group row">
                                     <div class="col-sm-6 mb-3 mb-sm-0">
                                         <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "User.FirstName" }}" name="User.FirstName" value="{{ $.form.User.FirstName }}" placeholder="First Name" required>
@@ -128,7 +141,7 @@
                 if ($(this).find('option:selected').attr('data-geonames') == 1) {
 
                     // Replace the existing region with an empty dropdown.
-                    $('#divAccountRegion').html('<select class="form-control {{ ValidationFieldClass $.validationErrors "Account.Region" }}" id="inputAccountRegion" name="Account.Region" value="{{ $.form.Account.Region }}" placeholder="Region" required></select>');
+                    $('#divAccountRegion').html('<div class="form-control-select-wrapper"><select class="form-control form-control-select-box {{ ValidationFieldClass $.validationErrors "Account.Region" }}" id="inputAccountRegion" name="Account.Region" value="{{ $.form.Account.Region }}" placeholder="Region" required></select></div>');
 
                     // Query the API for a list of regions for the selected
                     // country and populate the region dropdown.
@@ -165,7 +178,7 @@
                     */
 
                     // Replace the existing zipcode text input with a new one that will supports autocomplete.
-                    $('#divAccountZipcode').html('<input class="form-control {{ ValidationFieldClass $.validationErrors "Account.Zipcode" }}" id="inputAccountZipcode"  name="Account.Zipcode" value="{{ $.form.Account.Zipcode }}" placeholder="Zipcode" required>');
+                    $('#divAccountZipcode').html('<input class="form-control  form-control-user {{ ValidationFieldClass $.validationErrors "Account.Zipcode" }}" id="inputAccountZipcode"  name="Account.Zipcode" value="{{ $.form.Account.Zipcode }}" placeholder="Zipcode" required>');
                     $('#inputAccountZipcode').autoComplete({
                         minLength: 2,
                         events: {
diff --git a/cmd/web-app/templates/content/user-login.gohtml b/cmd/web-app/templates/content/user-login.gohtml
index ecfe5ac..985fadd 100644
--- a/cmd/web-app/templates/content/user-login.gohtml
+++ b/cmd/web-app/templates/content/user-login.gohtml
@@ -40,7 +40,6 @@
                                         </button>
                                         <hr>
                                     </form>
-                                    <hr>
                                     <div class="text-center">
                                         <a class="small" href="/user/forgot-password">Forgot Password?</a>
                                     </div>