fix(surveys): polishing the popup survey UI (#1279)

* this will cover the textarea stuff * that will do it * uniting the sizing of the thank you message and survey form * this seems to do the trick
PostHog · Jul 5, 2024 · 2a8fd80 · 2a8fd80
1 parent d554e7a
commit 2a8fd80
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 35 deletions.
diff --git a/src/extensions/surveys/components/QuestionTypes.tsx b/src/extensions/surveys/components/QuestionTypes.tsx
@@ -140,6 +140,12 @@ export function RatingQuestion({
                                         onClick={() => {
                                             setRating(idx + 1)
                                         }}
+                                        style={{
+                                            fill: active
+                                                ? appearance.ratingButtonActiveColor
+                                                : appearance.ratingButtonColor,
+                                            borderColor: appearance.borderColor,
+                                        }}
                                     >
                                         {emoji}
                                     </button>
@@ -195,7 +201,7 @@ export function RatingButton({
     num: number
     active: boolean
     displayQuestionIndex: number
-    appearance: any
+    appearance: SurveyAppearance
     setActiveNumber: (num: number) => void
 }) {
     const { textColor, ref } = useContrastingTextColor({ appearance, defaultTextColor: 'black', forceUpdate: active })

diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx
@@ -16,7 +16,7 @@ export const style = (appearance: SurveyAppearance | null) => {
           `,
     }
     return `
-          .survey-form {
+          .survey-form, .thank-you-message {
               position: fixed;
               margin: 0px;
               bottom: 0px;
@@ -25,24 +25,34 @@ export const style = (appearance: SurveyAppearance | null) => {
               font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
               text-align: left;
               max-width: ${parseInt(appearance?.maxWidth || '300')}px;
+              width: 100%;
               z-index: ${parseInt(appearance?.zIndex || '99999')};
               border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};
               border-bottom: 0px;
-              width: 100%;
               ${positions[appearance?.position || 'right'] || 'right: 30px;'}
-          }
-          .form-submit[disabled] {
-              opacity: 0.6;
-              filter: grayscale(50%);
-              cursor: not-allowed;
-          }
-          .survey-form {
               flex-direction: column;
               background: ${appearance?.backgroundColor || '#eeeded'};
               border-top-left-radius: 10px;
               border-top-right-radius: 10px;
               box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
           }
+          
+          .survey-box, .thank-you-message-container {
+              padding: 20px 25px 10px;
+              display: flex;
+              flex-direction: column;
+              border-radius: 10px;
+          }
+
+          .thank-you-message {
+              text-align: center;
+          }
+
+          .form-submit[disabled] {
+              opacity: 0.6;
+              filter: grayscale(50%);
+              cursor: not-allowed;
+          }
           .survey-form textarea {
               color: #2d2d2d;
               font-size: 14px;
@@ -57,6 +67,9 @@ export const style = (appearance: SurveyAppearance | null) => {
               border-color: ${appearance?.borderColor || '#c9c6c6'};
               margin-top: 14px;
           }
+          .survey-box:has(.survey-question:empty):not(:has(.description)) textarea {
+              margin-top: 0;
+          }
           .form-submit {
               box-sizing: border-box;
               margin: 0;
@@ -118,12 +131,6 @@ export const style = (appearance: SurveyAppearance | null) => {
               background: ${appearance?.backgroundColor || '#eeeded'};
               text-decoration: none;
           }
-          .survey-box {
-              padding: 20px 25px 10px;
-              display: flex;
-              flex-direction: column;
-              border-radius: 10px;
-          }
           .survey-question {
               font-weight: 500;
               font-size: 14px;
@@ -139,7 +146,6 @@ export const style = (appearance: SurveyAppearance | null) => {
               background: ${appearance?.backgroundColor || '#eeeded'};
           }
           .ratings-number {
-              background-color: ${appearance?.ratingButtonColor || 'white'};
               font-size: 16px;
               font-weight: 600;
               padding: 8px 0px;
@@ -183,7 +189,7 @@ export const style = (appearance: SurveyAppearance | null) => {
               fill: ${appearance?.ratingButtonActiveColor || 'black'};
           }
           .emoji-svg {
-              fill: ${appearance?.ratingButtonColor || '#c9c6c6'};
+              fill: '#939393';
           }
           .rating-text {
               display: flex;
@@ -198,6 +204,9 @@ export const style = (appearance: SurveyAppearance | null) => {
               margin-top: 13px;
               font-size: 14px;
           }
+          .survey-box:has(.survey-question:empty):not(:has(.description)) .multiple-choice-options {
+              margin-top: 0;
+          }
           .multiple-choice-options .choice-option {
               display: flex;
               align-items: center;
@@ -266,23 +275,6 @@ export const style = (appearance: SurveyAppearance | null) => {
               border: 0;
               outline: 0;
           }
-          .thank-you-message {
-              position: fixed;
-              bottom: 0px;
-              z-index: ${parseInt(appearance?.zIndex || '99999')};
-              box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
-              font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-              border-top-left-radius: 10px;
-              border-top-right-radius: 10px;
-              padding: 20px 25px 10px;
-              background: ${appearance?.backgroundColor || '#eeeded'};
-              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};
-              text-align: center;
-              max-width: ${parseInt(appearance?.maxWidth || '300')}px;
-              min-width: 150px;
-              width: 100%;
-              ${positions[appearance?.position || 'right'] || 'right: 30px;'}
-          }
           .thank-you-message-body {
               margin-top: 6px;
               font-size: 14px;