This is tricky issue and we are short on time - please only volunteer when you're up for the challenge! 💪

Is your feature request related to a problem? Please describe.

People would love to spice up their link surveys with colourful backgrounds, making them more intriguing to fill out.

Describe the solution you'd like

Allow changing the background of link surveys with color, image or animated background.

Preparation

To make this work in both the Survey Editor and the Link Survey we need a reusable component to house the link survey and the Survey Editor. Currently, only the survey itself is renderd by the same packages/survey:

We need a reusable component to cover the full link survey page as well as the Survey Editor which houses the survey rendered by the survey package:

In this component we will make the changes required to replace the background of the complete page. This component needs to be fully responsive which is fairly easy to achieve because the survey package is already responsive. Just test it through please :)

UX Notes

• In the Change Background Setting the user can select between three types of backgrounds: Image, Animation and Color.
• If the toggle is off, the background switches back to white. However, the previous background selection should be stored and reactivated once the user toggles Change Background back on.

Tasks

1. Augment the Styling Card at the bottom of the Settings tab with two toggles "Change Background" and "Background Overlay":

2. We start with Animation: Our friends at Tella.tv have open sourced a set of 40 animated backgrounds which are 🔥

We have uploaded them to the repo in the public folder public/animated-bgs

• When a user hovers over one of the previews, the animation starts.
• When a user clicks on one of the backgrounds, it is selected and loaded into the background of the Survey Preview (which is currently white)
• Note: You might need Thumbnails but try to first just only play the thumb version on hover.

3. Next up Colors: The colors field is pretty straightforward: We just allow people to switch up the white background with a different color:

The Color Picker is already a reusable component

• The suggested colors should come from this collection of color palettes: https://colorhunt.co/palettes/popular
• Just pick the first 6 palettes x 4 colors = 24 colors to choose from
• When a color is selected, indicate it like so with a border in slate-900

4. Images: By the time you get to the images, we might have the UI you need already built in a different PR. Please reach out to Johannes on Discord to check and avoid redundant work :)

• If no background images were uploaded before, the window looks like this:

• Once there are images, it looks like. Similar to the Animated tab, users can select which image they want to display in the background:

• Users should also be able to delete images. If they do so, we should check if the image is used in a different survey as a background and issue a modal with a warning - we are using a similar modal in the Survey Editor. When you create a new survey and hit "Back" you will see it. Please reuse the same modal component. This shouldn't be blocking! If this takes too long, we ship it without Delete for now.

5. Background Overlay Toggle: Many of the backgrounds will be too flashy. To make them fit nicely with the survey without sucking all of the attention out of the page, we allow people to add an overlay:

Thanks!