Я наконец-то заверстал письмо о регистрации

src/components/button/Button.jsx

@@ -0,0 +1,12 @@
+import styles from './styles';
+
+export default function Button(props) {
+    return (
+        <div style={{
+            ...styles.button,
+            ...props.style
+        }}>
+            {props.children}
+        </div>
+    );
+}

src/components/button/index.js

@@ -0,0 +1 @@
+export Button from './Button';

src/components/button/styles.js

@@ -0,0 +1,8 @@
+export default {
+    button: {
+        backgroundColor: '#589AAA',
+        padding: '0 13px',
+        lineHeight: '50px',
+        display: 'inline-block'
+    }
+};

src/components/input/Input.jsx

@@ -0,0 +1,12 @@
+import styles from './styles';
+
+export default function Input(props) {
+    return (
+        <div style={{
+            ...styles.input,
+            ...props.style
+        }}>
+            {props.children}
+        </div>
+    );
+}

src/components/input/index.js

@@ -0,0 +1 @@
+export Input from './Input';

src/components/input/styles.js

@@ -0,0 +1,11 @@
+export default {
+    input: {
+        backgroundColor: '#fff',
+        padding: '0 30px',
+        lineHeight: '50px',
+        fontSize: '18px',
+        display: 'inline-block',
+        border: '3px solid #589AAA',
+        color: '#568297'
+    }
+};

src/components/styles.js

