Pair with design on styling

- Polish subcategory cards
- Make header height consistent
- Refine hover/focus/active states for tabs on Browse

app/assets/stylesheets/bootstrap-overrides.scss

@@ -18,19 +18,23 @@ $spacers: (
   12: ($spacer * 10),
 );
 
-$nav-link-color: $white;
-$nav-link-font-weight: 600;
-$nav-tabs-border-color: transparent;
-$nav-tabs-border-radius: 15px;
 $font-family-base: 'Cabin', sans-serif;
+$body-color: $black;
+
 $headings-font-family: 'Bitter', serif;
 $headings-font-weight: 700;
-$body-color: $black;
-$nav-tabs-link-active-bg: $light-blue;
 
 $btn-border-radius: 0;
 $input-btn-focus-color-opacity: 0.35;
 
+$nav-link-color: $white;
+$nav-link-font-weight: 600;
+$nav-link-hover-color: $nav-link-color;
+$nav-tabs-link-active-bg: $light-blue;
+$nav-tabs-link-hover-border-color: rgba($white, 0.5);
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-radius: 15px;
+
 $accordion-border-radius: 8px;
 $accordion-button-active-bg: $gray-3;
 

app/assets/stylesheets/dashboard.scss

@@ -23,12 +23,8 @@
 }
 
 .subcategory-card {
-  border: 1px solid $gray-2;
-  background-color: $gray-3;
-  min-width: 95%;
-  margin: auto;
-  padding: 8px;
-  font-size: 14px;
+  @extend .p-3;
+  @extend .body-small;
 }
 
 .subcategory-card__benchmark-item {

app/assets/stylesheets/navigation.scss

@@ -7,6 +7,10 @@
   .nav-link {
     @extend .font-bitter;
     background-color: $dark-blue;
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba($white, 0.35);
+    }
   }
 }
 

app/views/dashboard/_quality_framework_indicators.erb

@@ -11,9 +11,9 @@
       </h3>
     </div>
 
-    <p class="body-small text-center"><%= category_presenter.description %></p>
+    <p class="body-small text-center m-0"><%= category_presenter.description %></p>
 
-    <div>
+    <div class="subcategory-card">
       <div class="subcategory-card__benchmark-list">
         <%= render partial: 'subcategory_card', collection: category_presenter.subcategories(academic_year: @academic_year, school: @school).map(&:subcategory_card_presenter) %>
       </div>

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 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-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/dashboard/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for :navigation do %>
-  <h2 class="sub-header color-white">Areas Of Interest</h2>
+  <h2 class="sub-header-2 color-white m-0">Areas Of Interest</h2>
 <% end %>
 
 <svg class="d-none">

app/views/sqm_categories/show.html.erb

@@ -3,7 +3,8 @@
     <% @categories.each do |category| %>
       <div class="nav-item">
         <%= link_to [@district, @school, category, { year: @academic_year.range }], class: ["nav-link", current_page?([@district, @school, category, { year: @academic_year.range }]) ? "active" : ""] do %>
-          <i class="<%= category.icon_class %> me-2"></i> <%= category.name %>
+          <i class="<%= category.icon_class %> <%= category.icon_color_class if current_page?([@district, @school, category, { year: @academic_year.range }]) %> me-2" ></i>
+          <%= category.name %>
         <% end %>
       </div>
     <% end %>