ElyBy-Mirror/emails-renderer
1
0
Fork 0
mirror of https://github.com/elyby/emails-renderer.git synced 2024-11-09 23:12:09 +05:30
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ErickSkrauch 2016-09-12 21:17:57 +03:00
parent c48620c36a
commit c675a2d056
17 changed files with 313 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/button/Button.jsx Normal file
View File

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

1
src/components/button/index.js Normal file
View File

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

8
src/components/button/styles.js Normal file
View File

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

12
src/components/input/Input.jsx Normal file
View File

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

1
src/components/input/index.js Normal file
View File

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

11
src/components/input/styles.js Normal file
View File

@ -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'
}
};

3
src/components/styles.js
View File

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

2
src/components/userbar/Userbar.jsx
View File

@ -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'
}} />

1
src/components/userbar/index.js Normal file
View File

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

180
src/emails/register/Register.jsx
View File

@ -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
};

8
src/emails/register/fixtures.js
View File

@ -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'
}
};

BIN
src/emails/register/images/confirmEmail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/emails/register/images/darkBlueMan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/emails/register/images/headerBackground.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/emails/register/images/orangeMan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/emails/register/images/violetMan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

82
src/emails/register/styles.js
View File

@ -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'
}
};