Update the color palate; move harvey ball indicators above variance graph

app/assets/stylesheets/borders.scss

@@ -1,3 +1,9 @@
+@import 'colors';
+
 .border-radius-8 {
   border-radius: 8px;
-}
+}
+
+.border-gray-2 {
+  border: 1px solid $gray-2;
+}

app/assets/stylesheets/colors.scss

@@ -1,23 +1,29 @@
 $black: #3E3A38;
 $gray-1: #595959;
 $gray-2: #CECECE;
-$gray-3: #F9F9F9;
-$gray-4: #F3F3F3;
-
-$white: #FFFFFF;
-$blue: #01788E;
-$red: #C93047;
+$gray-3: #F3F3F3;
 $light-blue: #FAFCFD;
+$white: #FFFFFF;
+
+$blue: #01788E;
 $dark-blue: #004D61;
 
-$teal: #00B0B3;
-$mint: #B2D236;
+$red: #C93047;
+$dark-red: #920020;
 
-$warning: #FF73C0;
-$watch: #F096AD;
-$growth: #E0BA9A;
-$approval: #D0DD86;
-$ideal: #C0FF73;
+$gold: #FFC857;
+$light-gold: #FFFAEE;
+$purple: #49416D;
+$light-purple: #EDECF0;
+
+$teal: #00B0B3;
+$lime: #B2D236;
+
+$warning: $gold;
+$watch: $gold;
+$growth: $gold;
+$approval: $purple;
+$ideal: $purple;
 
 .color-red {
   color: $red;
@@ -56,7 +62,7 @@ $ideal: #C0FF73;
 }
 
 .bg-gray {
-  background-color: $gray-4;
+  background-color: $gray-3;
 }
 
 .bg-warning {
@@ -66,15 +72,32 @@ $ideal: #C0FF73;
 .bg-watch {
   background-color: $watch;
 }
+
 .bg-growth {
   background-color: $growth;
 }
+
 .bg-approval {
   background-color: $approval;
 }
+
 .bg-ideal {
   background-color: $ideal;
 }
+
+.bg-fill-warning,
+.bg-fill-watch,
+.bg-fill-growth
+{
+  fill: $light-gold;
+}
+
+.bg-fill-approval,
+.bg-fill-ideal
+{
+  fill: $light-purple;
+}
+
 .fill-warning {
   fill: $warning;
 }

app/assets/stylesheets/dashboard.scss

@@ -39,7 +39,7 @@
 
 .subcategory-card {
   border: 1px solid #CECECE;
-  background-color: $gray-4;
+  background-color: $gray-3;
   min-width: 95%;
   margin: auto;
   padding: 8px;

app/assets/stylesheets/sqm_application.scss

@@ -16,6 +16,7 @@
 
 .card {
   @extend .bg-color-white;
+  @extend .mb-5;
   @extend .p-5;
   border-radius: 8px;
   box-shadow: 0 0 6px rgba($black, 0.25);
@@ -80,5 +81,5 @@
   border-top-color: transparent;
   border-right-color: transparent;
   border-left-color: transparent;
-  border-bottom-color: $gray-4;
+  border-bottom-color: $gray-3;
 }

app/views/dashboard/_quality_framework_indicators.erb

@@ -1,4 +1,4 @@
-<svg>
+<svg class="d-none">
   <symbol viewBox="0 0 24 24" id="empty-circle">
     <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
   </symbol>
@@ -41,9 +41,7 @@
   </symbol>
 </svg>
 
-
-<div class="school-quality-frameworks card mt-5 p-4 border-radius-8">
-  <h2 class="sub-header-2">School Quality Framework Indicators</h2>
+<div class="school-quality-frameworks">
 
   <div class="row mt-5">
     <% category_presenters.each do |category_presenter| %>

app/views/dashboard/_variance_graph.erb

@@ -5,8 +5,8 @@
       <feFuncA type="table" tableValues="1 0"/>
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="4"/>
-    <feOffset dx="0" dy="5" result="offsetblur"/>
-    <feFlood flood-color="rgb(0, 0, 0)" result="color"/>
+    <feOffset dx="0" dy="0" result="offsetblur"/>
+    <feFlood flood-color="rgb(62, 58, 56, 0.25)" result="color"/>
     <feComposite in2="offsetblur" operator="in"/>
     <feComposite in2="SourceAlpha" operator="in"/>
     <feMerge>
@@ -21,6 +21,7 @@
     y="0"
     width="<%= graph_width_percentage %>%"
     height=<%= graph_background_height(number_of_rows: presenters.size) %>
+    filter="url(#inset-shadow)"
   >
     <g id="zone-headings">
       <%= zones.each_with_index do |zone, index| %>
@@ -40,13 +41,13 @@
       <%= zones.each_with_index do |zone, index| %>
         <rect
           id="<%= zone %>-zone"
-          class="zone-background fill-<%= zone %>"
+          class="zone-background bg-fill-<%= zone %>"
           x="<%= index * zone_width_percentage %>%"
           y="0"
           width="<%= zone_width_percentage %>%"
           height="100%"
-          opacity="0.2"
-          filter="url(#inset-shadow)"
+          stroke="#CECECE"
+          stroke-width="1"
           />
       <% end %>
     </g>

app/views/dashboard/index.html.erb

@@ -3,11 +3,13 @@
 <% end %>
 
 <div class="card">
-  <div class="mb-5">
-    <h2 class="sub-header-2 color-black">Distance from benchmark</h2>
-  </div>
+  <h2 class="sub-header-2">School Quality Framework Indicators</h2>
+
+  <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
+</div>
+
+<div class="card">
+  <h2 class="sub-header-2">Distance from benchmark</h2>
 
   <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
 </div>
-
-  <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>