Use bootstrap to style dashboard

app/assets/stylesheets/_sizes.scss

@@ -1,8 +0,0 @@
-$unit: 8px;
-
-$xsmall: $unit / 4;  // 2px
-$small: $unit / 2;   // 4px
-$medium: $unit;      // 8px
-$large: $unit * 2;   // 16px
-$xlarge: $unit * 3;  // 24px
-$xxlarge: $unit * 4; // 32px

app/assets/stylesheets/_variables.scss

@@ -5,4 +5,4 @@ $lightgreen: #C8E6C9; // lightgreen
 $lightred: #FFCDD2; // lightred
 $lightyellow: #fcf5e2; // lightyellow
 $orange: #ffab40; // orange
-$link: #007bff
+$link: #007bff;

app/assets/stylesheets/application.scss

@@ -1,5 +1,15 @@
+$spacer: 8px;
+$spacers: (
+        0: 0,
+        1: ($spacer * .25),
+        2: ($spacer * .5),
+        3: $spacer,
+        4: ($spacer * 1.5),
+        5: ($spacer * 3),
+        6: ($spacer * 5)
+);
+
 @import "bootstrap";
-@import "spacing";
 @import "fonts";
 @import "colors";
 @import "borders";

app/assets/stylesheets/borders.scss

@@ -1,5 +1,3 @@
-@import "sizes";
-
 .border-radius-8 {
-  border-radius: $unit;
+  border-radius: 8px;
 }

app/assets/stylesheets/spacing.scss

@@ -1,55 +0,0 @@
-@import 'sizes';
-
-.pv80 {
-  padding-top: 80px;
-  padding-bottom: 80px;
-}
-
-.ph120 {
-  padding-left: 120px;
-  padding-right: 120px;
-}
-
-$whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left);
-
-@function expand_whitespace_key($key) {
-  @each $pair in $whitespace-keys {
-    $short: nth($pair, 1);
-    $long: nth($pair, 2);
-
-    // v and h need to pass in 2 parameters
-    @if (length($pair) == 3) {
-      $long: (nth($pair, 2) nth($pair, 3));
-    }
-    @if $short == $key {
-      @return $long;
-    }
-  }
-  @warn "Couldn't export #{$key}";
-  @return $key;
-}
-
-$types: (p, m);
-$locations: (a, v, h, t, r, b, l);
-$t-shirt-sizes: (n, xs, s, m, l, xl, xxl);
-
-@mixin whitespace($units: ()) {
-  $units: join(0, $units);
-
-  @for $i from 1 through length($units) {
-    $t-shirt-size: nth($t-shirt-sizes, $i);
-    $size: nth($units, $i);
-
-    @each $location in $locations {
-      @each $type in $types {
-        .#{$type}#{$location}#{$t-shirt-size} {
-          @each $whitespace-location in expand_whitespace_key($location) {
-            #{expand_whitespace_key($type)}#{$whitespace-location}: $size !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include whitespace(($xsmall, $small, $medium, $large, $xlarge, $xxlarge));

app/views/dashboard/index.html.erb

@@ -1,24 +1,24 @@
 <h1><%= @school.name %></h1>
 
-<div class="beige-bg ph120 pv80">
+<div class="beige-bg px-6 py-4">
   <div class="fdr fjb fac">
     <h2 class="h1">Areas Of Interest</h2>
-    <div>
-      <select name="academic-year">
+    <div class="fdr">
+      <select class="ml-3 custom-select-lg" name="academic-year">
         <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
       </select>
 
-      <select name="district">
+      <select class="ml-3 custom-select-lg" name="district">
         <option value="<%= @district.slug %>" selected><%= @district.name %></option>
       </select>
 
-      <select name="school">
+      <select class="ml-3 custom-select-lg" name="school">
         <option value="<%= @school.slug %>" selected><%= @school.name %></option>
       </select>
     </div>
   </div>
 
-  <div class="mtl">
+  <div class="mt-4">
     <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>
   </div>