Visual edits. Add triangular shape to headers on all pages

app/assets/stylesheets/partials/_colors.scss

@@ -76,6 +76,7 @@ $ideal: $purple;
 .color-dark-blue {
   color: $dark-blue;
 }
+
 .color-lime {
   color: $lime;
 }
@@ -96,6 +97,10 @@ $ideal: $purple;
   background-color: $primary-lighter;
 }
 
+.bg-color-primary-darker {
+  background-color: $primary-darker;
+}
+
 .bg-color-secondary {
   background-color: $secondary;
 }
@@ -104,6 +109,10 @@ $ideal: $purple;
   background-color: $secondary-lighter;
 }
 
+.bg-color-secondary-darker {
+  background-color: $secondary-darker;
+}
+
 .bg-color-light-blue {
   background-color: $light-blue;
 }
@@ -159,68 +168,3 @@ background-color: $dark-blue;
 .bg-gray {
   background-color: $gray-3;
 }
-
-.bg-warning {
-  background-color: $warning;
-}
-
-.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;
-}
-
-.fill-watch {
-  fill: $watch;
-}
-
-.fill-growth {
-  fill: $growth;
-}
-
-.fill-approval {
-  fill: $approval;
-}
-
-.fill-ideal {
-  fill: $ideal;
-}
-
-.stroke-black {
-  stroke: $black;
-}
-
-.stroke-gray-1 {
-  stroke: $gray-1;
-}
-
-.stroke-gray-2 {
-  stroke: $gray-2;
-}

app/assets/stylesheets/partials/_layout.scss

@@ -6,3 +6,27 @@
 .grid-item {
   padding: 20px;
 }
+
+.custom-shape-divider-bottom-triangle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.custom-shape-divider-bottom-triangle svg {
+  position: relative;
+  display: block;
+  width: calc(100% + 1.3px);
+  height: 72px;
+}
+
+.custom-shape-divider-bottom-triangle .shape-fill {
+  fill: #FFFFFF;
+}
+
+.relative {
+  position: relative;
+}