From b2d551464e503733337736a4498c0dc462470960 Mon Sep 17 00:00:00 2001
From: Sakari Salminiitty <sakarisalminiitty@Sakaris-MacBook-Air.local>
Date: Fri, 22 Jul 2022 13:32:50 -0700
Subject: [PATCH] Refactor Home Page Buttons

---
 _includes/donate-button.html        |  4 ++--
 _includes/footer.html               |  2 +-
 _includes/forms/contact-us.html     | 13 ++++++-------
 _includes/home-getting-started.html |  2 +-
 _sass/components/_footer.scss       |  2 +-
 _sass/components/_header.scss       | 14 +++++++-------
 _sass/components/_home.scss         |  7 ++++++-
 _sass/elements/_cards.scss          | 10 ++++++++++
 8 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/_includes/donate-button.html b/_includes/donate-button.html
index b0d7028d84..15a1642fb7 100644
--- a/_includes/donate-button.html
+++ b/_includes/donate-button.html
@@ -1,7 +1,7 @@
 <div class="header-links">
-    <ul class="inline-list header-list">
+    <ul class="inline-list header-list"> 
         <li>
-            <a href="/donate/" target="_blank" ><button class="btn btn-dark btn-md-narrow btn--donate-header">Donate</button></a>
+            <a href="/donate/" class="btn btn-dark btn-md-narrow btn--donate-header" title="Go to Donate Page">Donate</a>
         </li>
     </ul>
 </div>
diff --git a/_includes/footer.html b/_includes/footer.html
index 2be094a7c4..8c17ad1f57 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,7 +2,7 @@
   <div class="footer-contain">
     <nav class="footer-nav">
       <div class="header-links">
-        <a href="/donate/" target="_blank"><button class="btn btn-primary-on-dark btn-md-narrow btn--donate-footer">Donate</button></a>
+        <a href="/donate/" class="btn btn-primary-on-dark btn-md-narrow btn--donate-footer btn--default" title="Go to Donate Page">Donate</a>
         <div class="footer-links">
           <div class="credits-page"><a href="/credits">Credits</a>&nbsp;|&nbsp;<a href="/sitemap">Site Map</a>&nbsp;|&nbsp;<a href="/join">Join Us</a></div>
           <ul class="inline-list header-list">
diff --git a/_includes/forms/contact-us.html b/_includes/forms/contact-us.html
index a32df5014d..ccf9caa2f7 100644
--- a/_includes/forms/contact-us.html
+++ b/_includes/forms/contact-us.html
@@ -2,17 +2,16 @@
 <section class="content-section">
   <!-- <h2 class="page-contain">Get in Touch</h2><br> -->
 
-  <div class="page-card card-secondary page-card-md page-card--home page-card--home-volunteer">
+  <div class="page-card card-secondary page-card-md-VWU page-card--home page-card--home-volunteer">
     <h3 class="title3">Volunteer with us</h3>
     <div class="row-1">
       <div class="column volunteerWithUs">
         <p>We are looking for volunteers of all different skill types, levels, and civic interests.</p>
-        <a href='./getting-started'><button class='btn btn-primary btn--home-survey'>Getting Started</button></a><br>
+        <a href='/getting-started' class='btn btn-primary btn--home-survey btn--default'>Getting Started</a><br>
       </div>
       <div class="column volunteerWithUs">
         <p>Please help us understand your transportation preferences by completing a short survey.</p>
-        <a href='https://docs.google.com/forms/d/e/1FAIpQLSeb5zITlv_OewbT_k0UMNw6kail8-vKIyjM3E9qPMLYR6qiYw/viewform'><button
-            class='btn btn-primary btn--home-survey'>Transportation</button></a>
+        <a href='https://docs.google.com/forms/d/e/1FAIpQLSeb5zITlv_OewbT_k0UMNw6kail8-vKIyjM3E9qPMLYR6qiYw/viewform' class='btn btn-primary btn--home-survey btn--default' target='_blank' title='Hack for LA Transportation Survey'>Transportation</a>
       </div>
     </div>
   </div><br>
@@ -22,17 +21,17 @@ <h3 class="title3">Get in touch with us</h3>
     <p>The more you tell us about yourself, the better we can match you with the right resources.</p><br>
 
     <div class="row">
