3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-19 01:07:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

💬 Update email text and layout

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

19
packages/emails/src/templates/components/email-layout.tsx
View file

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

3
packages/emails/src/templates/components/styled-components.tsx
View file

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

10
packages/emails/src/templates/new-participant-confirmation.tsx
View file

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