From 21fdf5856773aed4258c87d8ac38cbc7861088fe Mon Sep 17 00:00:00 2001
From: jazairi <16103405+jazairi@users.noreply.github.com>
Date: Thu, 8 Aug 2024 15:01:45 -0400
Subject: [PATCH] Changes from pairing session

Stephanie and I paired today to fine-tune the design a bit. The
goals of the session were to fix the padding, reduce the font size
in large viewports, and ensure that the text didn't wrap beyond
two lines in smaller viewports.

We made the following changes:

* Removes `copy-lead` and `box-content` classes.
* Sets padding to `20px 10px`.
* Sets font-size to `$fs-large` (20px) at viewport widths larger
than our medium breakpoint, and `$fs-base` (16px) at smaller widths.
* Explicitly sets `display: block`. (This rule is implied/inherited,
but it felt useful to declare it because inline-block does weird
things.)

Other things we tried but decided not to do:

* Put `display: block` and `text-wrap: nowrap` on the link in
smaller viewports. This mostly looked good, but squeezed the
spacing from the sides.
* Leave the font size as `$fs-large` in smaller viewports. We were
able to do this without wrapping by reducing the padding, but it
was visually out of proportion.

Co-authored-by: Stephanie Hartman <hartman@mit.edu>
---
 app/assets/stylesheets/_survey.scss     | 33 +++++++++++++++----------
 app/views/search/_nps_feedback.html.erb |  6 ++---
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/_survey.scss b/app/assets/stylesheets/_survey.scss
index a7841f3c..64bd44ba 100644
--- a/app/assets/stylesheets/_survey.scss
+++ b/app/assets/stylesheets/_survey.scss
@@ -1,18 +1,25 @@
 .nps-feedback {
-    margin-top: 1em;
-    background-color: #333;
-    color: #fff;
-    text-align: center;
+  margin-top: 1em;
+  padding: 20px 10px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  font-size: $fs-large;
+  display: block;
 
-    a {
-      color: #00C8FF
-    }
+  a {
+    color: #00C8FF;
+  }
 
-    a:hover {
-      color: #00C800
-    }
+  a:hover {
+    color: #00C800
+  }
 
-    a:active {
-      color: #FF00FF
-    }
+  a:active {
+    color: #FF00FF
+  }
+
+  @media (max-width: $bp-screen-md) {
+    font-size: $fs-base;
+  }
 }
diff --git a/app/views/search/_nps_feedback.html.erb b/app/views/search/_nps_feedback.html.erb
index 7b21669e..868a8742 100644
--- a/app/views/search/_nps_feedback.html.erb
+++ b/app/views/search/_nps_feedback.html.erb
@@ -1,7 +1,7 @@
 <% return unless ENV.fetch('NPS_URL', false).present? %>
 <% return unless ENV.fetch('NPS_LINK_TEXT', false).present? %>
 
-<div class="nps-feedback box-content copy-lead">
-  <%= ENV.fetch('NPS_BLURB', nil) %>
-  <a href="<%= ENV.fetch('NPS_URL')%>"><%= ENV.fetch('NPS_LINK_TEXT') %></a>
+<div class="nps-feedback">
+  <span class="nps-blurb"><%= ENV.fetch('NPS_BLURB', nil) %></span>
+  <a class="nps-link" href="<%= ENV.fetch('NPS_URL')%>"><%= ENV.fetch('NPS_LINK_TEXT') %></a>
 </div>