Design edits for LG-881

app/assets/stylesheets/components/_list.scss

@@ -18,11 +18,11 @@
 }
 
 .circle-number {
-  font-size: 13px;
+  font-size: 1rem;
   font-weight: bold;
-  height: 20px;
+  height: 1.6rem;
   text-align: center;
-  width: 20px;
+  width: 1.6rem;
 }
 
 .success-bullets {

app/views/idv/address/new.html.slim

@@ -1,31 +1,32 @@
 -title t('doc_auth.titles.doc_auth')
 
-h1.h3 = t('doc_auth.headings.address')
+h1.h3.my0 = t('doc_auth.headings.address')
 
-= simple_form_for(:idv_form, url: idv_address_path, method: 'POST',
-        html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do |f|
+.mt3.mb3
+  = simple_form_for(:idv_form, url: idv_address_path, method: 'POST',
+          html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do |f|
 
-  = f.input :address1, label: t('idv.form.address1'), wrapper_html: { class: 'mb1' },
-          required: true, maxlength: 255
-  = f.input :address2, label: t('idv.form.address2'), required: false, maxlength: 255
-  = f.input :city, label: t('idv.form.city'), required: true, maxlength: 255
+    = f.input :address1, label: t('idv.form.address1'), wrapper_html: { class: 'mb1' },
+            required: true, maxlength: 255
+    = f.input :address2, label: t('idv.form.address2'), required: false, maxlength: 255
+    = f.input :city, label: t('idv.form.city'), required: true, maxlength: 255
 
-  .clearfix.mxn1
-    .sm-col.sm-col-8.px1
-      = f.input :state, collection: us_states_territories,
-              label: t('idv.form.state'), required: true,
-              prompt: '- Select -'
+    .clearfix.mxn1
+      .sm-col.sm-col-8.px1
+        = f.input :state, collection: us_states_territories,
+                label: t('idv.form.state'), required: true,
+                prompt: '- Select -'
 
-    .sm-col.sm-col-4.px1
-      / using :tel for mobile numeric keypad
-      = f.input :zipcode, as: :tel,
-              label: t('idv.form.zipcode'), required: true,
-              pattern: '(\d{5}([\-]\d{4})?)',
-              input_html: { class: 'zipcode' }
+      .sm-col.sm-col-4.px1
+        / using :tel for mobile numeric keypad
+        = f.input :zipcode, as: :tel,
+                label: t('idv.form.zipcode'), required: true,
+                pattern: '(\d{5}([\-]\d{4})?)',
+                input_html: { class: 'zipcode' }
 
-  .mt0
-    button type='submit' class='btn btn-primary btn-wide sm-col-6 col-12'
-      = t('forms.buttons.continue')
+    .mt0
+      button type='submit' class='btn btn-primary btn-wide mt2 sm-col-6 col-12'
+        = t('forms.buttons.continue')
 
 .mt2.pt1.border-top
   = link_to t('links.cancel'), idv_cancel_path, class: 'h5'

app/views/idv/doc_auth/back_image.html.slim

@@ -1,21 +1,19 @@
--title t('doc_auth.titles.doc_auth')
+- title t('doc_auth.titles.doc_auth')
 
-h1.h3.mb0 = t('doc_auth.headings.upload_back')
+h1.h3.my0 = t('doc_auth.headings.upload_back')
 
-h5.mt0 = t('doc_auth.info.upload_image')
+= t('doc_auth.info.upload_image')
 = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :back_image), method: 'PUT',
     html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do |f|
   .clearfix.mxn1
-    .sm-col.sm-col-9.px1
+    .sm-col.sm-col-8.px1.mt2
       = f.input :image, label: false, as: 'file', required: true
-
   p = flow_session[:error_message]
-
-  div id= 'target'
-  br
-  .mt4
+  .mb4 id= 'target'
+  .mt2
     button type='submit' class='btn btn-primary btn-wide sm-col-6 col-12'
       = t('forms.buttons.continue')
+br
 
 = render 'start_over_or_cancel'
 == javascript_pack_tag 'image-preview'

app/views/idv/doc_auth/front_image.html.slim

@@ -1,17 +1,16 @@
 - title t('doc_auth.titles.doc_auth')
 
-h1.h3.mb0 = t('doc_auth.headings.upload_front')
+h1.h3.my0 = t('doc_auth.headings.upload_front')
 
-h5.mt0 = t('doc_auth.info.upload_image')
+= t('doc_auth.info.upload_image')
 = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :front_image), method: 'PUT',
         html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do |f|
   .clearfix.mxn1
-    .sm-col.sm-col-8.px1
+    .sm-col.sm-col-8.px1.mt2
       = f.input :image, label: false, as: 'file', required: true
   p.red.bold = flow_session[:error_message]
-  div id= 'target'
-  br
-  .mt0
+  .mb4 id= 'target'
+  .mt2
     button type='submit' class='btn btn-primary btn-wide sm-col-6 col-6'
       = t('forms.buttons.continue')
 br

app/views/idv/doc_auth/ssn.html.slim

@@ -1,11 +1,11 @@
 -title t('doc_auth.titles.doc_auth')
 
-h1.h3 = t('doc_auth.headings.ssn')
+h1.h3.my0 = t('doc_auth.headings.ssn')
 
 = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :ssn), method: 'PUT',
         html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do |f|
   .clearfix.mxn1
