PostHog · jurajmajerik · Apr 29, 2024 · Feb 10, 2024 · Feb 11, 2024 · Feb 11, 2024
diff --git a/frontend/__snapshots__/components-compact-list--compact-list--dark.png b/frontend/__snapshots__/components-compact-list--compact-list--dark.png
diff --git a/frontend/__snapshots__/components-compact-list--compact-list--light.png b/frontend/__snapshots__/components-compact-list--compact-list--light.png
diff --git a/frontend/__snapshots__/components-empty-message--empty-message--dark.png b/frontend/__snapshots__/components-empty-message--empty-message--dark.png
diff --git a/frontend/__snapshots__/components-empty-message--empty-message--light.png b/frontend/__snapshots__/components-empty-message--empty-message--light.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png
diff --git a/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag--dark.png b/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag--dark.png
diff --git a/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag--light.png b/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag--light.png
diff --git a/...snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag--dark.png b/...snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag--dark.png
diff --git a/...napshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag--light.png b/...napshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag--light.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--dark.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--dark.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--light.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--light.png
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--dark.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--dark.png
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--light.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage--light.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey--dark.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey--light.png b/frontend/__snapshots__/scenes-app-surveys--new-survey--light.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-appearance-section--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-appearance-section--dark.png
diff --git a/...tend/__snapshots__/scenes-app-surveys--new-survey-appearance-section--light.png b/...tend/__snapshots__/scenes-app-surveys--new-survey-appearance-section--light.png
diff --git a/...nd/__snapshots__/scenes-app-surveys--new-survey-customisation-section--dark.png b/...nd/__snapshots__/scenes-app-surveys--new-survey-customisation-section--dark.png
diff --git a/...d/__snapshots__/scenes-app-surveys--new-survey-customisation-section--light.png b/...d/__snapshots__/scenes-app-surveys--new-survey-customisation-section--light.png
diff --git a/...end/__snapshots__/scenes-app-surveys--new-survey-presentation-section--dark.png b/...end/__snapshots__/scenes-app-surveys--new-survey-presentation-section--dark.png
diff --git a/...nd/__snapshots__/scenes-app-surveys--new-survey-presentation-section--light.png b/...nd/__snapshots__/scenes-app-surveys--new-survey-presentation-section--light.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--survey-templates--dark.png b/frontend/__snapshots__/scenes-app-surveys--survey-templates--dark.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--survey-templates--light.png b/frontend/__snapshots__/scenes-app-surveys--survey-templates--light.png
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx
@@ -9,13 +9,12 @@ import { notebookNodeLogic } from './notebookNodeLogic'
 import { JSONContent, NotebookNodeProps } from '../Notebook/utils'
 import { buildFlagContent } from './NotebookNodeFlag'
 import { surveyLogic } from 'scenes/surveys/surveyLogic'
-import { defaultSurveyAppearance } from 'scenes/surveys/constants'
 import { StatusTag } from 'scenes/surveys/Surveys'
 import { SurveyResult } from 'scenes/surveys/SurveyView'
-import { SurveyAppearance } from 'scenes/surveys/SurveyAppearance'
 import { SurveyReleaseSummary } from 'scenes/surveys/Survey'
 import { useEffect } from 'react'
 import { NotFound } from 'lib/components/NotFound'
+import { SurveyAppearancePreview } from 'scenes/surveys/SurveyAppearancePreview'
 
 const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttributes>): JSX.Element => {
     const { id } = attributes
@@ -77,10 +76,10 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttribute
                                     <SurveyReleaseSummary id={id} survey={survey} hasTargetingFlag={hasTargetingFlag} />
 
                                     <div className="w-full flex flex-col items-center">
-                                        <SurveyAppearance
-                                            surveyType={survey.type}
-                                            surveyQuestionItem={survey.questions[0]}
-                                            appearance={survey.appearance || defaultSurveyAppearance}
+                                        <SurveyAppearancePreview
+                                            survey={survey}
+                                            activePreview="survey"
+                                            questionIndex={0}
                                         />
                                     </div>
                                 </div>

diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss