From b1c7ba3f0f768d4ff1550eb6f66f3511da4201c3 Mon Sep 17 00:00:00 2001
From: Alex Basson <abasson@vmware.com>
Date: Mon, 18 Oct 2021 14:28:52 -0400
Subject: [PATCH] Update the color palate; move harvey ball indicators above
 variance graph

---
 app/assets/stylesheets/borders.scss           |  8 +++-
 app/assets/stylesheets/colors.scss            | 47 ++++++++++++++-----
 app/assets/stylesheets/dashboard.scss         |  2 +-
 app/assets/stylesheets/sqm_application.scss   |  3 +-
 .../_quality_framework_indicators.erb         |  6 +--
 app/views/dashboard/_variance_graph.erb       | 11 +++--
 app/views/dashboard/index.html.erb            | 12 +++--
 7 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/app/assets/stylesheets/borders.scss b/app/assets/stylesheets/borders.scss
index ba56ce08..31a52887 100644
--- a/app/assets/stylesheets/borders.scss
+++ b/app/assets/stylesheets/borders.scss
@@ -1,3 +1,9 @@
+@import 'colors';
+
 .border-radius-8 {
   border-radius: 8px;
-}
\ No newline at end of file
+}
+
+.border-gray-2 {
+  border: 1px solid $gray-2;
+}
diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index 84c95a89..a38cd534 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -1,23 +1,29 @@
 $black: #3E3A38;
 $gray-1: #595959;
 $gray-2: #CECECE;
-$gray-3: #F9F9F9;
-$gray-4: #F3F3F3;
-
+$gray-3: #F3F3F3;
+$light-blue: #FAFCFD;
 $white: #FFFFFF;
+
 $blue: #01788E;
-$red: #C93047;
-$light-blue: #FAFCFD;
 $dark-blue: #004D61;
 
+$red: #C93047;
+$dark-red: #920020;
+
+$gold: #FFC857;
+$light-gold: #FFFAEE;
+$purple: #49416D;
+$light-purple: #EDECF0;
+
 $teal: #00B0B3;
-$mint: #B2D236;
+$lime: #B2D236;
 
-$warning: #FF73C0;
-$watch: #F096AD;
-$growth: #E0BA9A;
-$approval: #D0DD86;
-$ideal: #C0FF73;
+$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;
 }
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 0645c0d9..31a2285a 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/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;
diff --git a/app/assets/stylesheets/sqm_application.scss b/app/assets/stylesheets/sqm_application.scss
index 49c98e53..d0f369ab 100644
--- a/app/assets/stylesheets/sqm_application.scss
+++ b/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;
 }
diff --git a/app/views/dashboard/_quality_framework_indicators.erb b/app/views/dashboard/_quality_framework_indicators.erb
index 0cf0d053..2b3d26bd 100644
--- a/app/views/dashboard/_quality_framework_indicators.erb
+++ b/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| %>
diff --git a/app/views/dashboard/_variance_graph.erb b/app/views/dashboard/_variance_graph.erb
index deb79b38..65821877 100644
--- a/app/views/dashboard/_variance_graph.erb
+++ b/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>
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index d1864b22..72515319 100644
--- a/app/views/dashboard/index.html.erb
+++ b/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: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
+  <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
 </div>
 
-  <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
+<div class="card">
+  <h2 class="sub-header-2">Distance from benchmark</h2>
+
+  <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
+</div>