diff --git a/src/components/button/Button.jsx b/src/components/button/Button.jsx new file mode 100644 index 0000000..4f22df5 --- /dev/null +++ b/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> + ); +} diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 0000000..75b7ff0 --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1 @@ +export Button from './Button'; diff --git a/src/components/button/styles.js b/src/components/button/styles.js new file mode 100644 index 0000000..cfdf01e --- /dev/null +++ b/src/components/button/styles.js @@ -0,0 +1,8 @@ +export default { + button: { + backgroundColor: '#589AAA', + padding: '0 13px', + lineHeight: '50px', + display: 'inline-block' + } +}; diff --git a/src/components/input/Input.jsx b/src/components/input/Input.jsx new file mode 100644 index 0000000..8e2494d --- /dev/null +++ b/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> + ); +} diff --git a/src/components/input/index.js b/src/components/input/index.js new file mode 100644 index 0000000..3069022 --- /dev/null +++ b/src/components/input/index.js @@ -0,0 +1 @@ +export Input from './Input'; diff --git a/src/components/input/styles.js b/src/components/input/styles.js new file mode 100644 index 0000000..9a98eac --- /dev/null +++ b/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' + } +}; diff --git a/src/components/styles.js b/src/components/styles.js index 2e20c56..779030b 100644 --- a/src/components/styles.js +++ b/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' diff --git a/src/components/userbar/Userbar.jsx b/src/components/userbar/Userbar.jsx index 94a0557..65d8fba 100644 --- a/src/components/userbar/Userbar.jsx +++ b/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' }} /> diff --git a/src/components/userbar/index.js b/src/components/userbar/index.js new file mode 100644 index 0000000..ea34f2a --- /dev/null +++ b/src/components/userbar/index.js @@ -0,0 +1 @@ +export Userbar from './Userbar'; diff --git a/src/emails/register/Register.jsx b/src/emails/register/Register.jsx index 6556ea7..2f6f3e3 100644 --- a/src/emails/register/Register.jsx +++ b/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 }; diff --git a/src/emails/register/fixtures.js b/src/emails/register/fixtures.js index ab99df6..8f2dd51 100644 --- a/src/emails/register/fixtures.js +++ b/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' } }; diff --git a/src/emails/register/images/confirmEmail.png b/src/emails/register/images/confirmEmail.png new file mode 100644 index 0000000..ea6efe9 Binary files /dev/null and b/src/emails/register/images/confirmEmail.png differ diff --git a/src/emails/register/images/darkBlueMan.png b/src/emails/register/images/darkBlueMan.png new file mode 100644 index 0000000..60df2b2 Binary files /dev/null and b/src/emails/register/images/darkBlueMan.png differ diff --git a/src/emails/register/images/headerBackground.jpg b/src/emails/register/images/headerBackground.jpg new file mode 100644 index 0000000..536a456 Binary files /dev/null and b/src/emails/register/images/headerBackground.jpg differ diff --git a/src/emails/register/images/orangeMan.png b/src/emails/register/images/orangeMan.png new file mode 100644 index 0000000..32e7bac Binary files /dev/null and b/src/emails/register/images/orangeMan.png differ diff --git a/src/emails/register/images/violetMan.png b/src/emails/register/images/violetMan.png new file mode 100644 index 0000000..506dcf8 Binary files /dev/null and b/src/emails/register/images/violetMan.png differ diff --git a/src/emails/register/styles.js b/src/emails/register/styles.js index 02a61be..96e47ee 100644 --- a/src/emails/register/styles.js +++ b/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' + } };