From 6f38a4b302dfee987b6a0364b31342ecae7c43dc Mon Sep 17 00:00:00 2001
From: Robert <rfultz@fec.gov>
Date: Thu, 7 Nov 2024 15:30:11 -0500
Subject: [PATCH] Add signup button to feedback panel

---
 fec/fec/static/js/templates/feedback.hbs      | 13 +++++++++++-
 fec/fec/static/scss/components/_feedback.scss | 21 ++++++++++++++++++-
 .../templates/purgecss-homepage/full.html     | 11 ++++++++++
 .../templates/purgecss-homepage/toggled.html  | 13 +++++++++++-
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/fec/fec/static/js/templates/feedback.hbs b/fec/fec/static/js/templates/feedback.hbs
index db94649787..925c4d734b 100644
--- a/fec/fec/static/js/templates/feedback.hbs
+++ b/fec/fec/static/js/templates/feedback.hbs
@@ -11,7 +11,18 @@
     </div>
     <form id="feedback-form" class="container">
       <fieldset>
-        <h3 class="t-sans">Post public feedback about the FEC.gov website anonymously</h3>
+        <h2>Help us improve FEC.gov</h2>
+        <h3 class="t-sans">Test new website features with our design team</h3>
+        <div class="card--feedback">
+          <div class="card__left">
+            <a class="button--cta" href="">Sign up</a>
+          </div>
+          <div class="card__right">
+            <p class="t-sans t-note">Sign up for a 30-minute video call to help us test new website features.</p>
+          </div>
+        </div>
+        <hr>
+        <h3 class="t-sans">Or post public feedback about the FEC.gov website anonymously</h3>
         <p class="t-sans t-note">How can we improve FEC.gov? Your feedback, browser information and the URL of the page you were viewing at the time of submission will be posted publicly - so don't include sensitive information like your name, contact information or Social Security number.</p>
         <label for="feedback-1" class="label">What were you trying to do on fec.gov, and how can we improve it? <span class="label--help">(required)</span></label>
         <textarea id="feedback-1" name="action"></textarea>
diff --git a/fec/fec/static/scss/components/_feedback.scss b/fec/fec/static/scss/components/_feedback.scss
index 18d0194ca3..33d9e98567 100644
--- a/fec/fec/static/scss/components/_feedback.scss
+++ b/fec/fec/static/scss/components/_feedback.scss
@@ -35,7 +35,7 @@
   }
 
   hr {
-    border-top: 1px dotted $gray-dark;
+    border-bottom: 1px dotted $gray-dark;
     margin: u(0 0 1rem 0);
   }
 
@@ -70,6 +70,25 @@
     top: u(1rem);
   }
 
+  .card--feedback {
+    display: flex;
+    flex-direction: row;
+
+    .card__left {
+      padding: 1rem 1rem 1rem 0;
+      a {
+        white-space: nowrap;
+      }
+    }
+    .card__right {
+      padding: 1rem 0 1rem 1rem;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   @include media($lg) {
     @include transition(top .5s);
     height: 95vh;
diff --git a/fec/home/templates/purgecss-homepage/full.html b/fec/home/templates/purgecss-homepage/full.html
index 6d228317b9..78c0c3e4d8 100644
--- a/fec/home/templates/purgecss-homepage/full.html
+++ b/fec/home/templates/purgecss-homepage/full.html
@@ -941,6 +941,17 @@ <h2>Glossary</h2>
         </div>
         <form id="feedback-form" class="container">
           <fieldset>
+            <h2>Help us improve FEC.gov</h2>
+            <h3 class="t-sans">Test new website features with our design team</h3>
+            <div class="card--feedback">
+              <div class="card__left">
+                <a class="button--cta" href="https://ethn.io/12085">Sign up</a>
+              </div>
+              <div class="card__right">
+                <p class="t-sans t-note">Sign up for a 30-minute video call to help us test new website features.</p>
+              </div>
+            </div>
+            <hr>
             <h3 class="t-sans">Post public feedback about the FEC.gov website anonymously</h3>
             <p class="t-sans t-note">How can we improve FEC.gov? Your feedback, browser information and the URL of the page you were viewing at the time of submission will be posted publicly - so don't include sensitive information like your name, contact information or Social Security number.</p>
             <label for="feedback-1" class="label">What were you trying to do on fec.gov, and how can we improve it? <span class="label--help">(required)</span></label>
diff --git a/fec/home/templates/purgecss-homepage/toggled.html b/fec/home/templates/purgecss-homepage/toggled.html
index 04c27ef54b..1d163ce52f 100644
--- a/fec/home/templates/purgecss-homepage/toggled.html
+++ b/fec/home/templates/purgecss-homepage/toggled.html
@@ -67,6 +67,17 @@ <h2>Glossary</h2>
         </div>
         <form id="feedback-form" class="container">
           <fieldset>
+            <h2>Help us improve FEC.gov</h2>
+            <h3 class="t-sans">Test new website features with our design team</h3>
+            <div class="card--feedback">
+              <div class="card__left">
+                <a class="button--cta" href="">Sign up</a>
+              </div>
+              <div class="card__right">
+                <p class="t-sans t-note">Sign up for a 30-minute video call to help us test new website features.</p>
+              </div>
+            </div>
+            <hr>
             <h3 class="t-sans">Post public feedback about the FEC.gov website anonymously</h3>
             <p class="t-sans t-note">How can we improve FEC.gov? Your feedback, browser information and the URL of the page you were viewing at the time of submission will be posted publicly - so don't include sensitive information like your name, contact information or Social Security number.</p>
             <label for="feedback-1" class="label">What were you trying to do on fec.gov, and how can we improve it? <span class="label--help">(required)</span></label>
@@ -94,4 +105,4 @@ <h3 class="t-sans">Post public feedback about the FEC.gov website anonymously</h
         </form>
       </div>
     </div></body></html>
-    
\ No newline at end of file
+