fix: rating question email embed alignment (#2988)

This commit is contained in:
Piyush Gupta
2024-08-09 14:00:47 +05:30
committed by GitHub
parent b7ea073204
commit 46efad94db

View File

@@ -10,7 +10,7 @@ import {
Text,
} from "@react-email/components";
import { render } from "@react-email/render";
import { CalendarDaysIcon } from "lucide-react";
import { CalendarDaysIcon, UploadIcon } from "lucide-react";
import React from "react";
import { cn } from "@formbricks/lib/cn";
import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
@@ -200,7 +200,8 @@ export function PreviewEmailTemplate({ survey, surveyUrl, styling }: PreviewEmai
},
firstQuestion.isColorCodingEnabled && firstQuestion.scale === "number"
? "h-[46px]"
: "h-10"
: "h-10",
firstQuestion.scale === "star" ? "h-12" : "h-10"
)}
href={`${urlWithPrefilling}${firstQuestion.id}=${(i + 1).toString()}`}
key={i}>
@@ -302,13 +303,13 @@ export function PreviewEmailTemplate({ survey, surveyUrl, styling }: PreviewEmai
{firstQuestion.choices.map((choice) =>
firstQuestion.allowMulti ? (
<Img
className="rounded-custom mb-1 mr-1 inline-block h-[110px] w-[220px]"
className="rounded-custom mb-1 mr-1 inline-block h-[140px] w-[220px]"
key={choice.id}
src={choice.imageUrl}
/>
) : (
<Link
className="rounded-custom mb-1 mr-1 inline-block h-[110px] w-[220px]"
className="rounded-custom mb-1 mr-1 inline-block h-[140px] w-[220px]"
href={`${urlWithPrefilling}${firstQuestion.id}=${choice.id}`}
key={choice.id}
target="_blank">
@@ -412,11 +413,19 @@ export function PreviewEmailTemplate({ survey, surveyUrl, styling }: PreviewEmai
<Text className="text-question-color m-0 block p-0 text-sm font-normal leading-6">
{getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
</Text>
{Array.from({ length: 6 }).map((_, index) => (
{[
"Address Line 1",
"Address Line 2",
"City / Town",
"State / Region",
"ZIP / Post Code",
"Country",
].map((label) => (
<Section
className="border-input-border-color bg-input-color rounded-custom mt-4 block h-10 w-full border border-solid"
key={index}
/>
className="border-input-border-color bg-input-color rounded-custom mt-4 block h-10 w-full border border-solid py-2 pl-2 text-slate-400"
key={label}>
{label}
</Section>
))}
<EmailFooter />
</EmailTemplateWrapper>
@@ -430,7 +439,12 @@ export function PreviewEmailTemplate({ survey, surveyUrl, styling }: PreviewEmai
<Text className="text-question-color m-0 block p-0 text-sm font-normal leading-6">
{getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
</Text>
<Section className="border-input-border-color rounded-custom mt-4 block h-20 w-full border border-solid bg-slate-50" />
<Section className="border-input-border-color rounded-custom mt-4 block flex h-24 w-full items-center justify-center border border-dashed bg-slate-50">
<Container className="mx-auto flex items-center text-center">
<UploadIcon className="mt-6 inline h-5 w-5 text-slate-400" />
<Text className="text-slate-400">Click or drag to upload files.</Text>
</Container>
</Section>
<EmailFooter />
</EmailTemplateWrapper>
);