-    .sm-col.sm-col-6.px1
+    .sm-col.sm-col-6.px1.mt2
       / using :tel for mobile numeric keypad
       = f.input :ssn, as: :tel,
               label: t('idv.form.ssn_label_html'), required: true,

app/views/idv/doc_auth/upload.html.slim

@@ -1,38 +1,36 @@
 - title t('doc_auth.titles.doc_auth')
 
-h1.h3.mb0 = t('doc_auth.headings.upload')
+h1.h3.mt0.mb1 = t('doc_auth.headings.upload')
 = t('doc_auth.info.upload')
-br
-br
-= link_to t('idv.messages.jurisdiction.no_id'), idv_jurisdiction_failure_path(:no_id)
-br
-br
+
+.mt2.mb3 = link_to t('idv.messages.jurisdiction.no_id'), idv_jurisdiction_failure_path(:no_id)
+
+hr
+
+.clearfix.mt3.mb3
+  .sm-col.sm-col-2 = image_tag asset_url('idv/desktop.png'), width: 100
+  .sm-col.sm-col-1  
+  .sm-col.sm-col-9
+    .bold.h1.mb1 = t('doc_auth.headings.upload_from_computer')
+    = t('doc_auth.info.upload_from_computer')
+    = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :upload, type: :desktop),
+      method: 'PUT', html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do
+      button type='submit' class='btn btn-primary'
+        = t('doc_auth.buttons.use_computer')
+
 hr
-br
-  .clearfix.mxn1
-    .sm-col.sm-col-2 = image_tag asset_url('idv/desktop.png'), width: 100
-    .sm-col.sm-col-1  
-    .sm-col.sm-col-9
-      .bold.h1 = t('doc_auth.headings.upload_from_computer')
-      = t('doc_auth.info.upload_from_computer')
-      = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :upload, type: :desktop),
-        method: 'PUT', html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do
-        button type='submit' class='btn btn-primary'
-          = t('doc_auth.buttons.use_computer')
-  br
-  hr
-  .clearfix.mxn1
-    .sm-col.sm-col-2 = image_tag asset_url('idv/phone.png'), width: 100
-    .sm-col.sm-col-1  
-    .sm-col.sm-col-9
-      .bold.h1 = t('doc_auth.headings.upload_from_phone')
-      = t('doc_auth.info.upload_from_phone')
-      br
-      = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :upload, type: :mobile),
-              method: 'PUT', html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do
-        button type='submit' class='btn btn-primary'
-          = t('doc_auth.buttons.use_phone')
-br
+
+.clearfix.mt3.mb3
+  .sm-col.sm-col-2 = image_tag asset_url('idv/phone.png'), width: 100
+  .sm-col.sm-col-1  
+  .sm-col.sm-col-9
+    .bold.h1.mb1 = t('doc_auth.headings.upload_from_phone')
+    = t('doc_auth.info.upload_from_phone')
+    br
+    = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :upload, type: :mobile),
+            method: 'PUT', html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do
+      button type='submit' class='btn btn-primary'
+        = t('doc_auth.buttons.use_phone')
 
 = render 'start_over_or_cancel'
 == javascript_pack_tag 'image-preview'

app/views/idv/doc_auth/verify.html.slim

@@ -1,21 +1,21 @@
 -title t('doc_auth.titles.doc_auth')
 
