💬 Update email text and layout

This commit is contained in:
Luke Vella 2023-04-25 14:26:20 +01:00
parent deb8bba00f
commit 166f558ca5
3 changed files with 26 additions and 6 deletions

View file

@ -20,7 +20,10 @@ interface EmailLayoutProps {
const containerStyles = {
maxWidth: "600px",
margin: "0 auto",
background: "white",
fontFamily,
padding: 16,
borderRadius: 5,
};
const sectionStyles = {
@ -44,17 +47,27 @@ export const EmailLayout = ({
<Html>
<Head />
<Preview>{preview}</Preview>
<Body style={{ backgroundColor: "white", padding: "16px" }}>
<Body style={{ backgroundColor: "#e5e7eb", padding: "16px" }}>
<Container style={containerStyles}>
<Img src={absoluteUrl("/logo.png")} alt="Rallly" width={128} />
<Section style={sectionStyles}>
<Text>Hi {firstName},</Text>
{children}
{footNote ? (
<Text style={{ color: "#64748B", fontFamily }}>{footNote}</Text>
<Text
style={{
color: "#64748B",
fontFamily,
paddingTop: 16,
marginTop: 32,
borderTop: "1px solid #e2e8f0",
}}
>
{footNote}
</Text>
) : null}
</Section>
<Section style={{ ...sectionStyles, fontSize: 14 }}>
<Section style={{ ...sectionStyles, fontSize: 14, marginBottom: 0 }}>
<Link style={linkStyles} href={absoluteUrl()}>
Home
</Link>

View file

@ -81,6 +81,7 @@ export const Heading = (
style={{
marginTop: "16px",
marginBottom: "8px",
letterSpacing: "-0.75px",
fontFamily: "sans-serif",
fontWeight: "bold",
fontSize: fontSize[as],
@ -135,7 +136,7 @@ export const Card = (props: SectionProps) => {
{...props}
style={{
borderRadius: "4px",
backgroundColor: "#F1F5F9",
backgroundColor: "#f3f4f6",
paddingRight: "16px",
paddingLeft: "16px",
border: "1px solid #E2E8F0",

View file

@ -1,5 +1,11 @@
import { EmailLayout } from "./components/email-layout";
import { Button, Domain, Section, Text } from "./components/styled-components";
import {
Button,
Domain,
Link,
Section,
Text,
} from "./components/styled-components";
import { getDomain } from "./components/utils";
interface NewParticipantConfirmationEmailProps {
@ -24,7 +30,7 @@ export const NewParticipantConfirmationEmail = ({
preview="To edit your response use the link below"
>
<Text>
Thank you for responding to <strong>{title}</strong>.
Your response to <strong>{title}</strong> has been submitted.
</Text>
<Text>
While the poll is still open you can change your response using the link