-      <div class="column"><a href='./survey4'><button class='btn btn-primary btn--home-survey'>Government</button></a></div>
+      <div class="column"><a href='/survey4' target='_blank' class='btn btn-primary btn--home-survey btn--default' title='Government Contact Form'>Government</a></div>
       <div class="column">I am a government agency.</div>
     </div><br>
 
     <div class="row">
-      <div class="column"><a href='./survey3'><button class='btn btn-primary btn--home-survey'>Non-profit</button></a></div>
+      <div class="column"><a href='/survey3' target='_blank' class='btn btn-primary btn--home-survey btn--default' title='Non-profit Contact Form'>Non-profit</a></div>
       <div class="column">I am a non-profit organization.</div>
     </div><br>
 
     <div class="row">
-      <div class="column"><a href='./survey6'><button class='btn btn-primary btn--home-survey'>Other</button></a></div>
+      <div class="column"><a href='/survey6' class='btn btn-primary btn--home-survey btn--default' target='_blank' title='General Contact Form'>Other</a></div>
       <div class="column">I am none of the above.</div>
     </div><br>
   </div>
diff --git a/_includes/home-getting-started.html b/_includes/home-getting-started.html
index b13d93e4dc..eafb846e76 100644
--- a/_includes/home-getting-started.html
+++ b/_includes/home-getting-started.html
@@ -1,3 +1,3 @@
 <div class='home-getting-started-container content-section section-hack-nights'>
-    <a href='./join'><button class='btn btn-primary btn-xl-long btn--home-getting-started'>Join Us</button></a>
+    <a href='/join' class='btn btn-primary btn-xl-long btn--home-getting-started btn--default'>Join Us</a>
 </div>
\ No newline at end of file
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
index 8e74095885..90242c254e 100644
--- a/_sass/components/_footer.scss
+++ b/_sass/components/_footer.scss
@@ -12,7 +12,7 @@
   }
 
   .btn--donate-footer {
-    display: block;
+    display: table;
     margin: 0 auto;
 
     @media #{$bp-mobile-up} {
diff --git a/_sass/components/_header.scss b/_sass/components/_header.scss
index 6d76c7a29e..c3af2f5ea0 100644
--- a/_sass/components/_header.scss
+++ b/_sass/components/_header.scss
@@ -25,19 +25,18 @@
     flex-grow: 1;
     text-align: right;
 
-    li {
-      margin-right: 20px;
+    /*li {
+       margin-right: 20px;
 
       &:last-child {
-        margin-right: 0;
+       margin-right: 0;
       }
     }
 
     a {
       &:link,
       &:visited {
-        color: $color-black;
-        margin: -4px;
+       margin: -4px;
       }
 
       &:hover,
@@ -45,7 +44,7 @@
       &:focus {
         color: $color-red;
       }
-    }
+    }*/
   }
 
   .branding {
@@ -70,7 +69,7 @@
 }
 
 .btn--donate-header { 
-  margin: -10px 20px 0 0;
+  margin: -10px 16.25px 0 0;
 }
 
 @media only screen and (max-width: 1028px) {
@@ -102,6 +101,7 @@
     font-weight: 500;
     height: 30px;
     margin-top: 6px;
+    padding-top: 15px;
     line-height: 0;
   }
 }
\ No newline at end of file
diff --git a/_sass/components/_home.scss b/_sass/components/_home.scss
index 84c18e70ed..f2e80ca317 100644
--- a/_sass/components/_home.scss
+++ b/_sass/components/_home.scss
@@ -418,13 +418,18 @@ button {
 }
 
 .column {
-  display: flex;
+  display: block;
   flex-direction: column;
   flex: 1;
 }
 
 .volunteerWithUs {
   margin: 0 5%;
+  padding-bottom: 40px;
+
+  @media #{$bp-below-tablet} {
+    padding-bottom: 20px;
+  }
 }
 
 .row-1 {
diff --git a/_sass/elements/_cards.scss b/_sass/elements/_cards.scss
index bd098fbe22..0548fbc3a5 100644
--- a/_sass/elements/_cards.scss
+++ b/_sass/elements/_cards.scss
@@ -113,6 +113,16 @@
     padding: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); 
   }
+
+  // Special class for Getting Started and Transportation btns. Medium but without the padding
+  .page-card-md-VWU {
+    max-width: 800px;
+    margin: 0 auto;
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); 
+  }
   
 
   /*----------------------------------------------------