Refactor nav tabs css

app/assets/stylesheets/bootstrap-overrides.scss

@@ -1,3 +1,6 @@
+@import 'colors';
+@import 'fonts';
+
 $spacer: 0.5rem;
 $spacers: (
   0: 0,
@@ -12,3 +15,8 @@ $spacers: (
   9: ($spacer * 7),
   10: ($spacer * 8),
 );
+
+$nav-link-color: $white;
+$nav-link-font-weight: 600;
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-radius: 15px;

app/assets/stylesheets/colors.scss

@@ -43,12 +43,6 @@ $ideal: #C0FF73;
   background-color: $light-blue;
 }
 
-.nav-tabs {
-  .bg-color-dark-blue {
-    background-color: $dark-blue;
-  }
-}
-
 .bg-color-blue {
   background-color: $blue;
 }

app/assets/stylesheets/navigation.scss

@@ -1,12 +1,15 @@
+@import 'colors';
+@import 'fonts';
+
 .nav-tabs {
   margin-bottom: -1rem;
-  border-bottom: 1px solid transparent;
+
   .nav-link {
-    color: white;
+    @extend .font-bitter;
-    border-top-left-radius: 15px;
+    background-color: $dark-blue;
-    border-top-right-radius: 15px;
   }
 }
+
 .nav-item {
   margin-right: 1px;
 }

app/views/sqm_categories/show.html.erb

@@ -2,7 +2,7 @@
   <nav class="nav nav-tabs">
     <% @categories.each do |category| %>
       <div class="nav-item">
-        <%= link_to [@district, @school, category, { year: @academic_year.range }], class: ["font-bitter", "weight-600","nav-link", "bg-color-dark-blue", current_page?([@district, @school, category, { year: @academic_year.range }]) ? "active" : ""] do %>
+        <%= 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="fa fa-<%= category.icon %> me-2"></i> <%= category.name %>
         <% end %>
       </div>