UI updates

[smallbrownbike]

Updates the UI on all survey types to match these designs.

Things to note

• Updates default colors
• Adds border color option
• Adds placeholder option
• Removes text and description color options in favor of either black or white (with lower opacity on description)
• Automatically adjusts text color based on the background darkness (lighter gets black, darker gets white)
• Removes ratingButtonHoverColor in favor of ratingButtonActiveColor (since there is a submit button on all surveys, the active color indicates which rating is selected before the user clicks submit)
• Links PostHog logo to our website
• Adjusts PostHog logo color (black or white) based on background color

[liyiy]

SO GOOD!!! 😍

[neilkakkar]

Reminder to me to merge into PostHog/posthog-js#801 when this PR is ready to go

[liyiy]

I added some fixes! Everything else looks super awesome.

Just two things

1. The thank you display element pales a bit in comparison to the rest of the popups now, could we update this too? 😁 The font is also purple for some reason.
   cc @corywatilo

2. Base emojis are all white by default while I've got appearance: null

[liyiy]

Just a heads up @smallbrownbike,

@neilkakkar is moving the code over on Monday to posthog-js with PostHog/posthog-js#801, so if you haven't had a chance to start positioning yet, totally fine, just remember to work on it in that repo instead (or you can copy and paste from here too) as the site.ts file you're working with shouldn't change at all in PostHog/posthog-js#801.

For more context: We're migrating the site off plugins and into posthog-js for performance reasons and to make it easier for users to enable surveys to work~

LMK if you've got any questions

[annikaschmid]

I think multiple choice vs single choice should be clearer, the convention here is radio buttons vs square buttons. Because you could have a single choice survey with multiple answers to choose from.
We do have instructions in the screenshots above, but people don't read and those descriptions can be modified for the user, so we should make this clearer. e.g. adding a circle our square on the right hand side of the selection

[annikaschmid]

The contrast we have for description text and background colour is very minimal and fails accessibility standards, I think we should aim for at least AA.

[annikaschmid]

Looks amazing already though!

[corywatilo]

• Maybe 10% darker on the subtitle/description
• On the 3 emojis, can we place the outside ones further out so they align on the outside with the labels? (Or bring those labels in)
• More vertical padding on the thank you screen. (Like 30px?)
• Need a way to close the pop-up on the thank you screen. X and a "Close" button (where the CTA was) might be good.

[corywatilo]

multiple choice vs single choice should be clearer, the convention here is radio buttons vs square buttons

I had thought about this but am not overly concerned about it given:

• The question will hopefully make it obvious as to what kind of answer you can give
• It's limited to a single question, so the worst thing you can do is click another answer and then click the other, not a huge inconvenience

I think in the future, as we allow more question types, multiple questions, and steps, we can think through this a bit more.

[corywatilo]

@smallbrownbike This is so petty but can we thicken the selected borders? I think I used 1.5px in the mocks. Just accentuates them a bit. (2px felt too heavy)

[smallbrownbike]

Thanks for the feedback, everyone! I've addressed most concerns, but let me know if there's anything else.

New default emoji SVG fill

Updated thank you view (now needs to be manually closed)

[liyiy]

Can we make the thank you box auto close after 3 seconds or something if a user hasn’t closed it themselves? 🙏🏻

[liyiy]

Just one comment above, but this is good to go otherwise I think! Awesome changes

[corywatilo]

auto close after 3 seconds or something

Not a huge fan of this idea (we have the PostHog logo in there people can click on, and you could theoretically add a link to the description) but would be okay doing this if we had a progress bar counting down to it closing, or the button counting it down like Close (3).