LG-393 Redesign IDV verification OTP delivery method template

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

@@ -1,33 +1,52 @@
 h1.h3.my0 = t('idv.titles.otp_delivery_method')
-p = t('idv.messages.otp_delivery_method.phone_number_html',
+p.mt1 = t('idv.messages.otp_delivery_method.phone_number_html',
       phone: @set_otp_delivery_method_presenter.phone)
 = simple_form_for(@otp_delivery_selection_form, url: idv_otp_delivery_method_url,
-  html: { autocomplete: 'off', method: 'put', role: 'form', class: 'mt2' }) do |f|
-  fieldset.mb3.p0.border-none
-    legend.mb1.h4.serif.bold = t('devise.two_factor_authentication.otp_delivery_preference.title')
-    label.btn-border.col-12.sm-col-5.sm-mr2.mb2.sm-mb0
-      .radio
-        = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :sms, true,
-          class: :otp_delivery_preference_sms
-        span.indicator
-        = t('devise.two_factor_authentication.otp_delivery_preference.sms')
-    - if @set_otp_delivery_method_presenter.sms_only?
-      label.btn-border.col-12.sm-col-5.mb0.btn-disabled
+  html: { autocomplete: 'off', method: 'put', role: 'form', class: 'mt3' }) do |f|
+    fieldset.mb3.p0.border-none
+      label.btn-border.col-12.mb1
         .radio
-          = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :voice, false,
-            disabled: true,
-            class: :otp_delivery_preference_voice
-          span.indicator
-          = t('devise.two_factor_authentication.otp_delivery_preference.voice')
-      p.mt2.mb0 = @set_otp_delivery_method_presenter.phone_unsupported_message
-    - else
-      label.btn-border.col-12.sm-col-5.mb0
-        .radio
-          = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :voice, false,
-            class: :otp_delivery_preference_voice
-          span.indicator
-          = t('devise.two_factor_authentication.otp_delivery_preference.voice')
-  = f.submit t('idv.buttons.send_confirmation_code'), type: :submit, class: 'btn btn-primary'
-.mt2.pt1.border-top
-  = t('instructions.mfa.wrong_number_html',
-    link: link_to(t('forms.two_factor.try_again'), idv_phone_path))
+          = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :sms, true,
+            class: :otp_delivery_preference_sms
+          span.indicator.mt-tiny
+          span.blue.bold.fs-20p
+            = t('devise.two_factor_authentication.otp_delivery_preference.sms')
+          .regular.gray-dark.fs-10p.mb-tiny
+            = t('devise.two_factor_authentication.two_factor_choice_options.sms_info')
+      - if @set_otp_delivery_method_presenter.sms_only?
+        label.btn-border.col-12.mb0.btn-disabled
+          .radio
+            = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]',
+              :voice, false,
+              disabled: true,
+              class: :otp_delivery_preference_voice
+            span.indicator.mt-tiny
+            span.blue.bold.fs-20p
+              = t('devise.two_factor_authentication.otp_delivery_preference.voice')
+            .regular.gray-dark.fs-10p.mb-tiny
+              = t('devise.two_factor_authentication.two_factor_choice_options.voice_info')
+                p.mt2.mb0 = @set_otp_delivery_method_presenter.phone_unsupported_message
+      - else
+        label.btn-border.col-12.mb0
+          .radio
+            = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]',
+              :voice, false,
+              class: :otp_delivery_preference_voice
+            span.indicator.mt-tiny
+            span.blue.bold.fs-20p
+              = t('devise.two_factor_authentication.otp_delivery_preference.voice')
+            .regular.gray-dark.fs-10p.mb-tiny
+              = t('devise.two_factor_authentication.two_factor_choice_options.voice_info')
+      .mt3
+        = t('idv.form.no_alternate_phone_html',
+        link: link_to(t('idv.form.activate_by_mail'), idv_usps_path))
+      .mt2
+        = t('instructions.mfa.wrong_number_html',
+        link: link_to(t('forms.two_factor.try_again'), idv_phone_path))
+    .mt3
+      = f.submit t('idv.buttons.send_confirmation_code'),
+        type: :submit,
+        class: 'sm-col-6 col-12 btn btn-primary'
+.mt3.border-top
+  .mt1
+    = link_to t('links.cancel'), idv_phone_path

config/locales/idv/en.yml

@@ -8,7 +8,7 @@ en:
       mail:
         resend: Send another letter
         send: Send a letter
-      send_confirmation_code: Send confirmation code
+      send_confirmation_code: Continue
     cancel:
       modal_header: Are you sure you want to cancel?
       warning_header: If you cancel now
@@ -96,7 +96,7 @@ en:
       loading: Verifying your identity
       mail_sent: Your letter is on its way
       otp_delivery_method:
-        phone_number_html: We will send a code to <strong>%{phone}</strong>
+        phone_number_html: We'll send a code to <strong>%{phone}</strong>
       personal_key: This is your new personal key. Write it down and keep it in a
         safe place. You will need it if you ever lose your password.
       phone:
@@ -177,7 +177,7 @@ en:
         resend: Want another letter?
         verify: Want a letter?
       no_id: We are unable to verify your identity without a state-issued ID
-      otp_delivery_method: Get a code by phone
+      otp_delivery_method: How would you like to receive a code?
       phone: Phone number of record
       review: Review and submit
       select_verification: Choose how to confirm your address