Add cateory icon to home page

app/assets/stylesheets/buttons.scss

@@ -1,12 +1,12 @@
 @import "colors";
 
 .view-details {
-  background-color: #01788E;
+  background-color: $blue;
   font-family: 'Bitter', sans-serif;
   font-weight: 600;
   font-size: 14px;
   color: $white;
   padding: 8px 16px;
-  border: 0px;
+  border: 0;
   text-decoration: none;
 }

app/assets/stylesheets/colors.scss

@@ -41,6 +41,14 @@ $ideal: $purple;
   color: $blue;
 }
 
+.color-lime {
+  color: $lime;
+}
+
+.color-teal {
+  color: $teal;
+}
+
 .color-gray-2 {
   color: $gray-2;
 }

app/presenters/category_presenter.rb

@@ -17,19 +17,36 @@ class CategoryPresenter
     @category.slug
   end
 
-  def icon
+  def icon_class
-    case name
+    icon_suffix = case name
-    when 'Teachers & Leadership'
+                  when 'Teachers & Leadership'
-      'apple-alt'
+                    'apple-alt'
-    when 'School Culture'
+                  when 'School Culture'
-      'school'
+                    'school'
-    when 'Resources'
+                  when 'Resources'
-      'users-cog'
+                    'users-cog'
-    when 'Academic Learning'
+                  when 'Academic Learning'
-      'graduation-cap'
+                    'graduation-cap'
-    else 'Community & Wellbeing'
+                  when 'Community & Wellbeing'
-       'heart'
+                    'heart'
-    end
+                  end
+    "fas fa-#{icon_suffix}"
+  end
+
+  def icon_color_class
+    color_suffix = case name
+                   when 'Teachers & Leadership'
+                     'blue'
+                   when 'School Culture'
+                     'red'
+                   when 'Resources'
+                     'black'
+                   when 'Academic Learning'
+                     'lime'
+                   when 'Community & Wellbeing'
+                     'teal'
+                   end
+    "color-#{color_suffix}"
   end
 
   def subcategories(academic_year:, school:)

app/views/dashboard/_quality_framework_indicators.erb

@@ -1,7 +1,7 @@
 <div class="mt-5 school-quality-frameworks">
   <% category_presenters.each do |category_presenter| %>
     <div class="text-center">
-      <i class="fa fa-<%= category_presenter.icon %> fa-2x color-gray-2"></i>
+      <i class="<%= category_presenter.icon_class %> fa-2x color-gray-2"></i>
     </div>
     <div class="text-center">
       <h3 class="sub-header-3">

app/views/home/index.html.erb

@@ -44,7 +44,7 @@
             <div class="accordion-item">
               <h3 class="accordion-header" id="<%= category.slug %>-header">
                 <button class="accordion-button sub-header-4 collapsed" data-bs-toggle="collapse" data-bs-target="#<%= category.slug %>-item" aria-expanded="false" aria-controls="<%= category.slug %>-item">
-                  <%= category.name %>
+                  <i class="<%= category.icon_class %> fa-lg fa-fw me-3 <%= category.icon_color_class %>"></i> <%= category.name %>
                 </button>
               </h3>
               <div id="<%= category.slug %>-item" class="accordion-collapse collapse" aria-labelledby="<%= category.slug %>-header" data-bs-parent="#landing-accordion">

app/views/sqm_categories/show.html.erb

@@ -3,7 +3,7 @@
     <% @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="fa fa-<%= category.icon %> me-2"></i> <%= category.name %>
+          <i class="<%= category.icon_class %> me-2"></i> <%= category.name %>
         <% end %>
       </div>
     <% end %>

spec/presenters/category_presenter_spec.rb

@@ -44,10 +44,18 @@ describe CategoryPresenter do
   end
 
   it 'returns the correct icon for the given category' do
-    expect(teachers_and_leadership_presenter.icon).to eq 'apple-alt'
+    expect(teachers_and_leadership_presenter.icon_class).to eq 'fas fa-apple-alt'
-    expect(school_culture_presenter.icon).to eq 'school'
+    expect(school_culture_presenter.icon_class).to eq 'fas fa-school'
-    expect(resources_presenter.icon).to eq 'users-cog'
+    expect(resources_presenter.icon_class).to eq 'fas fa-users-cog'
-    expect(academic_learning_presenter.icon).to eq 'graduation-cap'
+    expect(academic_learning_presenter.icon_class).to eq 'fas fa-graduation-cap'
-    expect(community_and_wellbeing_presenter.icon).to eq 'heart'
+    expect(community_and_wellbeing_presenter.icon_class).to eq 'fas fa-heart'
+  end
+
+  it 'returns the correct color for the given category' do
+    expect(teachers_and_leadership_presenter.icon_color_class).to eq 'color-blue'
+    expect(school_culture_presenter.icon_color_class).to eq 'color-red'
+    expect(resources_presenter.icon_color_class).to eq 'color-black'
+    expect(academic_learning_presenter.icon_color_class).to eq 'color-lime'
+    expect(community_and_wellbeing_presenter.icon_color_class).to eq 'color-teal'
   end
 end

spec/views/home/index.html.erb_spec.rb

@@ -5,7 +5,7 @@ describe 'home/index.html.erb' do
 
   before :each do
     assign :districts, [create(:district), create(:district)]
-    assign :categories, [create(:sqm_category)]
+    assign :categories, [CategoryPresenter.new(category: create(:sqm_category))]
     render
   end