From d203f583452f211602d86af36f7ae67a6f6b4f89 Mon Sep 17 00:00:00 2001 From: dylan Date: Wed, 26 Jun 2024 10:20:54 -0700 Subject: [PATCH 1/4] this will cover the textarea stuff --- src/extensions/surveys/surveys-utils.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx index 488eab8f8..3bbc12391 100644 --- a/src/extensions/surveys/surveys-utils.tsx +++ b/src/extensions/surveys/surveys-utils.tsx @@ -57,6 +57,9 @@ export const style = (appearance: SurveyAppearance | null) => { border-color: ${appearance?.borderColor || '#c9c6c6'}; margin-top: 14px; } + .survey-box:has(.survey-question:empty) textarea { + margin-top: 0; + } .form-submit { box-sizing: border-box; margin: 0; @@ -198,6 +201,9 @@ export const style = (appearance: SurveyAppearance | null) => { margin-top: 13px; font-size: 14px; } + .survey-box > div:has(.survey-question:empty) + .multiple-choice-options { + margin-top: 0; + } .multiple-choice-options .choice-option { display: flex; align-items: center; From b0a34fd6baaba2e6a413f67a6f58ead3abb04d27 Mon Sep 17 00:00:00 2001 From: dylan Date: Tue, 2 Jul 2024 10:21:31 -0700 Subject: [PATCH 2/4] that will do it --- src/extensions/surveys/surveys-utils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx index 3bbc12391..d760f4376 100644 --- a/src/extensions/surveys/surveys-utils.tsx +++ b/src/extensions/surveys/surveys-utils.tsx @@ -57,7 +57,7 @@ export const style = (appearance: SurveyAppearance | null) => { border-color: ${appearance?.borderColor || '#c9c6c6'}; margin-top: 14px; } - .survey-box:has(.survey-question:empty) textarea { + .survey-box:has(.survey-question:empty):not(:has(.description)) textarea { margin-top: 0; } .form-submit { @@ -201,7 +201,7 @@ export const style = (appearance: SurveyAppearance | null) => { margin-top: 13px; font-size: 14px; } - .survey-box > div:has(.survey-question:empty) + .multiple-choice-options { + .survey-box:has(.survey-question:empty):not(:has(.description)) .multiple-choice-options { margin-top: 0; } .multiple-choice-options .choice-option { From 33a1830da54d4d42c4ac2b68cabe78c3fa07dad8 Mon Sep 17 00:00:00 2001 From: dylan Date: Tue, 2 Jul 2024 11:58:11 -0700 Subject: [PATCH 3/4] uniting the sizing of the thank you message and survey form --- src/extensions/surveys/surveys-utils.tsx | 51 +++++++++--------------- 1 file changed, 19 insertions(+), 32 deletions(-) diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx index d760f4376..6c689b500 100644 --- 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; @@ -121,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; @@ -272,23 +276,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; From 1426089943138b1fa0f0479309b27e5b137f227f Mon Sep 17 00:00:00 2001 From: dylan Date: Wed, 3 Jul 2024 13:26:16 -0700 Subject: [PATCH 4/4] this seems to do the trick --- src/extensions/surveys/components/QuestionTypes.tsx | 8 +++++++- src/extensions/surveys/surveys-utils.tsx | 3 +-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/extensions/surveys/components/QuestionTypes.tsx b/src/extensions/surveys/components/QuestionTypes.tsx index 05438b62c..c2a829658 100644 --- 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} @@ -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 index 6c689b500..93e5afe03 100644 --- a/src/extensions/surveys/surveys-utils.tsx +++ b/src/extensions/surveys/surveys-utils.tsx @@ -146,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; @@ -190,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;