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;
+}

app/views/contacts/_contact_form.html.erb

@@ -3,7 +3,7 @@
     <h1>Contact Form</h1>
   </div>
   <%= form_for @contact, url: home_index_path, method: :create, data: { turbo: false } do |f| %>
-    <hr class="color-secondary" />
+    <hr class="color-dark-blue" />
     <div class="form-group">
       <%= f.label :name %></br>
       <%= f.text_field  :name, required: true, class: "form-control" %></br>

app/views/layouts/_header.html.erb

@@ -1,4 +1,4 @@
-<header class="bg-dark-blue py-5">
+<header class="bg-dark-blue py-5 relative">
   <div class="container px-5">
     <div class="row gx-5 justify-content-center">
       <div class="col-lg-6">
@@ -10,4 +10,10 @@
       </div>
     </div>
   </div>
+
+  <div class="custom-shape-divider-bottom-triangle">
+    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+      <path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
+    </svg>
+  </div>
 </header>

app/views/qpa/index.html.erb

@@ -1,19 +1,6 @@
-<!-- Header-->
-<header class="bg-dark-blue py-5">
-  <div class="container px-5">
-    <div class="row gx-5 justify-content-center">
-      <div class="col-lg-6">
-        <div class="text-center my-5">
-          <h1 class="display-5 fw-bolder text-white mb-2">Quality Performance Assessment</h1>
-          <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</header>
+<%= render partial: "layouts/header", locals: {heading: "Quality Performance Assessment"}  %>
 
-<div class="container px-5">
+<div class="container my-5 px-5">
   <!-- QPA accordions -->
   <div class="row gx-5 justify-content-center">
     <div class="accordion my-5" id="qpaAccordion">

app/views/team/index.html.erb

@@ -1,17 +1,5 @@
 <!-- Header-->
-<header class="bg-dark-blue py-5">
-  <div class="container px-5">
-    <div class="row gx-5 justify-content-center">
-      <div class="col-lg-6">
-        <div class="text-center my-5">
-          <h1 class="display-5 fw-bolder text-white mb-2">Team</h1>
-          <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</header>
+<%= render partial: "layouts/header", locals: {heading: "Team"}  %>
 
 <!-- Team members-->
 <div class="container px-5 text-center">