[CAL-760] Emails: Design Tokens are not update to 2.0 (#6530)
Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
This commit is contained in:
GitStart-Cal.com
co-authored by
gitstart-calcom
gitstart-calcom
parent
de64d3d9d4
commit
8aa089efe6
@@ -26,8 +26,8 @@ export const BaseEmailHtml = (props: {
|
||||
return (
|
||||
<Html>
|
||||
<EmailHead title={props.subject} />
|
||||
<body style={{ wordSpacing: "normal", backgroundColor: "#F5F5F5" }}>
|
||||
<div style={{ backgroundColor: "#F5F5F5" }}>
|
||||
<body style={{ wordSpacing: "normal", backgroundColor: "#F3F4F6" }}>
|
||||
<div style={{ backgroundColor: "#F3F4F6" }}>
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
||||
/>
|
||||
@@ -47,96 +47,53 @@ export const BaseEmailHtml = (props: {
|
||||
</td>
|
||||
</Row>
|
||||
</div>
|
||||
{props.headerType && <EmailSchedulingBodyHeader headerType={props.headerType} />}
|
||||
{props.title && <EmailScheduledBodyHeaderContent title={props.title} subtitle={props.subtitle} />}
|
||||
{(props.headerType || props.title || props.subtitle) && <EmailSchedulingBodyDivider />}
|
||||
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" className="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
background: "#FFFFFF",
|
||||
backgroundColor: "#FFFFFF",
|
||||
margin: "0px auto",
|
||||
maxWidth: 600,
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #E5E7EB",
|
||||
padding: "2px",
|
||||
backgroundColor: "#FFFFFF",
|
||||
}}>
|
||||
<Row
|
||||
align="center"
|
||||
border="0"
|
||||
style={{ background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }}>
|
||||
<td
|
||||
style={{
|
||||
borderLeft: "1px solid #E1E1E1",
|
||||
borderRight: "1px solid #E1E1E1",
|
||||
direction: "ltr",
|
||||
fontSize: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td className="" style="vertical-align:top;width:598px;" ><![endif]-->`}
|
||||
/>
|
||||
<div
|
||||
className="mj-column-per-100 mj-outlook-group-fix"
|
||||
{props.headerType && (
|
||||
<EmailSchedulingBodyHeader headerType={props.headerType} headStyles={{ border: 0 }} />
|
||||
)}
|
||||
{props.title && (
|
||||
<EmailScheduledBodyHeaderContent
|
||||
headStyles={{ border: 0 }}
|
||||
title={props.title}
|
||||
subtitle={props.subtitle}
|
||||
/>
|
||||
)}
|
||||
{(props.headerType || props.title || props.subtitle) && (
|
||||
<EmailSchedulingBodyDivider headStyles={{ border: 0 }} />
|
||||
)}
|
||||
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" className="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
background: "#FFFFFF",
|
||||
backgroundColor: "#FFFFFF",
|
||||
margin: "0px auto",
|
||||
maxWidth: 600,
|
||||
}}>
|
||||
<Row
|
||||
align="center"
|
||||
border="0"
|
||||
style={{ background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }}>
|
||||
<td
|
||||
style={{
|
||||
fontSize: 0,
|
||||
textAlign: "left",
|
||||
direction: "ltr",
|
||||
display: "inline-block",
|
||||
verticalAlign: "top",
|
||||
width: "100%",
|
||||
fontSize: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<Row border="0" style={{ verticalAlign: "top" }} width="100%">
|
||||
<td align="left" style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Roboto, Helvetica, sans-serif",
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1,
|
||||
textAlign: "left",
|
||||
color: "#3E3E3E",
|
||||
}}>
|
||||
{props.children}
|
||||
</div>
|
||||
</td>
|
||||
</Row>
|
||||
</div>
|
||||
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
||||
</td>
|
||||
</Row>
|
||||
</div>
|
||||
{props.callToAction && <EmailSchedulingBodyDivider />}
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" className="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: "#FFFFFF",
|
||||
backgroundColor: "#FFFFFF",
|
||||
margin: "0px auto",
|
||||
maxWidth: 600,
|
||||
}}>
|
||||
<Row
|
||||
align="center"
|
||||
border="0"
|
||||
style={{ background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }}>
|
||||
<td
|
||||
style={{
|
||||
borderBottom: "1px solid #E1E1E1",
|
||||
borderLeft: "1px solid #E1E1E1",
|
||||
borderRight: "1px solid #E1E1E1",
|
||||
direction: "ltr",
|
||||
fontSize: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td className="" style="vertical-align:top;width:598px;" ><![endif]-->`}
|
||||
/>
|
||||
{props.callToAction && (
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td className="" style="vertical-align:top;width:598px;" ><![endif]-->`}
|
||||
/>
|
||||
<div
|
||||
className="mj-column-per-100 mj-outlook-group-fix"
|
||||
style={{
|
||||
@@ -147,38 +104,96 @@ export const BaseEmailHtml = (props: {
|
||||
verticalAlign: "top",
|
||||
width: "100%",
|
||||
}}>
|
||||
<BaseTable border="0" style={{ verticalAlign: "top" }} width="100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
vertical-align="middle"
|
||||
style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
||||
{props.callToAction}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
align="left"
|
||||
style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Roboto, Helvetica, sans-serif",
|
||||
fontSize: 13,
|
||||
lineHeight: 1,
|
||||
textAlign: "left",
|
||||
color: "#000000",
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</BaseTable>
|
||||
<Row border="0" style={{ verticalAlign: "top" }} width="100%">
|
||||
<td align="left" style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Roboto, Helvetica, sans-serif",
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1,
|
||||
textAlign: "left",
|
||||
color: "#101010",
|
||||
}}>
|
||||
{props.children}
|
||||
</div>
|
||||
</td>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
||||
</td>
|
||||
</Row>
|
||||
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
||||
</td>
|
||||
</Row>
|
||||
</div>
|
||||
{props.callToAction && <EmailSchedulingBodyDivider headStyles={{ border: 0 }} />}
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" className="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: "#FFFFFF",
|
||||
backgroundColor: "#FFFFFF",
|
||||
margin: "0px auto",
|
||||
maxWidth: 600,
|
||||
}}>
|
||||
<Row
|
||||
align="center"
|
||||
border="0"
|
||||
style={{ background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }}>
|
||||
<td
|
||||
style={{
|
||||
direction: "ltr",
|
||||
fontSize: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<RawHtml
|
||||
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td className="" style="vertical-align:top;width:598px;" ><![endif]-->`}
|
||||
/>
|
||||
{props.callToAction && (
|
||||
<div
|
||||
className="mj-column-per-100 mj-outlook-group-fix"
|
||||
style={{
|
||||
fontSize: 0,
|
||||
textAlign: "left",
|
||||
direction: "ltr",
|
||||
display: "inline-block",
|
||||
verticalAlign: "top",
|
||||
width: "100%",
|
||||
}}>
|
||||
<BaseTable border="0" style={{ verticalAlign: "top" }} width="100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
vertical-align="middle"
|
||||
style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
||||
{props.callToAction}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
align="left"
|
||||
style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Roboto, Helvetica, sans-serif",
|
||||
fontSize: 13,
|
||||
lineHeight: 1,
|
||||
textAlign: "left",
|
||||
color: "#000000",
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</BaseTable>
|
||||
</div>
|
||||
)}
|
||||
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
||||
</td>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<EmailBodyLogo />
|
||||
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
import EmailCommonDivider from "./EmailCommonDivider";
|
||||
|
||||
const EmailScheduledBodyHeaderContent = (props: { title: string; subtitle?: React.ReactNode }) => (
|
||||
<EmailCommonDivider headStyles={{ padding: 0 }} mutipleRows>
|
||||
const EmailScheduledBodyHeaderContent = (props: {
|
||||
title: string;
|
||||
subtitle?: React.ReactNode;
|
||||
headStyles?: CSSProperties;
|
||||
}) => (
|
||||
<EmailCommonDivider headStyles={{ padding: 0, ...props.headStyles }} mutipleRows>
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
@@ -19,7 +25,7 @@ const EmailScheduledBodyHeaderContent = (props: { title: string; subtitle?: Reac
|
||||
fontWeight: 700,
|
||||
lineHeight: "24px",
|
||||
textAlign: "center",
|
||||
color: "#292929",
|
||||
color: "#111827",
|
||||
}}>
|
||||
{props.title}
|
||||
</div>
|
||||
@@ -35,7 +41,7 @@ const EmailScheduledBodyHeaderContent = (props: { title: string; subtitle?: Reac
|
||||
fontWeight: 400,
|
||||
lineHeight: "24px",
|
||||
textAlign: "center",
|
||||
color: "#494949",
|
||||
color: "#4B5563",
|
||||
}}>
|
||||
{props.subtitle}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
import EmailCommonDivider from "./EmailCommonDivider";
|
||||
import RawHtml from "./RawHtml";
|
||||
|
||||
export const EmailSchedulingBodyDivider = () => (
|
||||
<EmailCommonDivider>
|
||||
export const EmailSchedulingBodyDivider = (props: { headStyles?: CSSProperties }) => (
|
||||
<EmailCommonDivider headStyles={props.headStyles}>
|
||||
<td
|
||||
align="center"
|
||||
style={{
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
import { BASE_URL, IS_PRODUCTION } from "@calcom/lib/constants";
|
||||
|
||||
import EmailCommonDivider from "./EmailCommonDivider";
|
||||
@@ -22,12 +24,13 @@ export const getHeadImage = (headerType: BodyHeadType): string => {
|
||||
}
|
||||
};
|
||||
|
||||
const EmailSchedulingBodyHeader = (props: { headerType: BodyHeadType }) => {
|
||||
const EmailSchedulingBodyHeader = (props: { headerType: BodyHeadType; headStyles?: CSSProperties }) => {
|
||||
const image = getHeadImage(props.headerType);
|
||||
|
||||
return (
|
||||
<>
|
||||
<EmailCommonDivider headStyles={{ padding: "30px 30px 0 30px", borderTop: "1px solid #E1E1E1" }}>
|
||||
<EmailCommonDivider
|
||||
headStyles={{ padding: "30px 30px 0 30px", borderTop: "1px solid #E1E1E1", ...props.headStyles }}>
|
||||
<td
|
||||
align="center"
|
||||
style={{
|
||||
|
||||
@@ -12,10 +12,10 @@ export const Info = (props: {
|
||||
<>
|
||||
{props.withSpacer && <Spacer />}
|
||||
<div style={{ lineHeight: "6px" }}>
|
||||
<p style={{ color: "#494949" }}>{props.label}</p>
|
||||
<p style={{ color: "#101010" }}>{props.label}</p>
|
||||
<p
|
||||
style={{
|
||||
color: "#494949",
|
||||
color: "#101010",
|
||||
fontWeight: 400,
|
||||
lineHeight: "24px",
|
||||
whiteSpace: "pre-wrap",
|
||||
|
||||
@@ -38,7 +38,7 @@ export function LocationInfo(props: { calEvent: CalendarEvent; t: TFunction }) {
|
||||
href={meetingUrl}
|
||||
target="_blank"
|
||||
title={t("meeting_url")}
|
||||
style={{ color: "#3E3E3E" }}
|
||||
style={{ color: "#101010" }}
|
||||
rel="noreferrer">
|
||||
{providerName || "Link"} <LinkIcon />
|
||||
</a>
|
||||
|
||||
@@ -17,7 +17,7 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person })
|
||||
fontWeight: 500,
|
||||
lineHeight: "0px",
|
||||
textAlign: "left",
|
||||
color: "#3e3e3e",
|
||||
color: "#101010",
|
||||
}}>
|
||||
<p
|
||||
style={{
|
||||
@@ -33,13 +33,13 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person })
|
||||
<>
|
||||
<a
|
||||
href={getRescheduleLink(props.calEvent)}
|
||||
style={{ color: "#3e3e3e", marginLeft: "5px", marginRight: "5px" }}>
|
||||
style={{ color: "#374151", marginLeft: "5px", marginRight: "5px" }}>
|
||||
<>{t("reschedule")}</>
|
||||
</a>
|
||||
<>{t("or_lowercase")}</>
|
||||
</>
|
||||
)}
|
||||
<a href={getCancelLink(props.calEvent)} style={{ color: "#3e3e3e", marginLeft: "5px" }}>
|
||||
<a href={getCancelLink(props.calEvent)} style={{ color: "#374151", marginLeft: "5px" }}>
|
||||
<>{t("cancel")}</>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -56,7 +56,7 @@ export function WhenInfo(props: { calEvent: CalendarEvent; timeZone: string; t:
|
||||
{recurringEvent?.count ? `${t("starting")} ` : ""}
|
||||
{t(getRecipientStart("dddd").toLowerCase())}, {t(getRecipientStart("MMMM").toLowerCase())}{" "}
|
||||
{getRecipientStart("D, YYYY | h:mma")} - {getRecipientEnd("h:mma")}{" "}
|
||||
<span style={{ color: "#888888" }}>({timeZone})</span>
|
||||
<span style={{ color: "#4B5563" }}>({timeZone})</span>
|
||||
</>
|
||||
}
|
||||
withSpacer
|
||||
|
||||
@@ -5,10 +5,10 @@ import type { CalendarEvent } from "@calcom/types/Calendar";
|
||||
import { Info } from "./Info";
|
||||
|
||||
const PersonInfo = ({ name = "", email = "", role = "" }) => (
|
||||
<div style={{ color: "#494949", fontWeight: 400, lineHeight: "24px" }}>
|
||||
<div style={{ color: "#101010", fontWeight: 400, lineHeight: "24px" }}>
|
||||
{name} - {role}{" "}
|
||||
<span style={{ color: "#888888" }}>
|
||||
<a href={`mailto:${email}`} style={{ color: "#888888" }}>
|
||||
<span style={{ color: "#4B5563" }}>
|
||||
<a href={`mailto:${email}`} style={{ color: "#4B5563" }}>
|
||||
{email}
|
||||
</a>
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user