Style focus states, margin for logo, popover borders, accordions

app/assets/stylesheets/bootstrap-overrides.scss

@@ -41,7 +41,7 @@ $accordion-button-icon: url("data:image/svg+xml,<svg width='13' height='8' viewB
 $accordion-button-active-icon: url("data:image/svg+xml,<svg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.97266 0.875C6.62109 0.558594 6.09375 0.558594 5.77734 0.875L0.996094 5.65625C0.644531 6.00781 0.644531 6.53516 0.996094 6.85156L1.76953 7.66016C2.12109 7.97656 2.64844 7.97656 2.96484 7.66016L6.375 4.25L9.75 7.66016C10.0664 7.97656 10.6289 7.97656 10.9453 7.66016L11.7539 6.85156C12.0703 6.53516 12.0703 6.00781 11.7539 5.65625L6.97266 0.875Z' fill='#01788E'/> </svg>");
 $accordion-icon-width: 12px;
 
-$popover-border-color: transparent;
+$popover-border-color: $gray-2;
 $popover-border-radius: 4px;
 $popover-body-padding-x: map-get($spacers, 4);
 $popover-body-padding-y: map-get($spacers, 4);

app/assets/stylesheets/navigation.scss

@@ -1,6 +1,11 @@
 @import 'colors';
 @import 'fonts';
 
+a:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba($blue, 0.35);
+}
+
 .nav-tabs {
   margin-bottom: -1rem;
 

app/assets/stylesheets/sqm_application.scss

@@ -47,7 +47,6 @@
   flex-basis: 33%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
 }
 

app/views/dashboard/_subcategory_card.html.erb

@@ -1,5 +1,5 @@
 <div class="subcategory-card__benchmark-item">
-  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %> data-bs-content="This subcategory is not displayed due to limited availability of school admin data and/or low survey response rates.">
+  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %>  data-bs-placement="top" data-bs-content="This subcategory is not displayed due to limited availability of school admin data and/or low survey response rates.">
     <use class="harvey-ball harvey-ball--<%= subcategory_card.color %>" xlink:href="#<%= subcategory_card.harvey_ball_icon %>"></use>
   </svg>
 

app/views/layouts/home.html.erb

@@ -13,7 +13,7 @@
   <div class="container">
     <div class="row py-4 justify-content-between align-items-center">
       <div class="col d-flex justify-content-start align-items-center">
-        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56 me-7'), welcome_path %>
+        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56'), welcome_path, class: 'me-7' %>
       </div>
     </div>
   </div>

app/views/layouts/sqm/_header.html.erb

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row py-4 justify-content-between align-items-center">
       <div class="col d-flex justify-content-start align-items-center">
-        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56 me-7'), welcome_path %>
+        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56'), welcome_path, class: 'me-7' %>
         <a class="sub-header-3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
         <a class="sub-header-3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
       </div>

app/views/sqm_categories/_subcategory_section.html.erb

@@ -16,7 +16,7 @@
     <div class="arrow"></div>
   </div>
 
-  <div class="measure-card d-flex justify-space-between p-7">
+  <div class="measure-card d-flex p-7">
     <% subcategory.measure_presenters.each do |measure_presenter| %>
       <%= render partial: "measures_section", locals: { measure_presenter: measure_presenter } %>
     <% end %>