enhance(surveys): update design + logo + add footnote (#11274)

Updates the design as follows:

- Replace the icon, and increase its size.
- Remove the border around the survey container.
- Make the margin between elements consistent (teaser / question / survey).
- Round the corners of the iframe.
- Update the color of the question (the summary element).
- Make the iframe wider.
- Fix the color of the dismiss icon in dark mode.

Also adds a new optional footnote.

client/src/ui/molecules/document-survey/index.scss

@@ -1,8 +1,9 @@
 @use "../../vars" as *;
 
 .document-survey {
+  --margin-vertical: 0.75rem;
+  // Same color for light and dark theme.
   background-color: $mdn-color-light-theme-violet-10;
-  border: 5px solid $mdn-color-light-theme-violet-70;
   border-radius: 0.5rem;
   color: $mdn-color-neutral-90;
   padding: 1rem;
@@ -13,13 +14,14 @@
     background-size: cover;
     content: "";
     display: inline-block;
-    height: 33px;
+    height: 49px;
     position: absolute;
-    width: 32px;
+    width: 53px;
   }
 
   iframe {
     border: 0;
+    border-radius: 0.5rem;
   }
 
   button[type="button"],
@@ -29,14 +31,14 @@
 
   details {
     iframe {
-      margin: 0.9rem;
-      margin-bottom: 0;
-      width: calc(100% - 1.2rem);
+      margin-top: var(--margin-vertical);
     }
   }
 
   summary {
-    margin-top: 1rem;
+    // Same color for light and dark theme.
+    color: #6800cf;
+    margin-top: var(--margin-vertical);
     text-decoration: underline;
 
     &:focus,
@@ -51,11 +53,28 @@
   }
 
   .survey-header,
-  .survey-container {
-    padding-left: 2.5em;
+  .survey-container summary,
+  .survey-footer {
+    margin-left: 4rem;
   }
 
-  .survey-dismiss svg.icon {
-    color: $mdn-color-neutral-90;
+  .survey-footer {
+    font-size: var(--type-smaller-font-size);
+    font-style: italic;
+    font-variation-settings: "slnt" -10;
+    margin-top: var(--margin-vertical);
+  }
+
+  .survey-dismiss {
+    // Avoid the parent container to grow from 28px to 30px.
+    margin-top: -2px;
+
+    .icon {
+      background-color: $mdn-color-neutral-60;
+
+      &:hover {
+        background-color: $mdn-color-neutral-90;
+      }
+    }
   }
 }

client/src/ui/molecules/document-survey/index.tsx

@@ -153,6 +153,9 @@ function SurveyDisplay({ survey, force }: { survey: Survey; force: boolean }) {
           ></iframe>
         )}
       </details>
+      {survey.footnote && (
+        <section className="survey-footer">({survey.footnote})</section>
+      )}
     </div>
   );
 }

client/src/ui/molecules/document-survey/surveys.ts

@@ -15,6 +15,7 @@ export interface Survey {
   src: string;
   teaser: string;
   question: string;
+  footnote?: string;
 }
 
 enum SurveyBucket {