Improve consistency when handling colors in surveys.

[kyleswank]

Co-authored-by: Tate [email protected]

:bulb: Motivation and Context

This was written by Tate, but due to our projects not having the ability to allow external contributors at the moment I am sort of sponsoring this. I'll let Tate explain:

Goals: Unifying styling in PostHog Flutter SDK and fix bug where some text inherits its color directly from app context, while other elements have hard-coded colors, frequently creating invisible text within PostHog surveys.

Overview of changes: Briefly, I tried to preserve the current theming behavior of the PostHog surveys in Flutter while unifying all the style information into survey_appearance.dart​ and providing more comprehensive coverage of theme elements to avoid cases of, e.g., invisible text. Since directly changing the theme of surveys is supposed to be behind a paywall, I simply added more theme coverage (to hopefully include colors of all the elements that could possibly appear in a survey, especially text). For perfect functionality, you will need to update the Web UI to include theming options for the elements that were previously not covered. When you do this, you will need to update Appearance​ to receive those theme options from the PostHog API (see below for details).

Detailed changes

• Centralized all color definitions to SurveyAppearance​ class.
• Added color definitions for (hopefully) all elements that appear in surveys.
• SurveyAppearance​ color definitions are no longer nullable and are initialized with the defaults that previously appeared dispersed amongst many files.
• The following had color definitions buried in other files. I extracted them and moved them to SurveyAppearance​:
  • backgroundColor​ - white
  • descriptionTextColor​ - black
  • ratingButtonColor​ - Color(0xFFEEEEEE)
  • ratingButtonActiveColor​ - black
  • borderColor​ - Color(0xFFBDBDBD)
• New color definition coverage (need to be added to theme options in Web UI for surveys which is currently behind a paywall). These were previously inherited from the app context, therefore creating invisible text in many cases, especially with light-colored text:
  • questionTextColor​ - black
  • closeButtonColor​ - black
  • ratingButtonSelectedTextColor​ - white
  • ratingButtonUnselectedTextColor​ - black with 50% alpha
  • inputBackgroundColor​ - white
  • inputTextcolor​ - black [This is the bug I came here to fix!!!]
  • inputPlaceholderColor​ - Color(0xFF757575)
  • choiceButtonBorderColor​ - black
  • choiceButtonTextColor​ - black
• I removed the ?? Colors.[color]​ (null coalescing) blocks from the following files:
  • survey_bottom_sheet.dart​
  • question_header.dart​
  • number_rating_button.dart​
  • rating_icons.dart​
• I removed hardcoded colors from these files, instead using definitions in SurveyAppearance​
  • survey_choice_button.dart​
  • open_text_question.dart​
  • rating_question.dart
• Necessary updates to Web theme UI
  • Color options to add
    • Question text color
    • Input text color
    • Choice button color
    • Close button color
    • Description text color
    • Rating button color
    • Rating button active color

Summary of remaining issues:

:green_heart: How did you test it?

I, Kyle, modified the style of the example app on iOS and tested against a sample survey of varying colors and styles.

:pencil: Checklist

• [x] I reviewed the submitted code.
• [ ] I added tests to verify the changes.
• [ ] I updated the docs if needed.
• [ ] No breaking change or entry added to the changelog.