From 9100952af5e0f9e06ea8760ef785ed171688f087 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Fri, 7 Jun 2024 19:11:04 +0200
Subject: [PATCH] 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/assets/icons/survey.svg | 2 +-
.../ui/molecules/document-survey/index.scss | 41 ++++++++++++++-----
.../ui/molecules/document-survey/index.tsx | 3 ++
.../ui/molecules/document-survey/surveys.ts | 1 +
4 files changed, 35 insertions(+), 12 deletions(-)
diff --git a/client/src/assets/icons/survey.svg b/client/src/assets/icons/survey.svg
index e928361f259e..d12d061c0d5a 100644
--- a/client/src/assets/icons/survey.svg
+++ b/client/src/assets/icons/survey.svg
@@ -1 +1 @@
-
+
\ No newline at end of file
diff --git a/client/src/ui/molecules/document-survey/index.scss b/client/src/ui/molecules/document-survey/index.scss
index 0511fb0e6f3e..b25328723e22 100644
--- a/client/src/ui/molecules/document-survey/index.scss
+++ b/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;
+ }
+ }
}
}
diff --git a/client/src/ui/molecules/document-survey/index.tsx b/client/src/ui/molecules/document-survey/index.tsx
index 31ede3f6c5eb..7f1fa43b1dbf 100644
--- a/client/src/ui/molecules/document-survey/index.tsx
+++ b/client/src/ui/molecules/document-survey/index.tsx
@@ -153,6 +153,9 @@ function SurveyDisplay({ survey, force }: { survey: Survey; force: boolean }) {
>
)}
+ {survey.footnote && (
+
+ )}
);
}
diff --git a/client/src/ui/molecules/document-survey/surveys.ts b/client/src/ui/molecules/document-survey/surveys.ts
index 9ba04291b1c2..00a48919fd2b 100644
--- a/client/src/ui/molecules/document-survey/surveys.ts
+++ b/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 {