Style dashboard page

app/assets/stylesheets/colors.scss

@@ -5,12 +5,11 @@ $gray-3: #F9F9F9;
 $white: #FFFFFF;
 $blue: #01788E;
 $red: #C93047;
+$light-blue: #FAFCFD;
 
 $teal: #00B0B3;
 $mint: #B2D236;
 
-$beige: #EFEBE1;
-
 $warning: #FF73C0;
 $watch: #F096AD;
 $growth: #E0BA9A;
@@ -33,8 +32,8 @@ $ideal: #C0FF73;
   color: $blue;
 }
 
-.bg-color-beige {
+.bg-color-light-blue {
-  background-color: $beige;
+  background-color: $light-blue;
 }
 
 .bg-color-blue {

app/assets/stylesheets/sqm_application.scss

@@ -21,3 +21,10 @@ $spacers: (
 .height-56 {
   height: 56px;
 }
+
+.card {
+  @extend .bg-color-white;
+  @extend .p-5;
+  border-radius: 8px;
+  box-shadow: 0 0 6px rgba($black, 0.25);
+}

app/helpers/variance_helper.rb

@@ -28,7 +28,7 @@ module VarianceHelper
   end
 
   def label_width_percentage
-    25
+    30
   end
 
   def graph_width_percentage

app/views/dashboard/_variance_graph.erb

@@ -1,5 +1,3 @@
-<div class="bg-color-white p-4 border-radius-8">
-
 <svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
 
   <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
@@ -27,7 +25,7 @@
     <g id="zone-headings">
       <%= zones.each_with_index do |zone, index| %>
         <text
-            class="zone-header"
+          class="zone-header weight-600"
           x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
           y="<%= heading_gutter / 2 %>"
           text-anchor="middle"
@@ -125,4 +123,3 @@
     </text>
   </svg>
 </svg>
-</div>

app/views/dashboard/index.html.erb

@@ -2,13 +2,10 @@
   <h2 class="h1 color-white">Areas Of Interest</h2>
 <% end %>
 
-<div class="bg-color-beige mt-4 p-5">
+<div class="card">
-
+  <div class="mb-5">
-  <div>
+    <h2 class="h2 color-black">Distance from benchmark</h2>
-    <h2 class="h1 color-red">Distance from benchmark</h2>
-    <p class="body-large mb-6">This graph shows how much a score is above or below the benchmark of any given scale.</p>
   </div>
 
   <%= render partial: "variance_graph", locals: { presenters: @presenters } %>
-
 </div>

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

@@ -2,13 +2,9 @@
   <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">
-        <p class="me-6"><%= link_to image_tag('logo.png', class: 'height-56'), root_path %></p>
+        <%= link_to image_tag('logo.png', class: 'height-56 me-7'), root_path %>
-        <p class="me-4">
+        <a class="h3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
-          <a class="h3 link <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
-        </p>
-        <p>
         <a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
-        </p>
       </div>
 
       <div class="col d-flex justify-content-end">

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

@@ -30,12 +30,14 @@
   <%= render partial: 'layouts/sqm/header' %>
 </div>
 
+<div class="bg-color-light-blue">
   <div class="container">
     <div class="row">
-    <div class="col-12">
+      <div class="col mt-7">
         <%= yield %>
       </div>
     </div>
   </div>
+</div>
 </body>
 </html>