Update survey panel

src/css/popup.css

@@ -26,6 +26,13 @@
   src: url("/fonts/Inter-Medium.woff2") format("woff2");
 }
 
+@font-face {
+  font-family: "Inter-SemiBold";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
+}
+
 [data-theme="light"],
 :root {
   --fontInter: "Inter", sans-serif;
@@ -1652,7 +1659,8 @@ input[type=text] {
 }
 
 .onboarding-button:focus,
-.half-onboarding-button:focus {
+.half-onboarding-button:focus,
+#survey-achievement-done-button:focus {
   box-shadow:
     0 0 0 2px var(--button-bg-color-secondary),
     0 0 0 4px var(--button-bg-focus-color-primary);
@@ -2409,3 +2417,62 @@ tr:hover > td > .reset-button {
 .searchbar input {
   inline-size: 100%;
 }
+
+/* Survey Popup */ 
+
+.survey-blurb,
+#survey-panel h3.onboarding-title,
+#survey-achievement-done-button {
+  text-align: center;
+  margin: auto;
+}
+
+#survey-panel h3.onboarding-title {
+  max-inline-size: 100%;
+  font-family: "Inter-SemiBold";
+
+  line-height: 24px;
+  margin-block-end: 12px;
+}
+
+#survey-panel {
+   padding-block: 40px 32px;
+   padding-inline: 0px;
+   padding: 40px, 0px;
+}
+
+.survey-blurb {
+  margin-block-end: 16px;
+  margin-inline: 24px;
+}
+
+#survey-img {
+  block-size: 180px;
+  margin-block-end: 16px;
+}
+
+#survey-button {
+  padding: 4px 16px;
+  margin-block: 0px 8px;
+  min-block-size: 32px;
+}
+
+.share-ctas.survey-back {
+  margin: auto;
+}
+
+#survey-achievement-done-button {
+  color: var(--button-bg-color-primary);
+  transition: color 0.1s ease;
+  font-size: 14px;
+  padding: 1px 3px;
+  border-radius: 1px;
+}
+
+#survey-achievement-done-button:hover {
+  color: var(--button-bg-hover-color-primary);
+}
+
+#survey-achievement-done-button:active {
+  color: var(--button-bg-active-color-primary);
+}

src/js/popup.js

@@ -2394,6 +2394,10 @@ Logic.registerPanel(P_SURVEY_ACHIEVEMENT, {
       await Logic.setAchievementDone("survey");
       Logic.showPanel(P_CONTAINERS_LIST);
     });
+    Utils.addEnterHandler(document.querySelector("#survey-button"), async () => {
+      await Logic.setAchievementDone("survey");
+      window.close();
+    });
   },
 
   // This method is called when the panel is shown.

src/popup.html

@@ -107,13 +107,12 @@
   </div>
 
   <div class="panel survey-panel hide" id="survey-panel">
-    <img class="survey-img" alt="" src="/img/survey.svg" />
+    <img id="survey-img" alt="" src="/img/survey.svg" />
     <h3 class="onboarding-title">Participate in Paid Research with Firefox</h3>
-    <p>We'd love to learn about your experiences with this add-on!</p>
-    <p>Join a 1:1 Zoom interview and receive a $75 Amazon e-giftcard or Paypal payment.</p>
-    <br /><p>Thank you for helping us improve Firefox.</p>
-    <p class="share-ctas">
-      <a class="cta-link onboarding-button keyboard-nav" href="https://qsurvey.mozilla.com/s3/Multi-Account-Containers-Research-Interest-Form" id="survey-button" target="_blank">Take Survey</a>
+    <p class="survey-blurb">We'd love to learn about your experiences with this add-on! Join a 1:1 Zoom interview and receive a $75 Amazon e-giftcard or Paypal payment.</p>
+    <p class="survey-blurb">Thank you for helping us improve Firefox.</p>
+    <p class="share-ctas survey-back">
+      <a class="cta-link onboarding-button keyboard-nav" href="https://qsurvey.mozilla.com/s3/Multi-Account-Containers-Research-Interest-Form" id="survey-button" target="_blank">Take Interest Survey</a>
     </p>
     <a href="#" id="survey-achievement-done-button">Back</a>
   </div>