Remove global span tag CSS, add title to table supervisor list counts and remove extra closing div tag

Author: Sergio-Mira

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 volunteer-info 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 volunteer-info 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="volunteer-info 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="volunteer-info success-bg text-white mb-10">Number of Volunteers attempting contact (within 2 weeks)</span><br>
+          <span class="volunteer-info danger-bg text-white mb-10">Number of Volunteers not attempting contact (within 2 weeks)</span><br>
+          <span class="volunteer-info 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="volunteer-info 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="volunteer-info 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="volunteer-info 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="volunteer-info 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,
@@ -510,6 +507,14 @@ h6,
   .buttons-group li {
     margin: 10px; }
 
+/* ====== Supervisor Volunteer Info ====== */
+.volunteer-info {
+  display: block;
+  padding: 7px 15px;
+  border-radius: 30px;
+  font-size: 14px;
+  font-weight: 400; }
+
 /* ====== Status Button ====== */
 .status-btn {
   padding: 7px 15px;