Add typography and color styles

app/assets/stylesheets/application.scss

@@ -4,9 +4,10 @@ $spacers: (
         1: ($spacer * .25),
         2: ($spacer * .5),
         3: $spacer,
-        4: ($spacer * 1.5),
+        4: ($spacer * 2),
         5: ($spacer * 3),
-        6: ($spacer * 5)
+        6: ($spacer * 4),
+        7: ($spacer * 5),
 );
 
 @import "bootstrap";

app/assets/stylesheets/colors.scss

@@ -1,14 +1,50 @@
-$red: #C92F47;
+$black: #3E3A38;
+$gray-1: #595959;
+$gray-2: #CECECE;
+$gray-3: #F9F9F9;
+$white: #FFFFFF;
+$blue: #01788E;
+$red: #C93047;
+
+$teal: #00B0B3;
+$mint: #B2D236;
+
 $beige: #EFEBE1;
 
+$warning: #FF73C0;
+$watch: #F096AD;
+$growth: #E0BA9A;
+$approval: #D0DD86;
+$ideal: #C0FF73;
+
 .red {
   color: $red;
 }
 
-.beige-bg {
+.bg-beige {
   background-color: $beige;
 }
 
-.white-bg {
+.bg-white {
-  background-color: white;
+  background-color: $white;
+}
+
+.fill-warning {
+  fill: $warning;
+}
+
+.fill-watch {
+  fill: $watch;
+}
+
+.fill-growth {
+  fill: $growth;
+}
+
+.fill-approval {
+  fill: $approval;
+}
+
+.fill-ideal {
+  fill: $ideal;
 }

app/assets/stylesheets/fonts.scss

@@ -25,9 +25,41 @@
   font-size: 40px;
 }
 
-.p {
+.h2 {
+  @extend .font-bitter;
+  @extend .weight-700;
+  font-size: 28px;
+}
+
+.h3 {
+  @extend .font-bitter;
+  @extend .weight-700;
+  font-size: 20px;
+}
+
+.h4 {
+  @extend .font-bitter;
+  @extend .weight-600;
+  font-size: 16px;
+}
+
+.body-large {
+  @extend .font-cabin;
+  @extend .weight-400;
+  font-size: 16px;
+  line-height: 1.3;
+}
+
+.body-small {
   @extend .font-cabin;
   @extend .weight-400;
-  font-size: 17px;
+  font-size: 14px;
+  line-height: 1.3;
 }
 
+.link {
+  @extend .font-cabin;
+  @extend .weight-600;
+  font-size: 16px;
+  color: $blue;
+}

app/models/measure_graph_parameters.rb

@@ -1,9 +0,0 @@
-module MeasureGraphParameters
-  module ZoneColor
-    WARNING = "#FF73C0"
-    WATCH = "#F096AD"
-    GROWTH = "#E0BA9A"
-    APPROVAL = "#D0DD86"
-    IDEAL = "#C0FF73"
-  end
-end

app/presenters/measure_graph_row_presenter.rb

@@ -9,18 +9,7 @@ class MeasureGraphRowPresenter
   end
 
   def bar_color
-    case zone.type
+    "fill-#{zone.type}"
-    when :ideal
-      MeasureGraphParameters::ZoneColor::IDEAL
-    when :approval
-      MeasureGraphParameters::ZoneColor::APPROVAL
-    when :growth
-      MeasureGraphParameters::ZoneColor::GROWTH
-    when :watch
-      MeasureGraphParameters::ZoneColor::WATCH
-    else
-      MeasureGraphParameters::ZoneColor::WARNING
-    end
   end
 
   def bar_width

app/views/dashboard/_measure_bar_graph.erb

@@ -1,4 +1,4 @@
-<div class="white-bg p-4 border-radius-8">
+<div class="bg-white p-4 border-radius-8">
 
   <% heading_gutter = 30 %>
   <% footer_gutter = 50 %>
@@ -35,11 +35,11 @@
       </g>
 
       <g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
-        <rect id="warning-zone" x="0" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WARNING %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="warning-zone" class="fill-warning" x="0" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="watch-zone" x="16.67%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WATCH %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="watch-zone" class="fill-watch" x="16.67%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="growth-zone" x="33.33%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::GROWTH %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="growth-zone" class="fill-growth" x="33.33%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="approval-zone" x="50%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::APPROVAL %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="approval-zone" class="fill-approval" x="50%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="ideal-zone" x="75%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::IDEAL %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="ideal-zone" class="fill-ideal" x="75%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
 
         <rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black"/>
       </g>
@@ -54,7 +54,7 @@
 
       <svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%">
         <%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
-          <rect class="measure-row-bar" x="<%= presenter.x_offset %>" y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>" width="<%= presenter.bar_width %>" height=<%= measure_row_bar_height %> fill=<%= presenter.bar_color %> />
+          <rect class="measure-row-bar <%= presenter.bar_color %>" x="<%= presenter.x_offset %>" y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>" width="<%= presenter.bar_width %>" height=<%= measure_row_bar_height %> />
         <% end %>
       </svg>
     </g>

app/views/dashboard/index.html.erb

@@ -1,7 +1,6 @@
 <h1><%= @school.name %></h1>
 
-<div class="beige-bg px-6 py-4">
+<div class="fdr fjb fac">
-  <div class="fdr fjb fac">
   <h2 class="h1">Areas Of Interest</h2>
   <div class="fdr">
     <select class="ml-3 custom-select-lg" name="academic-year">
@@ -16,13 +15,15 @@
       <option value="<%= @school.slug %>" selected><%= @school.name %></option>
     </select>
   </div>
-  </div>
+</div>
+
+<div class="bg-beige mt-4 p-5">
 
-  <div class="mt-4">
+  <div>
     <h2 class="h1 red">Distance from benchmark</h2>
-    <p class="p">This graph shows how much a score is above or below the benchmark of any given scale.</p>
+    <p class="body-large">This graph shows how much a score is above or below the benchmark of any given scale.</p>
   </div>
 
-  <%= render  partial: "measure_bar_graph", locals: { measure_graph_row_presenters: @measure_graph_row_presenters}%>
+  <%= render partial: "measure_bar_graph", locals: { measure_graph_row_presenters: @measure_graph_row_presenters } %>
 
 </div>

spec/presenters/measure_graph_row_presenter_spec.rb

@@ -33,7 +33,7 @@ RSpec.describe MeasureGraphRowPresenter do
     it_behaves_like 'measure_name'
 
     it('returns the correct color') do
-      expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::IDEAL
+      expect(presenter.bar_color).to eq "fill-ideal"
     end
 
     it('returns a bar width equal to the approval zone width plus the proportionate ideal zone width') do
@@ -51,7 +51,7 @@ RSpec.describe MeasureGraphRowPresenter do
     it_behaves_like 'measure_name'
 
     it("returns the correct color") do
-      expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::APPROVAL
+      expect(presenter.bar_color).to eq "fill-approval"
     end
 
     it('returns a bar width equal to the proportionate approval zone width') do
@@ -69,7 +69,7 @@ RSpec.describe MeasureGraphRowPresenter do
     it_behaves_like 'measure_name'
 
     it("returns the correct color") do
-      expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::GROWTH
+      expect(presenter.bar_color).to eq "fill-growth"
     end
 
     it('returns a bar width equal to the proportionate growth zone width') do
@@ -87,7 +87,7 @@ RSpec.describe MeasureGraphRowPresenter do
     it_behaves_like 'measure_name'
 
     it("returns the correct color") do
-      expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::WATCH
+      expect(presenter.bar_color).to eq "fill-watch"
     end
 
     it('returns a bar width equal to the proportionate watch zone width plus the growth zone width') do
@@ -105,7 +105,7 @@ RSpec.describe MeasureGraphRowPresenter do
     it_behaves_like 'measure_name'
 
     it("returns the correct color") do
-      expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::WARNING
+      expect(presenter.bar_color).to eq "fill-warning"
     end
 
     it('returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths') do