feat(surveys): added a customizable submit button text color

frontend/src/scenes/surveys/SurveyCustomization.tsx

@@ -99,17 +99,23 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan
                     onChange={(submitButtonColor) => onAppearanceChange({ ...appearance, submitButtonColor })}
                     disabled={!surveysStylingAvailable}
                 />
+                <div className="mt-2">Button text color</div>
+                <LemonInput
+                    value={appearance?.submitButtonTextColor}
+                    onChange={(submitButtonTextColor) => onAppearanceChange({ ...appearance, submitButtonTextColor })}
+                    disabled={!surveysStylingAvailable}
+                />
                 {surveyQuestionItem.type === SurveyQuestionType.Open && (
                     <>
-                        <div className="mt-2">Placeholder</div>
+                        <div className="mt-2">Placeholder text</div>
                         <LemonInput
                             value={appearance?.placeholder || defaultSurveyAppearance.placeholder}
                             onChange={(placeholder) => onAppearanceChange({ ...appearance, placeholder })}
                             disabled={!surveysStylingAvailable}
                         />
                     </>
                 )}
-                <div className="mt-2">
+                <div className="mt-4">
                     <LemonCheckbox
                         label={
                             <div className="flex items-center">

frontend/src/scenes/surveys/constants.tsx

@@ -32,6 +32,7 @@ export const SurveyUrlMatchTypeLabels = {
 export const defaultSurveyAppearance = {
     backgroundColor: '#eeeded',
     submitButtonColor: 'black',
+    submitButtonTextColor: 'white',
     ratingButtonColor: 'white',
     ratingButtonActiveColor: 'black',
     borderColor: '#c9c6c6',

frontend/src/scenes/surveys/surveyActivityDescriber.tsx

@@ -164,6 +164,7 @@ const surveyActionsMapping: Record<
             backgroundColor: 'background color',
             submitButtonColor: 'submit button color',
             submitButtonText: 'submit button text',
+            submitButtonTextColor: 'submit button text color',
             ratingButtonColor: 'rating button color',
             ratingButtonActiveColor: 'active rating button color',
             borderColor: 'border color',

frontend/src/types.ts

@@ -2658,6 +2658,7 @@ export interface SurveyAppearance {
     submitButtonColor?: string
     // TODO: remove submitButtonText in favor of buttonText once it's more deprecated
     submitButtonText?: string
+    submitButtonTextColor?: string
     ratingButtonColor?: string
     ratingButtonActiveColor?: string
     borderColor?: string