Visual edits. Add fontawesome and icons. Update colors

app/assets/stylesheets/application.bootstrap.scss

@@ -1,7 +1,9 @@
+@import 'partials/colors';
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
-@import 'partials/colors';
 @import 'partials/bootstrap-overrides';
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
 @import 'partials/layout';
 @import 'partials/links';
 @import 'partials/downloads';

app/assets/stylesheets/partials/_bootstrap-overrides.scss

@@ -1,4 +1,5 @@
 @import 'colors';
+
 .accordion-button:not(.collapsed) {
   color: shade-color($primary, 50%);
 }

app/assets/stylesheets/partials/_colors.scss

@@ -2,19 +2,27 @@ $black: #3E3A38;
 $gray-1: #595959;
 $gray-2: #CECECE;
 $gray-3: #F3F3F3;
-$light-blue: #FAFCFD;
+
+$primary: #7f9df6;
+$primary-lighter:  #b9caff;
+$primary-darker: darken($primary, 30%);
+
+$secondary: #ffab2b; 
+$secondary-lighter: #ffcb7c;
+$secondary-darker: darken($secondary, 30%);
+
 $white: #FFFFFF;
 
 $blue: #01788E;
+$light-blue: #FAFCFD;
 $dark-blue: #1d2742;
 
-// #1d2742;
-
 $red: #C93047;
 $dark-red: #920020;
 
 $gold: #FFC857;
 $light-gold: #FFFAEE;
+
 $purple: #49416D;
 $light-purple: #EDECF0;
 
@@ -27,6 +35,28 @@ $growth: $gold;
 $approval: $purple;
 $ideal: $purple;
 
+.color-primary {
+  color: $primary;
+}
+
+.color-primary-lighter {
+  color: $primary-lighter;
+}
+
+.color-primary-darker {
+  color: $primary-darker;
+}
+.color-secondary {
+  color: $secondary;
+}
+
+.color-secondary-lighter {
+  color: $secondary-lighter;
+}
+
+.color-secondary-darker {
+  color: $secondary-darker;
+}
 .color-red {
   color: $red;
 }
@@ -58,6 +88,22 @@ $ideal: $purple;
   color: $gray-2;
 }
 
+.bg-color-primary {
+  background-color: $primary;
+}
+
+.bg-color-primary-lighter {
+  background-color: $primary-lighter;
+}
+
+.bg-color-secondary {
+  background-color: $secondary;
+}
+
+.bg-color-secondary-lighter {
+  background-color: $secondary-lighter;
+}
+
 .bg-color-light-blue {
   background-color: $light-blue;
 }

app/views/contacts/_contact_form.html.erb

@@ -1,19 +1,29 @@
 <div class="container pb-5">
+  <div class="text-center">
     <h1>Contact Form</h1>
+  </div>
   <%= form_for @contact, url: home_index_path, method: :create, data: { turbo: false } do |f| %>
-    <div class="col-md-6">
+    <hr class="color-secondary" />
+    <div class="form-group">
       <%= f.label :name %></br>
-      <%= f.text_field  :name, required: true, class: "contact-form-text-area" %></br>
+      <%= f.text_field  :name, required: true, class: "form-control" %></br>
+    </div>
 
+    <div class="form-group">
       <%= f.label :email %></br>
-      <%= f.text_field :email, required: true, class: "contact-form-text-area" %></br>
+      <%= f.text_field :email, required: true, class: "form-control" %></br>
+    </div>
 
+    <div class="form-group">
       <%= f.label :organization %></br>
-      <%= f.text_field :organization, required: true, class: "contact-form-text-area" %></br>
+      <%= f.text_field :organization, required: true, class: "form-control" %></br>
+    </div>
 
+    <div class="form-group">
       <%= f.label :message %></br>
-      <%= f.text_area :message, rows: 8, cols: 40, required: true, class: "contact-form-text-area", 
+      <%= f.text_area :message, rows: 8, cols: 40, required: true, class: "form-control", 
         placeholder: "Send me a message"%></br>
+    </div>
 
     <div class= "d-none">
       <%= f.label :nickname %>
@@ -21,6 +31,5 @@
     </div>
 
     <%= f.submit 'Send Message', class: 'btn btn-primary' %>
-    </div>
   <% end %>
 </div>

app/views/qpa/index.html.erb

@@ -87,8 +87,7 @@
               <i class="bi bi-arrow-right"></i>
             </a> </p>
 
-            <%# TODO  link to QPA team section on team page %>
-            <p> <a class="text-decoration-none" href="#!">
+            <p> <a class="text-decoration-none" href="/team">
               Speak with a member of the QPA team
               <i class="bi bi-arrow-right"></i>
             </a> </p>

app/views/sqm/index.html.erb

@@ -4,7 +4,10 @@
 <!-- Accordions -->
 <div class="container px-5">
   <div class="row gx-5 justify-content-center">
-    <div class="accordion my-5" id="sqmAccordion">
+    <div class="col-lg-4 mt-5">
+      <%= image_tag "sqm/framework_wheel.png", style: "width: 100%;"  %>
+    </div>
+    <div class="col-lg-8 accordion my-5" id="sqmAccordion">
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingOne">
           <button class="accordion-button fs-4 fg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

app/views/team/index.html.erb

@@ -16,7 +16,7 @@
 <!-- Team members-->
 <div class="container px-5 text-center">
   <div class="row gx-5 justify-content-center">
-    <div class="col-lg-8 mt-5">
+    <div class="col-lg-10 mt-5">
       <h1 class="page-header-ui-title mb-3">The ECP Team</h1>
 
       <div class="accordion my-5" id="teamAccordion">

app/views/work_with_ecp/index.html.erb

@@ -4,9 +4,9 @@
 <!-- Content-->
 <div class="container p-5">
   <div class="row gx-5 justify-content-center">
-    <h2 class="mb-3" >
+    <div class="alert alert-primary mb-3" >
       The Education Commonwealth Project provides free resources to rethink how school quality and student learning are measured.
-    </h2>
+    </div>
       <div class="grid-container">
         <div class="grid-item"><h2 class="fw-bolder">District Leaders</h2></div>
         <div class="grid-item"><h2 class="fw-bolder">School Leaders and Educators</h2></div>
@@ -28,11 +28,11 @@
       </div>
 
       <div class="py-5">
-        <p class="grid-item text-center h3">
+        <div class="alert alert-primary">
         Our work together can begin with the ECP team talking with you or your group 
         about the need for an alternative approach to assessing student learning and school quality, 
         and about the free tools we offer.
-        </p>
+        </div>
       </div>
 
       <div class="container px-5">

package.json

@@ -8,6 +8,7 @@
     "bootstrap": "^5.2.1",
     "bootstrap-icons": "^1.9.1",
     "esbuild": "^0.15.10",
+    "@fortawesome/fontawesome-free": "^6.2.1",
     "sass": "^1.55.0"
   },
   "scripts": {

yarn.lock

@@ -12,6 +12,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.10.tgz#78a42897c2cf8db9fd5f1811f7590393b77774c7"
   integrity sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==
 
+"@fortawesome/fontawesome-free@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.1.tgz#344baf6ff9eaad7a73cff067d8c56bfc11ae5304"
+  integrity sha512-viouXhegu/TjkvYQoiRZK3aax69dGXxgEjpvZW81wIJdxm5Fnvp3VVIP4VHKqX4SvFw6qpmkILkD4RJWAdrt7A==
+
 "@hotwired/stimulus@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.1.0.tgz#20215251e5afe6e0a3787285181ba1bfc9097df0"