Отделяем шапку письма в отдельный компонент

This commit is contained in:
ErickSkrauch 2016-09-30 19:58:25 +03:00
parent 14e84d4172
commit 73734c10c1
8 changed files with 54 additions and 28 deletions

View File

@ -0,0 +1,28 @@
import { Table } from 'components/table';
import { FormattedMessage as Message } from 'react-intl';
import { PropTypes } from 'react';
import styles from './styles';
import messages from './messages.intl.json';
export default function Userbar({username, title}) {
return (
<Table style={styles.headerImage}>
<tr>
<td style={styles.headerTextContainer}>
<div style={styles.welcomeUsername}>
<Message {...messages.hello_username} values={{username}} />
</div>
{title}
</td>
</tr>
</Table>
);
}
Userbar.propTypes = {
username: PropTypes.string,
title: PropTypes.node
};

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

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

View File

@ -0,0 +1,3 @@
{
"hello_username": "Hello, {username}"
}

View File

@ -0,0 +1,16 @@
import background from './background.jpg';
export default {
headerImage: {
height: '200px',
backgroundImage: `url(${background})`
},
headerTextContainer: {
color: '#fff',
textAlign: 'center',
verticalAlign: 'middle'
},
welcomeUsername: {
fontSize: '20px'
},
};

View File

@ -4,6 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
import { Userbar } from 'components/userbar';
import { Table } from 'components/table';
import { Header } from 'components/header';
import { Button } from 'components/button';
import { Input } from 'components/input';
import { BitmapText } from 'components/text';
@ -19,19 +20,12 @@ export default function Register({username, link, code}) {
return (
<div>
<Userbar />
<Table style={styles.headerImage}>
<tr>
<td style={styles.headerTextContainer}>
<div style={styles.welcomeUsername}>
<Message {...messages.hello_username} values={{username}} />
</div>
<BitmapText message={messages.welcome_image} style={{
verticalAlign: 'middle'
}} />
</td>
</tr>
</Table>
<Header username={username} title={
<BitmapText message={messages.welcome_image} style={{
verticalAlign: 'middle'
}} />
} />
<div style={styles.content}>
<Table>

View File

@ -1,5 +1,4 @@
{
"hello_username": "Hello, {username}",
"welcome_image": "Welcome to Ely.by",
"we_glad_to_see_you": "We glad to see you among the users of Ely.by. You almost reached the final point, it remains only to confirm your E-mail address.For doing it, please push a button under the text.",
"confirm_email_image": "Confirm Email",

View File

@ -1,19 +1,4 @@
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',