Merge pull request #6669 from Sergio-Mira/5377-remove-global-span-css

Remove global span tag CSS

Author: compwron

app/javascript/src/dashboard.js

@@ -455,7 +455,7 @@ $(() => { // JQuery's callback for the DOM loading
           const activeContactElement = activeContactVolunteers
             ? (
             `
-            <span class="attempted-contact status-btn success-bg text-white pl-${activeContactVolunteers * 15} pr-${activeContactVolunteers * 15}">
+            <span class="attempted-contact supervisor-stat success-bg text-white pl-${activeContactVolunteers * 15} pr-${activeContactVolunteers * 15}" title="Number of Volunteers attempting contact (within 2 weeks)">
               ${activeContactVolunteers}
             </span>
             `
@@ -465,7 +465,7 @@ $(() => { // JQuery's callback for the DOM loading
           const noContactElement = noContactVolunteers > 0
             ? (
             `
-            <span class="no-attempted-contact status-btn danger-bg text-white pl-${noContactVolunteers * 15} pr-${noContactVolunteers * 15}">
+            <span class="no-attempted-contact supervisor-stat danger-bg text-white pl-${noContactVolunteers * 15} pr-${noContactVolunteers * 15}" title="Number of Volunteers not attempting contact (within 2 weeks)">
               ${noContactVolunteers}
             </span>
             `
@@ -476,7 +476,7 @@ $(() => { // JQuery's callback for the DOM loading
           if (activeContactVolunteers <= 0 && noContactVolunteers <= 0) {
             volunteersCounterElement = '<span class="no-volunteers" style="flex-grow: 1">No assigned volunteers</span>'
           } else {
-            volunteersCounterElement = `<span class="status-btn deactive-bg text-black pl-${transitionAgedCaseVolunteers * 15} pr-${transitionAgedCaseVolunteers * 15}">${transitionAgedCaseVolunteers}</span>`
+            volunteersCounterElement = `<span class="supervisor-stat deactive-bg text-black pl-${transitionAgedCaseVolunteers * 15} pr-${transitionAgedCaseVolunteers * 15}" title="Count of Transition Aged Youth">${transitionAgedCaseVolunteers}</span>`
           }
 
           return `

app/views/casa_admins/index.html.erb

@@ -58,4 +58,3 @@
     </div>
   </div>
 </div>
-</div>

app/views/supervisors/index.html.erb

@@ -48,9 +48,9 @@
       <div class="card-style mb-30">
         <h6 class="mb-10">Legend for Supervisor List</h6>
         <p class="text-sm mb-20">
-          <span class="status-btn success-bg text-white mb-10">Number of Volunteers attempting contact (within 2 weeks)</span><br>
-          <span class="status-btn danger-bg text-white mb-10">Number of Volunteers not attempting contact (within 2 weeks)</span><br>
-          <span class="status-btn deactive-bg text-black">Count of Transition Aged Youth</span>
+          <span class="supervisor-stat success-bg text-white mb-10">Number of Volunteers attempting contact (within 2 weeks)</span><br>
+          <span class="supervisor-stat danger-bg text-white mb-10">Number of Volunteers not attempting contact (within 2 weeks)</span><br>
+          <span class="supervisor-stat deactive-bg text-black">Count of Transition Aged Youth</span>
         </p>
         <div class="table-wrapper table-responsive">
           <table
@@ -78,20 +78,20 @@
 
                     <div class="d-flex flex-row w-100">
                       <% if active_volunteers %>
-                        <div class="status-btn success-bg text-white flex-grow-1" style="max-width: <%= (active_volunteers * 15) %>%; text-align: center"><%= active_volunteers %></div>
+                        <div class="supervisor-stat success-bg text-white flex-grow-1" style="max-width: <%= (active_volunteers * 15) %>%; text-align: center"><%= active_volunteers %></div>
                       <% end %>
                       <% if no_attempt_volunteers.nonzero? %>
-                        <div class="status-btn danger-bg text-white flex-grow-1" style="max-width: <%= (no_attempt_volunteers * 15) %>%; text-align: center"><%= no_attempt_volunteers %></div>
+                        <div class="supervisor-stat danger-bg text-white flex-grow-1" style="max-width: <%= (no_attempt_volunteers * 15) %>%; text-align: center"><%= no_attempt_volunteers %></div>
                       <% else %>
                         <div class="flex-grow-1"></div>
                       <% end %>
                     </div>
 
                     <div class="d-flex flex-row py-2" style="max-width: 50%;">
                       <% if !(active_volunteers || no_attempt_volunteers.nonzero?) %>
-                        <div class="status-btn bg-secondary text-white">No assigned volunteers</div>
+                        <div class="supervisor-stat bg-secondary text-white">No assigned volunteers</div>
                       <% else %>
-                        <div class="status-btn deactive-bg text-black" style="width:<%= (transition_volunteers * 15) %>; % text-align: center">
+                        <div class="supervisor-stat deactive-bg text-black" style="width:<%= (transition_volunteers * 15) %>; % text-align: center">
                           <%= transition_volunteers %>
                         </div>
                       <% end %>

public/assets/css/main.css

@@ -54,9 +54,6 @@ i,
 a {
   display: inline-block; }
 
-span {
-    display: block; }
-}
 audio,
 canvas,
 iframe,
@@ -3859,4 +3856,12 @@ h6,
   font-weight: 800; }
 
 .fw-900 {
-  font-weight: 900; }
+  font-weight: 900; }
+
+/* ====== Supervisor Stats ====== */
+.supervisor-stat {
+  display: block;
+  padding: 7px 15px;
+  border-radius: 30px;
+  font-size: 14px;
+  font-weight: 400; }

spec/system/supervisors/index_spec.rb

@@ -363,7 +363,7 @@
       expect(active_contact_element).to match_css(".pr-#{active_contacts_expected * 15}")
       expect(no_active_contact_element).to have_text(no_active_contacts_expected)
       expect(no_active_contact_element).to match_css(".pl-#{no_active_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
     end
 
     it "shows the correct volunteers for the second supervisor with both volunteer types", :js do
@@ -381,7 +381,7 @@
       expect(active_contact_element).to match_css(".pr-#{active_contacts_expected * 15}")
       expect(no_active_contact_element).to have_text(no_active_contacts_expected)
       expect(no_active_contact_element).to match_css(".pl-#{no_active_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
     end
 
     it "shows the correct element for a supervisor with only contact volunteers", :js do
@@ -395,7 +395,7 @@
 
       expect(active_contact_element).to have_text(active_contacts_expected)
       expect(active_contact_element).to match_css(".pl-#{active_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
       expect(supervisor_stats).not_to have_css("span.no-attempted-contact")
     end
 
@@ -410,7 +410,7 @@
 
       expect(no_contact_element).to have_text(no_contacts_expected)
       expect(no_contact_element).to match_css(".pl-#{no_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
       expect(supervisor_stats).not_to have_css("span.attempted-contact")
       expect(supervisor_stats).not_to have_css("span.attempted-contact-end")
     end