Ask contributors to take the user survey again, see #1180

UI/AllThemesGui.ts

@@ -13,6 +13,7 @@ import { SubtleButton } from "./Base/SubtleButton"
 import { VariableUiElement } from "./Base/VariableUIElement"
 import Svg from "../Svg"
 import { ImportViewerLinks } from "./BigComponents/UserInformation"
+import UserSurveyPanel from "./UserSurveyPanel"
 
 export default class AllThemesGui {
     setup() {
@@ -28,6 +29,7 @@ export default class AllThemesGui {
             new Combine([
                 intro,
                 new FeaturedMessage().SetClass("mb-4 block"),
+                new Combine([new UserSurveyPanel()]).SetClass("flex justify-center"),
                 new MoreScreen(state, true),
                 new Toggle(
                     undefined,

UI/BigComponents/ThemeIntroductionPanel.ts

@@ -9,6 +9,7 @@ import Svg from "../../Svg"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 import FullWelcomePaneWithTabs from "./FullWelcomePaneWithTabs"
+import UserSurveyPanel from "../UserSurveyPanel"
 
 export default class ThemeIntroductionPanel extends Combine {
     constructor(
@@ -51,7 +52,8 @@ export default class ThemeIntroductionPanel extends Combine {
 
         const hasPresets = layout.layers.some((l) => l.presets?.length > 0)
         super([
-            layout.description.Clone().SetClass("blcok mb-4"),
+            layout.description.Clone().SetClass("block mb-4"),
+            new UserSurveyPanel(),
             new Combine([
                 t.welcomeExplanation.general,
                 hasPresets

UI/UserSurveyPanel.ts

@@ -0,0 +1,50 @@
+import Combine from "./Base/Combine"
+import { FixedUiElement } from "./Base/FixedUiElement"
+import { SubtleButton } from "./Base/SubtleButton"
+import Svg from "../Svg"
+import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
+import Toggle from "./Input/Toggle"
+
+export default class UserSurveyPanel extends Toggle {
+    private static readonly userSurveyHasBeenTaken = LocalStorageSource.GetParsed(
+        "usersurvey-has-been-taken",
+        false
+    )
+
+    constructor() {
+        super(
+            new Combine([
+                new FixedUiElement("Thanks for taking the survey!").SetClass("thanks px-2"),
+                new SubtleButton(Svg.star_svg(), "Take the user survey again", {
+                    imgSize: "h-6 w-6",
+                })
+                    .onClick(() => {
+                        window.open(
+                            "https://framaforms.org/mapcomplete-usage-survey-1672687708",
+                            "_blank"
+                        )
+                        UserSurveyPanel.userSurveyHasBeenTaken.setData(false)
+                    })
+                    .SetClass("h-12"),
+            ]),
+            new Combine([
+                new FixedUiElement("Please, fill in the user survey").SetClass("alert"),
+                "Hey! We'd like to get to know you better - would you mind to help out by filling out this form? Your opinion is important",
+                new FixedUiElement(
+                    "We are specifically searching responses from underrepresented groups, such as non-technical people, minorities, women, people without an account, people of colour, ..."
+                ).SetClass("font-bold"),
+                "Results are fully anonymous and are used to improve MapComplete. We don't ask private information. So, don't hesitate and fill it out!",
+                new SubtleButton(Svg.star_outline_svg(), "Take the survey").onClick(() => {
+                    window.open(
+                        "https://framaforms.org/mapcomplete-usage-survey-1672687708",
+                        "_blank"
+                    )
+                    UserSurveyPanel.userSurveyHasBeenTaken.setData(true)
+                }),
+            ]).SetClass("block border-2 border-black rounded-xl flex flex-col p-2"),
+            UserSurveyPanel.userSurveyHasBeenTaken
+        )
+
+        this.SetStyle("max-width: 40rem")
+    }
+}

css/index-tailwind-output.css

@@ -624,6 +624,10 @@ video {
   position: relative;
 }
 
+.\!relative {
+  position: relative !important;
+}
+
 .sticky {
   position: -webkit-sticky;
   position: sticky;
@@ -811,10 +815,6 @@ video {
   margin-top: 1rem;
 }
 
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -839,6 +839,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
 .ml-12 {
   margin-left: 3rem;
 }