Update styles for new case contact form (#5557)

* Update border color of checkboxes and radio buttons Co-authored-by: Nate <[email protected]> * right-align form buttons Co-authored-by: Jade <[email protected]> * add title case * Style buttons on mobile view * Modify checkbox styling to be in separate SCSS file * display different title tags for mobile view * Fix tests * Modify font-size of text in TitleComponent --------- Co-authored-by: JP <[email protected]> Co-authored-by: compwron <[email protected]>
rubyforgood · May 23, 2024 · c6b08da · c6b08da
1 parent 4a045fc
commit c6b08da
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 15 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -32,6 +32,7 @@
 @use "pages/casa_cases";
 @use "pages/casa_org";
 @use "pages/case_contacts";
+@use "pages/case_contacts_form";
 @use "pages/court_dates";
 @use "pages/emancipation";
 @use "pages/feature_flags";

diff --git a/app/assets/stylesheets/pages/case_contacts_form.scss b/app/assets/stylesheets/pages/case_contacts_form.scss
@@ -0,0 +1,31 @@
+@use "../base/breakpoints.scss" as screen-sizes;
+
+.case-contacts-form {
+  &-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      & > a, & > button {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  &-checkbox {
+    border-color: #757575;
+  }
+
+  &-title {
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      font-size: 28px;
+    } 
+  }
+
+  &-subtitle {
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      font-size: 24px;
+    } 
+  }
+}
diff --git a/app/components/form/title_component.html.erb b/app/components/form/title_component.html.erb
@@ -1,14 +1,14 @@
 <div class="title-wrapper pt-30">
   <div class="title mb-30">
     <div class="align-items-baseline d-md-flex gap-3">
-      <h1><%= @title %></h1>
+      <h1 class="case-contacts-form-title"><%= @title %></h1>
       <% if @autosave %>
         <small data-autosave-target="alert"></small>
       <% end %>
     </div>
 
     <div class="row align-items-center mt-5">
-      <h2 class="col-12 col-md-6"><%= @subtitle %></h2>
+      <h2 class="col-12 col-md-6 case-contacts-form-subtitle"><%= @subtitle %></h2>
       <% if @progress %>
         <div class="col-12 col-md-6 align-items-center d-flex gap-2 mt-2 mt-md-0">
           <p class="col-auto">

diff --git a/app/views/case_contacts/form/details.html.erb b/app/views/case_contacts/form/details.html.erb
@@ -14,7 +14,7 @@
               casa_case.id,
               @case_contact.draft_case_ids.include?(casa_case.id),
               id: "case_contact_draft_case_id_#{casa_case.id}",
-              class: ["form-check-input", "casa-case-id"] %>
+              class: ["form-check-input", "casa-case-id", "case-contacts-form-checkbox"] %>
             <label class="form-check-label" for="case_contact_draft_case_id_<%= casa_case.id %>">
               <%= casa_case.case_number %>
             </label>
@@ -37,15 +37,15 @@
           <%= form.radio_button :contact_made, true,
             checked: @case_contact.contact_made,
             required: true,
-            class: 'form-check-input' %>
+            class: ["form-check-input", "case-contacts-form-checkbox"] %>
           <%= form.label "Yes", class: "form-check-label",
             for: "case_contact_contact_made_true" %>
         </div>
         <div class="form-check radio-style mb-20">
           <%= form.radio_button :contact_made, false,
             checked: set_contact_made_false(@case_contact),
             required: true,
-            class: 'form-check-input' %>
+            class: ["form-check-input", "case-contacts-form-checkbox"] %>
           <%= form.label "No", class: "form-check-label",
             for: "case_contact_contact_made_false" %>
         </div>
@@ -55,7 +55,7 @@
         <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") %>
+            <%= b.radio_button(class: ["form-check-input", "case-contacts-form-checkbox"]) %>
             <%= b.label(class: "form-check-label") %>
           </div>
         <% end %>
@@ -90,13 +90,13 @@
       </div>
     </div>
     <% end %>
-    <div class="actions mb-10 d-flex justify-content-between">
+    <div class="actions mb-10 case-contacts-form-buttons">
       <%= link_to leave_case_contacts_form_path, class: "btn-sm main-btn #{@case_contact.draft_case_ids.empty? ? 'danger' : 'primary'}-btn-outline btn-hover", data: { controller: "alert", "action": "alert#confirm", "alert-ignore-value": !@case_contact.draft_case_ids.empty?, "alert-title-value": "Discard draft?", "alert-message-value": "Are you sure? If you don't save and continue to the next step, this draft will not be recoverable." } do %>
         Back
       <% end %>
 
       <%= button_tag( type: "submit" , class: "btn-sm main-btn primary-btn btn-hover" ) do %>
-        <i class="lni lni-checkmark-circle mr-5"></i> Save and continue
+        <i class="lni lni-checkmark-circle mr-5"></i> Save and Continue
       <% end %>
     </div>
   <% end %>

diff --git a/app/views/case_contacts/form/expenses.html.erb b/app/views/case_contacts/form/expenses.html.erb
@@ -16,14 +16,14 @@
           <div class="form-check radio-style mb-20">
             <%= form.radio_button :want_driving_reimbursement, true,
               required: false,
-              class: 'form-check-input' %>
+              class: ["form-check-input", "case-contacts-form-checkbox"] %>
             <%= form.label "Yes", class: "form-check-label",
               for: "case_contact_want_driving_reimbursement_true" %>
           </div>
           <div class="form-check radio-style mb-20">
             <%= form.radio_button :want_driving_reimbursement, false,
               required: false,
-              class: 'form-check-input' %>
+              class: ["form-check-input", "case-contacts-form-checkbox"] %>
             <%= form.label "No", class: "form-check-label",
               for: "case_contact_want_driving_reimbursement_false" %>
           </div>
@@ -144,7 +144,7 @@
       </div>
     <% end %>
 
-    <div class="actions mb-10 d-flex justify-content-end gap-2">
+    <div class="actions mb-10 case-contacts-form-buttons">
       <%= link_to previous_wizard_path(case_contact_id: @case_contact.id), class: "btn-sm main-btn primary-btn-outline btn-hover" do %>
         Back
       <% end %>

diff --git a/app/views/case_contacts/form/notes.html.erb b/app/views/case_contacts/form/notes.html.erb
@@ -30,13 +30,13 @@
         </div>
       </div>
 
-      <div class="actions mb-10 d-flex justify-content-between">
+      <div class="actions mb-10 case-contacts-form-buttons">
         <%= link_to previous_wizard_path(case_contact_id: @case_contact.id), class: "btn-sm main-btn primary-btn-outline btn-hover" do %>
           Back
         <% end %>
 
         <%= button_tag( type: "submit" , class: "btn-sm main-btn primary-btn btn-hover" ) do %>
-          <i class="lni lni-checkmark-circle mr-5"></i> Save and continue
+          <i class="lni lni-checkmark-circle mr-5"></i> Save and Continue
         <% end %>
       </div>
     <% end %>

diff --git a/spec/support/fill_in_case_contact_fields.rb b/spec/support/fill_in_case_contact_fields.rb
@@ -29,14 +29,14 @@ def complete_details_page(contact_made:, medium: nil, occurred_on: nil, hours: n
       check contact_topic
     end
 
-    click_on "Save and continue"
+    click_on "Save and Continue"
   end
 
   # @param notes [String]
   def complete_notes_page(notes: "", click_continue: true)
     fill_in "Additional notes", with: notes
 
-    click_on "Save and continue" if click_continue
+    click_on "Save and Continue" if click_continue
   end
 
   # This intentionally does not submit the form