fix(surveys): fix old surveys border color bug (#17783)

PostHog · Oct 4, 2023 · 6066aec · 6066aec
1 parent b87d907
commit 6066aec
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -145,7 +145,7 @@ export function SurveyAppearance({
                     />
                     <div className="mt-2">Border color</div>
                     <LemonInput
-                        value={appearance?.borderColor}
+                        value={appearance?.borderColor || defaultSurveyAppearance.borderColor}
                         onChange={(borderColor) => onAppearanceChange({ ...appearance, borderColor })}
                     />
                     {featureFlags[FEATURE_FLAGS.SURVEYS_POSITIONS] && (
@@ -255,12 +255,15 @@ function BaseAppearance({
             className="survey-form"
             style={{
                 backgroundColor: appearance.backgroundColor,
-                border: `1.5px solid ${appearance.borderColor}`,
+                border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                 color: textColor,
             }}
         >
             <div className="survey-box">
-                <div style={{ border: `1.5px solid ${appearance.borderColor}` }} className="cancel-btn-wrapper">
+                <div
+                    style={{ border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}` }}
+                    className="cancel-btn-wrapper"
+                >
                     <button className="form-cancel" type="button">
                         {cancel}
                     </button>
@@ -270,7 +273,9 @@ function BaseAppearance({
                     {description && <div className="description">{description}</div>}
                     {type === SurveyQuestionType.Open && (
                         <textarea
-                            style={{ border: `1px solid ${appearance.borderColor}` }}
+                            style={{
+                                border: `1px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
+                            }}
                             className="survey-textarea"
                             name="survey"
                             rows={4}
@@ -325,7 +330,7 @@ const RatingButton = ({
             style={{
                 color: textColor,
                 backgroundColor: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor,
-                borderColor: appearance.borderColor,
+                borderColor: appearance.borderColor || defaultSurveyAppearance.borderColor,
             }}
         >
             {num}
@@ -344,7 +349,7 @@ const NumberRating = ({
     return (
         <div
             style={{
-                border: `1.5px solid ${appearance.borderColor}`,
+                border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                 gridTemplateColumns: `repeat(${ratingSurveyQuestion.scale}, minmax(0, 1fr))`,
             }}
             className={`rating-options-buttons ${ratingSurveyQuestion.scale === 5 ? '' : 'max-numbers'}`}
@@ -425,12 +430,15 @@ function SurveyRatingAppearance({
             className="survey-form"
             style={{
                 backgroundColor: appearance.backgroundColor,
-                border: `1.5px solid ${appearance.borderColor}`,
+                border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                 color: textColor,
             }}
         >
             <div className="survey-box">
-                <div style={{ border: `1.5px solid ${appearance.borderColor}` }} className="cancel-btn-wrapper">
+                <div
+                    style={{ border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}` }}
+                    className="cancel-btn-wrapper"
+                >
                     <button className="form-cancel" type="button">
                         {cancel}
                     </button>
@@ -498,12 +506,15 @@ function SurveyMultipleChoiceAppearance({
             className="survey-form"
             style={{
                 backgroundColor: appearance.backgroundColor,
-                border: `1.5px solid ${appearance.borderColor}`,
+                border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                 color: textColor,
             }}
         >
             <div className="survey-box">
-                <div style={{ border: `1.5px solid ${appearance.borderColor}` }} className="cancel-btn-wrapper">
+                <div
+                    style={{ border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}` }}
+                    className="cancel-btn-wrapper"
+                >
                     <button className="form-cancel" type="button">
                         {cancel}
                     </button>
@@ -559,12 +570,15 @@ function SurveyThankYou({
             className="thank-you-message"
             style={{
                 backgroundColor: appearance.backgroundColor,
-                border: `1.5px solid ${appearance.borderColor}`,
+                border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                 color: textColor,
             }}
         >
             <div className="thank-you-message-container">
-                <div style={{ border: `1.5px solid ${appearance.borderColor}` }} className="cancel-btn-wrapper">
+                <div
+                    style={{ border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}` }}
+                    className="cancel-btn-wrapper"
+                >
                     <button className="form-cancel" type="button" onClick={() => setShowThankYou(false)}>
                         {cancel}
                     </button>