79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import * as React from 'react';
|
|
import { brandColours } from '../utilities/helpers';
|
|
|
|
interface InviteEmailProperties {
|
|
playerName: string;
|
|
inviteCode: string;
|
|
}
|
|
|
|
export const InviteEmail = (props: InviteEmailProperties) => (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
background: brandColours.light,
|
|
}}
|
|
>
|
|
<table
|
|
width="100%"
|
|
border={0}
|
|
cellSpacing={0}
|
|
cellPadding={0}
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<td align="center">
|
|
<div
|
|
style={{
|
|
padding: '20px',
|
|
borderRadius: '20px',
|
|
background: brandColours.white,
|
|
margin: '50px',
|
|
color: brandColours.dark,
|
|
maxWidth: '450px',
|
|
}}
|
|
>
|
|
<h1>You're in, {props.playerName}!</h1>
|
|
<p>
|
|
You've been invited to join {process.env.PRODUCT_NAME}, please click the button below to
|
|
finish signing up.
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginBottom: '40px',
|
|
}}
|
|
>
|
|
<a
|
|
style={{
|
|
display: 'inline-block',
|
|
padding: '10px 20px',
|
|
borderRadius: '5px',
|
|
background: brandColours.primary,
|
|
textDecoration: 'none',
|
|
color: brandColours.light,
|
|
fontSize: '20px',
|
|
fontWeight: 'bold',
|
|
}}
|
|
href={`${process.env.ROOT_URL}/invitation/${props.inviteCode}`}
|
|
>
|
|
Join {process.env.PRODUCT_NAME}
|
|
</a>
|
|
</p>
|
|
<p
|
|
style={{
|
|
fontSize: '0.8rem',
|
|
opacity: '80%',
|
|
}}
|
|
>
|
|
If above button does not work, copy the link below into a new browser tab:
|
|
<br />
|
|
{`${process.env.ROOT_URL}/invitation/${props.inviteCode}`}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|