@@ -1,7 +1,8 @@
 export default {
     body: {
         backgroundColor: '#EBE8E1',
-        width: '100%'
+        width: '100%',
+        fontFamily: 'Roboto, Arial, sans-serif'
     },
     container: {
         width: '600px'

src/components/userbar/Userbar.jsx

@@ -12,7 +12,7 @@ export default function Userbar() {
                 <td style={styles.logoColumn}>
                     <div style={styles.logo}>
                         {/* TODO: здесь нужно динамически сформировать название, т.к. может быть Ёly.by */}
-                        <img src={logoImage} style={{
+                        <img src={logoImage} alt="Ely.by" style={{
                             width: '65px',
                             verticalAlign: 'middle'
                         }} />

src/components/userbar/index.js

@@ -0,0 +1 @@
+export Userbar from './Userbar';

src/emails/register/Register.jsx

@@ -2,20 +2,192 @@ import { PropTypes } from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 
-import { Userbar } from 'components';
+import { Userbar } from 'components/userbar';
+import { Table } from 'components/table';
+import { Button } from 'components/button';
+import { Input } from 'components/input';
 
 import styles from './styles';
 import messages from './messages.intl.json';
 
-export default function Register({username}) {
+import welcomeImage from './images/welcome.png';
+import confirmEmailImage from './images/confirmEmail.png';
+import whatsNextImage from './images/whatsNext.png';
+import violetManImage from './images/violetMan.png';
+import chooseYouSkin from './images/chooseYouSkin.png';
+import orangeManImage from './images/orangeMan.png';
+import installOurPatch from './images/installOurPatch.png';
+import darkBlueManImage from './images/darkBlueMan.png';
+import useTLauncher from './images/useTlauncher.png';
+import footerLogoImage from './images/footerLogo.png';
+
+export default function Register({username, link, code}) {
     return (
         <div>
             <Userbar />
-            <Message {...messages.you_registered_as} values={{username}} />
+            <Table style={styles.headerImage}>
+                <tr>
+                    <td style={styles.headerTextContainer}>
+                        <div style={styles.welcomeUsername}>Привет, {username}</div>
+                        <img src={welcomeImage} alt="Добро пожаловать на Ely.by" style={{
+                            width: '374px',
+                            verticalAlign: 'middle'
+                        }} />
+                    </td>
+                </tr>
+            </Table>
+
+            <div style={styles.content}>
+                <Table>
+                    <tr>
+                        <td>
+                            <div style={styles.paragraph}>Мы рады видеть тебя в рядах пользователей проекта Ely.by. Ты уже почти у цели, осталось лишь подтвердить свой E‑mail адрес. Чтобы сделать это, пожалуйста, нажми на кнопку, которая расположена ниже.</div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={{
+                            ...styles.contentCenterCell,
+                            ...styles.confirmEmailCell
+                        }}>
+                            <a href={link}>
+                                <Button style={styles.confirmEmailButton}>
+                                    <img src={confirmEmailImage} alt="Подтвердить E-mail" style={{
+                                        width: '147px',
+                                        verticalAlign: 'middle'
+                                    }} />
+                                </Button>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={{
+                            ...styles.contentCenterCell,
+                            ...styles.orCell,
+                        }}>
+                            или
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={{
+                            ...styles.contentCenterCell,
+                            ...styles.codeLabelCell
+                        }}>
+                            Укажи этот код в поле ввода на сайте:
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={{
+                            ...styles.contentCenterCell,
+                            ...styles.codeCell
+                        }}>
+                            <Input>{code}</Input>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={{
+                            ...styles.contentCenterCell,
+                            ...styles.whatsNextText
+                        }}>
+                            <img src={whatsNextImage} alt="Что дальше?" style={{
+                                width: '168px',
+                                verticalAlign: 'middle'
+                            }} />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={styles.todoItem}>
+                            <Table>
+                                <tr>
+                                    <td style={styles.todoItemIcon}>
+                                        <img src={violetManImage} style={{
+                                            width: '25px',
+                                            verticalAlign: 'middle'
+                                        }} />
+                                    </td>
+                                    <td style={styles.todoItemContent}>
+                                        <img src={chooseYouSkin} style={{
+                                            width: '179px',
+                                            verticalAlign: 'middle'
+                                        }} />
+                                        <div style={{
+                                            ...styles.paragraph,
+                                            ...styles.todoItemText
+                                        }}>В каталоге скинов Ely.by ты сможешь найти множество разнообразных скинов, каждый из которых готов к тому, чтобы быть надетым.</div>
+                                    </td>
+                                </tr>
+                            </Table>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={styles.todoItem}>
+                            <Table>
+                                <tr>
+                                    <td style={styles.todoItemIcon}>
+                                        <img src={orangeManImage} style={{
+                                            width: '25px',
+                                            verticalAlign: 'middle'
+                                        }} />
+                                    </td>
+                                    <td style={styles.todoItemContent}>
+                                        <img src={installOurPatch} style={{
+                                            width: '252px',
+                                            verticalAlign: 'middle'
+                                        }} />
+                                        <div style={{
+                                            ...styles.paragraph,
+                                            ...styles.todoItemText
+                                        }}>Для того, чтобы система скинов Ely.by работала, тебе нужно установить наш патч. Найти его можно в разделе загрузок на сайте.</div>
+                                    </td>
+                                </tr>
+                            </Table>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style={styles.todoItem}>
+                            <Table>
+                                <tr>
+                                    <td style={styles.todoItemIcon}>
+                                        <img src={darkBlueManImage} style={{
+                                            width: '25px',
+                                            verticalAlign: 'middle'
+                                        }} />
+                                    </td>
+                                    <td style={styles.todoItemContent}>
+                                        <img src={useTLauncher} style={{
+                                            width: '209px',
+                                            verticalAlign: 'middle'
+                                        }} />
+                                        <div style={{
+                                            ...styles.paragraph,
+                                            ...styles.todoItemText
+                                        }}>Всё гораздо проще, когда ты используешь правильный инструмент для своей задачи. TLauncher является лучшим альтернативным лаунчером для Minecraft, который также имеет встроенную поддержку Ely.by.</div>
+                                    </td>
+                                </tr>
+                            </Table>
+                        </td>
+                    </tr>
+                </Table>
+            </div>
+
+            <Table style={styles.footer}>
+                <tr>
+                    <td style={styles.footerText}>Ты получил это письмо, т.к. этот E-mail был указан при регистрации на сервисе Аккаунты Ely.by. Если это был не ты, то просто удали это письмо.</td>
+                    <td style={styles.footerLogo}>
+                        <a href="http://ely.by">
+                            <img src={footerLogoImage} style={{
+                                width: '177px',
+                                verticalAlign: 'middle'
+                            }} />
+                        </a>
+                    </td>
+                </tr>
+            </Table>
         </div>
     );
 }
 
 Register.propTypes = {
-    username: PropTypes.string
+    username: PropTypes.string,
+    link: PropTypes.string,
+    code: PropTypes.string
 };

src/emails/register/fixtures.js

@@ -1,9 +1,13 @@
 export default {
     default: {
-        username: 'ErickSkrauch'
+        username: 'ErickSkrauch',
+        code: 'I7SP06BUTLLM8MA03O',
+        link: 'https://account.ely.by/activation/I7SP06BUTLLM8MA03O'
     },
 
     SleepWalker: {
-        username: 'SleepWalker'
+        username: 'SleepWalker',
+        code: 'TLLM8MA03OI7SP06BU',
+        link: 'https://account.ely.by/activation/TLLM8MA03OI7SP06BU'
     }
 };

src/emails/register/styles.js

@@ -1,2 +1,84 @@
+import background from './images/headerBackground.jpg';
+
 export default {
+    headerImage: {
+        height: '200px',
+        backgroundImage: `url(${background})`
+    },
+    headerTextContainer: {
+        color: '#fff',
+        textAlign: 'center',
+        verticalAlign: 'middle'
+    },
+    welcomeUsername: {
+        fontSize: '20px'
+    },
+
+    content: {
+        background: '#fff',
+        padding: '50px',
+        borderBottom: '10px solid #207E5C'
+    },
+
+    contentCenterCell: {
+        textAlign: 'center'
+    },
+
+    paragraph: {
+        fontSize: '16px',
+        lineHeight: '125%'
+    },
+
+    confirmEmailCell: {
+        paddingTop: '20px'
+    },
+    confirmEmailButton: {
+        paddingLeft: '50px',
+        paddingRight: '50px'
+    },
+
+    orCell: {
+        fontSize: '12px',
+        paddingTop: '5px'
+    },
+
+    codeLabelCell: {
+        paddingTop: '1px'
+    },
+    codeCell: {
+        paddingTop: '5px'
+    },
+
+    whatsNextText: {
+        paddingTop: '30px'
+    },
+
+    todoItem: {
+        paddingTop: '30px'
+    },
+    todoItemIcon: {
+        width: '46px',
+        verticalAlign: 'top'
+    },
+    todoItemContent: {
+        verticalAlign: 'top'
+    },
+    todoItemText: {
+        paddingTop: '3px'
+    },
+
+    footer: {
+        background: '#DDD8CE',
+        height: '135px'
+    },
+    footerText: {
+        verticalAlign: 'middle',
+        paddingLeft: '30px',
+        fontSize: '13px',
+        color: '#7A7A7A'
+    },
+    footerLogo: {
+        verticalAlign: 'middle',
+        padding: '0 30px'
+    }
 };