From ae14c3de17d422c425455a7690881824fb20a6b9 Mon Sep 17 00:00:00 2001
From: Li Yi Yu <li@posthog.com>
Date: Wed, 13 Dec 2023 20:05:00 -0500
Subject: [PATCH] fix(surveys): rename widget to feedback button (#19318)

rename widget to feedback button
---
 frontend/src/scenes/surveys/SurveyAppearance.tsx | 10 +++++-----
 frontend/src/scenes/surveys/SurveyEdit.tsx       |  8 +++++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index c04148201e062..ef0d568f3ceb4 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -234,7 +234,7 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan
 export function WidgetCustomization({ appearance, onAppearanceChange }: WidgetCustomizationProps): JSX.Element {
     return (
         <>
-            <div className="mt-2">Widget type</div>
+            <div className="mt-2">Feedback button type</div>
             <LemonSelect
                 value={appearance.widgetType}
                 onChange={(widgetType) => onAppearanceChange({ ...appearance, widgetType })}
@@ -245,21 +245,21 @@ export function WidgetCustomization({ appearance, onAppearanceChange }: WidgetCu
             />
             {appearance.widgetType === 'selector' ? (
                 <>
-                    <div className="mt-2">Widget selector</div>
+                    <div className="mt-2">Class or ID selector</div>
                     <LemonInput
                         value={appearance.widgetSelector}
                         onChange={(widgetSelector) => onAppearanceChange({ ...appearance, widgetSelector })}
-                        placeholder="ex: .feedback-button"
+                        placeholder="ex: .feedback-button, #feedback-button"
                     />
                 </>
             ) : (
                 <>
-                    <div className="mt-2">Widget label</div>
+                    <div className="mt-2">Label</div>
                     <LemonInput
                         value={appearance.widgetLabel}
                         onChange={(widgetLabel) => onAppearanceChange({ ...appearance, widgetLabel })}
                     />
-                    <div className="mt-2">Widget color</div>
+                    <div className="mt-2">Background color</div>
                     <LemonInput
                         value={appearance.widgetColor}
                         onChange={(widgetColor) => onAppearanceChange({ ...appearance, widgetColor })}
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index 9634386914767..88249193a2c35 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -134,8 +134,8 @@ export default function SurveyEdit(): JSX.Element {
                                                     <PresentationTypeCard
                                                         active={value === SurveyType.Widget}
                                                         onClick={() => onChange(SurveyType.Widget)}
-                                                        title="Widget (beta)"
-                                                        description="Set up a survey based on your own custom button or our prebuilt tab widget"
+                                                        title="Feedback button (beta)"
+                                                        description="Set up a survey based on your own custom button or our prebuilt feedback tab"
                                                         value={SurveyType.Widget}
                                                     >
                                                         <LemonTag type="warning" className="uppercase ml-2">
@@ -354,7 +354,9 @@ export default function SurveyEdit(): JSX.Element {
                                                   <>
                                                       {survey.type === SurveyType.Widget && (
                                                           <>
-                                                              <div className="font-bold">Widget customization</div>
+                                                              <div className="font-bold">
+                                                                  Feedback button customization
+                                                              </div>
                                                               <WidgetCustomization
                                                                   appearance={value || defaultSurveyAppearance}
                                                                   onAppearanceChange={(appearance) => {