diff --git a/packages/emails/src/components/BaseEmailHtml.tsx b/packages/emails/src/components/BaseEmailHtml.tsx index 0583c98182..a5c79dc2fb 100644 --- a/packages/emails/src/components/BaseEmailHtml.tsx +++ b/packages/emails/src/components/BaseEmailHtml.tsx @@ -26,8 +26,8 @@ export const BaseEmailHtml = (props: { return ( - -
+ +
- {props.headerType && } - {props.title && } - {(props.headerType || props.title || props.subtitle) && } - -
`} /> @@ -47,96 +47,53 @@ export const BaseEmailHtml = (props: {
`} - />
- -
-
`} - /> -
+ )} + {props.title && ( + + )} + {(props.headerType || props.title || props.subtitle) && ( + + )} + +
- - - - - - - {props.callToAction && } -
`} + /> +
+ +
- - -
- {props.children} -
-
`} - /> - -
- -
-
`} - /> - {props.callToAction && ( + - - - - - - - - + + + - )} - - - + + + + + {props.callToAction && } +
`} + />
- -
- {props.callToAction} -
-
-
+
+ {props.children} +
+
`} + /> + +
+ +
+ + + + + + + + + + + )} + + + + diff --git a/packages/emails/src/components/EmailScheduledBodyHeaderContent.tsx b/packages/emails/src/components/EmailScheduledBodyHeaderContent.tsx index 13e8c8b663..64e4372d0b 100644 --- a/packages/emails/src/components/EmailScheduledBodyHeaderContent.tsx +++ b/packages/emails/src/components/EmailScheduledBodyHeaderContent.tsx @@ -1,7 +1,13 @@ +import { CSSProperties } from "react"; + import EmailCommonDivider from "./EmailCommonDivider"; -const EmailScheduledBodyHeaderContent = (props: { title: string; subtitle?: React.ReactNode }) => ( - +const EmailScheduledBodyHeaderContent = (props: { + title: string; + subtitle?: React.ReactNode; + headStyles?: CSSProperties; +}) => ( +
`} + /> + {props.callToAction && ( +
+ +
+ {props.callToAction} +
+
+
{props.title} @@ -35,7 +41,7 @@ const EmailScheduledBodyHeaderContent = (props: { title: string; subtitle?: Reac fontWeight: 400, lineHeight: "24px", textAlign: "center", - color: "#494949", + color: "#4B5563", }}> {props.subtitle} diff --git a/packages/emails/src/components/EmailSchedulingBodyDivider.tsx b/packages/emails/src/components/EmailSchedulingBodyDivider.tsx index fe4e9067c6..1e3d181052 100644 --- a/packages/emails/src/components/EmailSchedulingBodyDivider.tsx +++ b/packages/emails/src/components/EmailSchedulingBodyDivider.tsx @@ -1,8 +1,10 @@ +import { CSSProperties } from "react"; + import EmailCommonDivider from "./EmailCommonDivider"; import RawHtml from "./RawHtml"; -export const EmailSchedulingBodyDivider = () => ( - +export const EmailSchedulingBodyDivider = (props: { headStyles?: CSSProperties }) => ( + { } }; -const EmailSchedulingBodyHeader = (props: { headerType: BodyHeadType }) => { +const EmailSchedulingBodyHeader = (props: { headerType: BodyHeadType; headStyles?: CSSProperties }) => { const image = getHeadImage(props.headerType); return ( <> - + {props.withSpacer && }
-

{props.label}

+

{props.label}

{providerName || "Link"} diff --git a/packages/emails/src/components/ManageLink.tsx b/packages/emails/src/components/ManageLink.tsx index 9be2fbee04..d5a0563cda 100644 --- a/packages/emails/src/components/ManageLink.tsx +++ b/packages/emails/src/components/ManageLink.tsx @@ -17,7 +17,7 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person }) fontWeight: 500, lineHeight: "0px", textAlign: "left", - color: "#3e3e3e", + color: "#101010", }}>

+ style={{ color: "#374151", marginLeft: "5px", marginRight: "5px" }}> <>{t("reschedule")} <>{t("or_lowercase")} )} - + <>{t("cancel")}

diff --git a/packages/emails/src/components/WhenInfo.tsx b/packages/emails/src/components/WhenInfo.tsx index 015bce35fb..6e6bf54659 100644 --- a/packages/emails/src/components/WhenInfo.tsx +++ b/packages/emails/src/components/WhenInfo.tsx @@ -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")}{" "} - ({timeZone}) + ({timeZone}) } withSpacer diff --git a/packages/emails/src/components/WhoInfo.tsx b/packages/emails/src/components/WhoInfo.tsx index f9d720f465..41a1bae2ad 100644 --- a/packages/emails/src/components/WhoInfo.tsx +++ b/packages/emails/src/components/WhoInfo.tsx @@ -5,10 +5,10 @@ import type { CalendarEvent } from "@calcom/types/Calendar"; import { Info } from "./Info"; const PersonInfo = ({ name = "", email = "", role = "" }) => ( -
+
{name} - {role}{" "} - - + + {email}