Fix Progress Bar in in-App Survey Preview

This commit is contained in:
Moritz Rengert
2023-05-26 12:44:54 +02:00
committed by GitHub
parent 3618310116
commit fec3741ef4
2 changed files with 23 additions and 20 deletions

View File

@@ -128,25 +128,28 @@ export default function PreviewSurvey({
{previewType === "modal" ? (
<Modal isOpen={isModalOpen}>
{(activeQuestionId || lastActiveQuestionId) === "thank-you-card" ? (
<ThankYouCard
brandColor={brandColor}
headline={thankYouCard?.headline || "Thank you!"}
subheader={thankYouCard?.subheader || "We appreciate your feedback."}
/>
) : (
questions.map((question, idx) =>
(activeQuestionId || lastActiveQuestionId) === question.id ? (
<QuestionConditional
key={question.id}
question={question}
brandColor={brandColor}
lastQuestion={idx === questions.length - 1}
onSubmit={gotoNextQuestion}
/>
) : null
)
)}
<div className="px-4 py-6 sm:p-6">
{(activeQuestionId || lastActiveQuestionId) === "thank-you-card" ? (
<ThankYouCard
brandColor={brandColor}
headline={thankYouCard?.headline || "Thank you!"}
subheader={thankYouCard?.subheader || "We appreciate your feedback."}
/>
) : (
questions.map((question, idx) =>
(activeQuestionId || lastActiveQuestionId) === question.id ? (
<QuestionConditional
key={question.id}
question={question}
brandColor={brandColor}
lastQuestion={idx === questions.length - 1}
onSubmit={gotoNextQuestion}
/>
) : null
)
)}
</div>
<Progress progress={progress} brandColor={brandColor} />
</Modal>
) : (
<div className="flex flex-grow flex-col">

View File

@@ -13,7 +13,7 @@ export default function Modal({ children, isOpen }: { children: ReactNode; isOpe
<div
className={cn(
show ? "translate-x-0 opacity-100" : "translate-x-32 opacity-0",
"pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white px-4 py-6 shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out sm:p-6"
"pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out"
)}>
{children}
</div>