From 717987c8e5637b488cf6286c6af570e16467eeb1 Mon Sep 17 00:00:00 2001
From: JP <85654561+jp524@users.noreply.github.com>
Date: Thu, 23 May 2024 15:22:47 -0500
Subject: [PATCH] Modify font-size of text in TitleComponent

---
 .../stylesheets/pages/case_contacts_form.scss | 22 ++++++++-----------
 app/components/form/title_component.html.erb  |  6 ++---
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/pages/case_contacts_form.scss b/app/assets/stylesheets/pages/case_contacts_form.scss
index 5d924bf0d1..6007418ba6 100644
--- a/app/assets/stylesheets/pages/case_contacts_form.scss
+++ b/app/assets/stylesheets/pages/case_contacts_form.scss
@@ -15,21 +15,17 @@
 
   &-checkbox {
     border-color: #757575;
-}
-
-  &.desktop-title {
-    display: none;
-
-    @media only screen and (min-width: screen-sizes.$mobile) {
-      display: block;
-    }
   }
 
-  &.mobile-title {
-    display: block;
+  &-title {
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      font-size: 28px;
+    } 
+  }
 
-    @media only screen and (min-width: screen-sizes.$mobile) {
-      display: none;
-    }
+  &-subtitle {
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      font-size: 24px;
+    } 
   }
 }
\ No newline at end of file
diff --git a/app/components/form/title_component.html.erb b/app/components/form/title_component.html.erb
index a45f0ed5eb..4935a40d4a 100644
--- a/app/components/form/title_component.html.erb
+++ b/app/components/form/title_component.html.erb
@@ -1,16 +1,14 @@
 <div class="title-wrapper pt-30">
   <div class="title mb-30">
     <div class="align-items-baseline d-md-flex gap-3">
-      <h1 class="case-contacts-form desktop-title"><%= @title %></h1>
-      <h2 class="case-contacts-form mobile-title"><%= @title %></h2>
+      <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 case-contacts-form desktop-title"><%= @subtitle %></h2>
-      <h3 class="col-12 col-md-6 case-contacts-form mobile-title"><%= @subtitle %></h3>
+      <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">