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 <[email protected]>

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

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>