Add harvey ball legend to sqm indicators card

app/assets/stylesheets/colors.scss

@@ -57,6 +57,10 @@ $ideal: $purple;
   background-color: $white;
 }
 
+.bg-color-gray-3 {
+  background-color: $gray-3;
+}
+
 .fill-black {
   fill: $black;
 }

app/assets/stylesheets/dashboard.scss

@@ -1,5 +1,7 @@
 @import 'bootstrap';
+@import 'colors';
 @import 'fonts';
+@import 'borders';
 
 .graph-header {
   @extend .font-bitter;
@@ -10,6 +12,15 @@
   font-family: 'Cabin', sans-serif;
 }
 
+.harvey-ball__legend {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  @extend .p-3;
+  @extend .bg-color-gray-3;
+  @extend .border-radius-8;
+}
+
 .category-card {
   flex-basis: 20%;
   height: 600px;

app/assets/stylesheets/fonts.scss

@@ -8,6 +8,10 @@
   font-family: 'Cabin', sans-serif;
 }
 
+.font-size-14 {
+  font-size: 14px;
+}
+
 .weight-700 {
   font-weight: 700;
 }

app/views/dashboard/_quality_framework_indicators.erb

@@ -1,46 +1,3 @@
-<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>
-
-  <symbol viewBox="0 0 24 24" id="one-quarter-circle">
-    <path d="
-                      M 12 0
-                      A 12 12 0 0 1 24 12
-                      L 12 12
-                      L 12 0"
-          stroke="none"
-      />
-    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
-  </symbol>
-
-  <symbol viewBox="0 0 24 24" id="half-circle">
-    <path d="
-                      M 12 0
-                      A 12 12 0 1 1 12 24
-                      L 12 12
-                      L 12 0"
-          stroke="none"
-      />
-    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
-  </symbol>
-
-  <symbol viewBox="0 0 24 24" id="three-quarter-circle">
-    <path d="
-                      M 12 0
-                      A 12 12 0 1 1 0 12
-                      L 12 12
-                      L 12 0"
-          stroke="none"
-      />
-    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
-  </symbol>
-
-  <symbol viewBox="0 0 24 24" id="full-circle">
-    <circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
-  </symbol>
-</svg>
-
 <div class="school-quality-frameworks">
 
   <div class="row mt-5">

app/views/dashboard/index.html.erb

@@ -2,8 +2,73 @@
   <h2 class="sub-header color-white">Areas Of Interest</h2>
 <% end %>
 
+<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>
+
+  <symbol viewBox="0 0 24 24" id="one-quarter-circle">
+    <path d="
+                      M 12 0
+                      A 12 12 0 0 1 24 12
+                      L 12 12
+                      L 12 0"
+          stroke="none"
+      />
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="half-circle">
+    <path d="
+                      M 12 0
+                      A 12 12 0 1 1 12 24
+                      L 12 12
+                      L 12 0"
+          stroke="none"
+      />
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="three-quarter-circle">
+    <path d="
+                      M 12 0
+                      A 12 12 0 1 1 0 12
+                      L 12 12
+                      L 12 0"
+          stroke="none"
+      />
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="full-circle">
+    <circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
+  </symbol>
+</svg>
+
 <div class="card">
-  <h2 class="sub-header-2">School Quality Framework Indicators</h2>
+  <div class="d-flex justify-content-between align-items-center">
+    <h2 class="sub-header-2">School Quality Framework Indicators</h2>
+
+    <div class="harvey-ball__legend">
+      <div class="font-size-14">Warning</div>
+      <svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+        <use class="fill-warning" xlink:href="#empty-circle"></use>
+      </svg>
+      <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+        <use class="fill-watch" xlink:href="#one-quarter-circle"></use>
+      </svg>
+      <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+        <use class="fill-growth" xlink:href="#half-circle"></use>
+      </svg>
+      <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+        <use class="fill-approval" xlink:href="#three-quarter-circle"></use>
+      </svg>
+      <svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+        <use class="fill-ideal" xlink:href="#full-circle"></use>
+      </svg>
+      <div class="font-size-14">Ideal</div>
+    </div>
+  </div>
 
   <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
 </div>