resolve spacing issues (#3875)

* fix spacing, style the info to match other info boxes

* more spacing

* consolidate spacing classes

app/views/insured/consumer_roles/_immigration_document_fields.html.erb

@@ -6,14 +6,14 @@
       <label for="immigration_doc_type" class="weight-n"><%= l10n("insured.consumer_roles.select_doc_type") %></label>
       <%= select_tag :immigration_doc_type, options_for_select(VlpDocument.immigration_document_types, selected: vlp_doc_subject), {id: 'immigration_doc_type', prompt: l10n("insured.consumer_roles.select_doc_type")} %>
     </div>
-    <div class="<%= 'hidden_field' unless show_naturalization_doc_type(f.object) %>" id="naturalization_doc_type_select">
+    <div class="<%= 'hidden_field' unless show_naturalization_doc_type(f.object) %> mb-4" id="naturalization_doc_type_select">
       <label for="naturalization_doc_type" class="weight-n"><%= l10n("insured.consumer_roles.select_doc_type") %></label>
       <%= select_tag :naturalization_doc_type, options_for_select([['Certificate of citizenship','Certificate of Citizenship'], ['Naturalization certificate', 'Naturalization Certificate']], selected: vlp_doc_subject), {id: 'naturalization_doc_type', prompt: l10n("insured.consumer_roles.select_doc_type")} %>
     </div>
     <input id="vlp_doc_target_id" value='<%= f.object.id %>' type='hidden' />
     <input id="vlp_doc_target_type" value='<%= f.object.class %>' type='hidden' />
 
-    <div class="vlp_doc_area">
+    <div class="vlp_doc_area mb-4">
     </div>
   </div>
 <% else %>

app/views/shared/_ssn_coverage_msg.html.erb

@@ -1,8 +1,22 @@
-<br />
+<% if @bs4 %>
+<div id="ssn-coverage-msg">
+  <div class="alert alert-info d-flex mt-4" role="info">
+    <div>
+      <div class="info-icon icon" alt="info" aria-hidden="true">&nbsp;</div>
+    </div>
+    <div class="my-1">
+      Even if you don’t want health coverage for yourself, providing your SSN can be helpful since it can speed up the application process. We use SSNs to check income and other information to see who’s eligible for help with health coverage costs.
+    </div>
+  </div>
+</div>
+
+<% else %>
+  <br />
   <div id="ssn-coverage-msg">
     <div class="col-md-12 col-sm-12 col-xs-12 no-pd">
       <div class="alert alert-success alert-dismissible">
       Even if you don’t want health coverage for yourself, providing your SSN can be helpful since it can speed up the application process. We use SSNs to check income and other information to see who’s eligible for help with health coverage costs.
       </div>
     </div>
-  </div>
+  </div>
+<% end %>