-h1.h3 = t('doc_auth.headings.verify')
-
-div = "#{t('doc_auth.forms.first_name')}: #{flow_session[:pii_from_doc][:first_name]}"
-div = "#{t('doc_auth.forms.last_name')}: #{flow_session[:pii_from_doc][:last_name]}"
-div = "#{t('doc_auth.forms.dob')}: #{flow_session[:pii_from_doc][:dob]}"
-hr
-.right = link_to(t('doc_auth.buttons.change_address'), idv_address_url)
-div = "#{t('doc_auth.forms.address1')}: #{flow_session[:pii_from_doc][:address1]}"
-div = "#{t('doc_auth.forms.city')}: #{flow_session[:pii_from_doc][:city]}"
-div = "#{t('doc_auth.forms.state')}: #{flow_session[:pii_from_doc][:state]}"
-div = "#{t('doc_auth.forms.zip_code')}: #{flow_session[:pii_from_doc][:zipcode]}"
-hr
-.right = button_to(t('doc_auth.buttons.change_ssn'), idv_doc_auth_step_path(step: :redo_ssn),
-  method: :put, class: 'btn btn-link')
-= "#{t('doc_auth.forms.ssn')}: #{flow_session[:pii_from_doc][:ssn]}"
-.mt4 = button_to(t('forms.buttons.continue'), idv_doc_auth_step_path(step: :verify), method: :put,
-  class: 'btn btn-primary btn-wide sm-col-6 col-12')
+h1.h3.my0 = t('doc_auth.headings.verify')
+.mt3.mb2
+  div = "#{t('doc_auth.forms.first_name')}: #{flow_session[:pii_from_doc][:first_name]}"
+  div = "#{t('doc_auth.forms.last_name')}: #{flow_session[:pii_from_doc][:last_name]}"
+  div = "#{t('doc_auth.forms.dob')}: #{flow_session[:pii_from_doc][:dob]}"
+  hr
+  .right = link_to(t('doc_auth.buttons.change_address'), idv_address_url)
+  div = "#{t('doc_auth.forms.address1')}: #{flow_session[:pii_from_doc][:address1]}"
+  div = "#{t('doc_auth.forms.city')}: #{flow_session[:pii_from_doc][:city]}"
+  div = "#{t('doc_auth.forms.state')}: #{flow_session[:pii_from_doc][:state]}"
+  div = "#{t('doc_auth.forms.zip_code')}: #{flow_session[:pii_from_doc][:zipcode]}"
+  hr
+  .right = button_to(t('doc_auth.buttons.change_ssn'), idv_doc_auth_step_path(step: :redo_ssn),
+    method: :put, class: 'btn btn-link')
+  = "#{t('doc_auth.forms.ssn')}: #{flow_session[:pii_from_doc][:ssn]}"
+  .mt4 = button_to(t('forms.buttons.continue'), idv_doc_auth_step_path(step: :verify), method: :put,
+    class: 'btn btn-primary btn-wide sm-col-6 col-12')
 
 = render 'start_over_or_cancel'

app/views/idv/doc_auth/welcome.html.slim

@@ -1,28 +1,35 @@
 h1.h3.my0 = t('doc_auth.headings.welcome')
 p.mt-tiny.mb3 = t('doc_auth.info.welcome')
-h1.h3.my0 = t('doc_auth.instructions.welcome')
+h1.h3.mb2 = t('doc_auth.instructions.welcome')
 ul.list-reset
-  li.py2
-    .mr1.inline-block.circle.circle-number.bg-blue.white
+  li.pt2.pb1
+    .inline-block.mr2.mt1.align-top.circle.circle-number.bg-blue.white
       | 1
-    .h1.inline-block.bold = t('doc_auth.instructions.bullet1')
-    br
-    .ml3 = t('doc_auth.instructions.text1')
-  li.py2
-    .mr1.inline-block.circle.circle-number.bg-blue.white
+    .mr1.inline-block
+      .h1.inline-block.bold = t('doc_auth.instructions.bullet1')
+      br
+      = t('doc_auth.instructions.text1')
+  li.pt2.pb1
+    .inline-block.mr2.mt1.align-top.circle.circle-number.bg-blue.white
       | 2
-    .h1.inline-block.bold = t('doc_auth.instructions.bullet2')
-    .ml3 = t('doc_auth.instructions.text2')
-  li.py2
-    .mr1.inline-block.circle.circle-number.bg-blue.white
+    .mr1.inline-block
+      .h1.inline-block.bold = t('doc_auth.instructions.bullet2')
+      br
+      = t('doc_auth.instructions.text2')
+  li.pt2.pb1
+    .inline-block.mr2.mt1.align-top.circle.circle-number.bg-blue.white
       | 3
-    .h1.inline-block.bold = t('doc_auth.instructions.bullet3')
-    .ml3 = t('doc_auth.instructions.text3')
-  li.py2
-    .mr1.inline-block.circle.circle-number.bg-blue.white
-      | 3
-    .h1.inline-block.bold = t('doc_auth.instructions.bullet4')
-    .ml3 = t('doc_auth.instructions.text4')
+    .mr1.inline-block
+      .h1.inline-block.bold = t('doc_auth.instructions.bullet3')
+      br
+      = t('doc_auth.instructions.text3')
+  li.pt2.pb1
+    .inline-block.mr2.mt1.align-top.circle.circle-number.bg-blue.white
+      | 4
+    .mr1.inline-block
+      .h1.inline-block.bold = t('doc_auth.instructions.bullet4')
+      br
+      = t('doc_auth.instructions.text4')
 = simple_form_for(:doc_auth, url: idv_doc_auth_step_path(step: :welcome), method: 'PUT',
         html: { autocomplete: 'off', role: 'form', class: 'mt2' }) do
   br