Merge pull request #5726 from JoshDevHub/5348_enter_contact_details_case_contact_form

Restyle Enter Contact Details form on case contact form

Author: compwron

app/components/form/hour_minute_duration_component.html.erb

@@ -1,19 +1,21 @@
-<div class="row align-items-center">
-  <div class="input-style-1 col pl-0">
+<div class="d-flex flex-column flex-lg-row gap-2">
+  <div class="col input-style-1">
     <%= @form.label :duration_hours, "Hour(s)" %>
     <%= @form.number_field :duration_hours,
       min: 0,
-      class: "cc-field",
+      class: "form-control",
       size: "10",
+      style: "background:white",
       value: @hour_value,
       required: true %>
   </div>
-  <div class="input-style-1 col">
+  <div class="col input-style-1">
     <%= @form.label :duration_minutes, "Minute(s)" %>
     <%= @form.number_field :duration_minutes,
       min: 0,
-      class: "cc-field",
+      class: "form-control",
       size: "10",
+      style: "background:white",
       value: @minute_value,
       required: true %>
   </div>

app/views/case_contacts/form/details.html.erb

@@ -30,9 +30,9 @@
     </div>
 
     <div id="enter-contact-details" class="card-style-1 pl-25 mb-10">
-      <h4 class="mb-3"><label>3. Enter Contact Details</label><span class="red-letter"> *</span></h4>
+      <h4 class="mb-3"><label>3. Record contact details</label><span class="red-letter"> *</span></h4>
       <div class="">
-        <h5 classs="mb-3"><label>a. Contact Made</label></h5>
+        <h5 classs="mb-3"><label>a. Was contact made?</label></h5>
         <div class="form-check radio-style mb-20">
           <%= form.radio_button :contact_made, true,
             checked: @case_contact.contact_made,
@@ -52,7 +52,7 @@
       </div>
 
       <div class="field contact-medium form-group">
-        <h5 classs="mb-3"><label>b. Contact Medium</label></h5>
+        <h5 classs="mb-3"><label>b. How was contact made?</label></h5>
         <%= form.collection_radio_buttons(:medium_type, contact_mediums, 'value', 'label') do |b| %>
           <div class="form-check radio-style mb-20">
             <%= b.radio_button(class: "form-check-input") %>
@@ -62,7 +62,7 @@
       </div>
 
       <div class="pr-50">
-        <h5 class="mb-3"><%= form.label :occurred_at, "c. Occurred On" %></h5>
+        <h5 class="mb-3"><%= form.label :occurred_at, "c. Date of contact" %></h5>
         <div class="input-style-1">
           <% occurred_at = @case_contact.occurred_at || Time.zone.now %>
           <%= render "layouts/components/ranged_date_picker",
@@ -72,7 +72,7 @@
       </div>
 
       <div class="pr-50 ">
-        <h5 class="mb-3"><label>d. Duration of Meeting</label></h5>
+        <h5 class="mb-3"><label>d. Duration of contact</label></h5>
         <%= render(Form::HourMinuteDurationComponent.new(form: form, hour_value: duration_hours(@case_contact), minute_value: duration_minutes(@case_contact))) %>
       </div>
     </div>