diff --git a/package.json b/package.json index bf7bd9d..4d2ad44 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "babel-preset-react-hmre": "^1.0.1", "babel-preset-stage-0": "^6.3.13", "babel-runtime": "^6.0.0", + "circular-dependency-plugin": "^2.0.0", "eslint": "^3.1.1", "eslint-plugin-react": "^6.0.0", "extract-text-webpack-plugin": "^1.0.0", diff --git a/src/components/blocks/code/Code.jsx b/src/components/blocks/code/Code.jsx new file mode 100644 index 0000000..ef614de --- /dev/null +++ b/src/components/blocks/code/Code.jsx @@ -0,0 +1,38 @@ +import { PropTypes } from 'react'; + +import { FormattedMessage as Message } from 'react-intl'; + +import { colors, green } from 'components/ui/colors'; +import { Button, Input } from 'components/ui'; + +import styles from './styles'; + +import messages from './messages.intl.json'; + +export default function Code({code, link, label, color = green}) { + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ); +} + +Code.propTypes = { + code: PropTypes.string.isRequired, + link: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, + color: PropTypes.oneOf(Object.values(colors)) +}; diff --git a/src/components/blocks/code/messages.intl.json b/src/components/blocks/code/messages.intl.json new file mode 100644 index 0000000..30adb83 --- /dev/null +++ b/src/components/blocks/code/messages.intl.json @@ -0,0 +1,4 @@ +{ + "or": "or", + "pass_code_in_field": "Use this code in an entry field of our site:" +} diff --git a/src/components/blocks/code/styles.js b/src/components/blocks/code/styles.js new file mode 100644 index 0000000..2191500 --- /dev/null +++ b/src/components/blocks/code/styles.js @@ -0,0 +1,20 @@ +export default { + codeWrapper: { + paddingTop: '20px', + textAlign: 'center' + }, + confirmEmailButton: { + paddingLeft: '50px', + paddingRight: '50px' + }, + or: { + fontSize: '12px', + paddingTop: '5px' + }, + codeLabel: { + paddingTop: '1px' + }, + code: { + paddingTop: '5px' + } +}; diff --git a/src/components/blocks/index.js b/src/components/blocks/index.js new file mode 100644 index 0000000..261c22b --- /dev/null +++ b/src/components/blocks/index.js @@ -0,0 +1,5 @@ +import Code from './code/Code'; + +export { + Code +}; diff --git a/src/components/button/Button.jsx b/src/components/button/Button.jsx deleted file mode 100644 index 4f22df5..0000000 --- a/src/components/button/Button.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import styles from './styles'; - -export default function Button(props) { - return ( -
- {props.children} -
- ); -} diff --git a/src/components/button/styles.js b/src/components/button/styles.js deleted file mode 100644 index cfdf01e..0000000 --- a/src/components/button/styles.js +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 8e2494d..0000000 --- a/src/components/input/Input.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import styles from './styles'; - -export default function Input(props) { - return ( -
- {props.children} -
- ); -} diff --git a/src/components/input/styles.js b/src/components/input/styles.js deleted file mode 100644 index 9a98eac..0000000 --- a/src/components/input/styles.js +++ /dev/null @@ -1,11 +0,0 @@ -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/layout/content/Content.jsx b/src/components/layout/content/Content.jsx new file mode 100644 index 0000000..eeef8a9 --- /dev/null +++ b/src/components/layout/content/Content.jsx @@ -0,0 +1,9 @@ +import styles from './styles'; + +export default function Content(props) { + return ( +
+ {props.children} +
+ ); +} diff --git a/src/components/layout/content/styles.js b/src/components/layout/content/styles.js new file mode 100644 index 0000000..6b83ec6 --- /dev/null +++ b/src/components/layout/content/styles.js @@ -0,0 +1,6 @@ +export default { + content: { + background: '#fff', + padding: '50px' + } +}; diff --git a/src/components/layout/footer/Footer.jsx b/src/components/layout/footer/Footer.jsx index 4da6279..1908336 100644 --- a/src/components/layout/footer/Footer.jsx +++ b/src/components/layout/footer/Footer.jsx @@ -21,9 +21,7 @@ export default function Footer() { - + diff --git a/src/components/layout/footer/styles.js b/src/components/layout/footer/styles.js index 1149428..606ab50 100644 --- a/src/components/layout/footer/styles.js +++ b/src/components/layout/footer/styles.js @@ -1,5 +1,8 @@ +import {green} from 'components/ui/colors'; + export default { footer: { + borderTop: `10px solid ${green.color}`, background: '#DDD8CE', height: '135px' }, diff --git a/src/components/layout/index.js b/src/components/layout/index.js index a74c02e..0a6a8a9 100644 --- a/src/components/layout/index.js +++ b/src/components/layout/index.js @@ -1,9 +1,11 @@ import Userbar from './userbar/Userbar'; import Header from './header/Header'; +import Content from './content/Content'; import Footer from './footer/Footer'; export { Userbar, Header, + Content, Footer }; diff --git a/src/components/layout/userbar/styles.js b/src/components/layout/userbar/styles.js index 48e3b40..f9c1dcf 100644 --- a/src/components/layout/userbar/styles.js +++ b/src/components/layout/userbar/styles.js @@ -1,6 +1,8 @@ +import {green} from 'components/ui/colors'; + export default { userbar: { - background: '#207E5C', + background: green.color, height: '50px' }, marginColumn: { @@ -11,7 +13,7 @@ export default { verticalAlign: 'middle' }, logo: { - background: '#1A6449', + background: green.dark, padding: '0 13px', display: 'block', lineHeight: '50px' diff --git a/src/components/text/BitmapText.jsx b/src/components/text/BitmapText.jsx index 04bbb21..661a1ae 100644 --- a/src/components/text/BitmapText.jsx +++ b/src/components/text/BitmapText.jsx @@ -61,7 +61,9 @@ BitmapText.propTypes = { BitmapText.defaultProps = { retina: true, - style: {} + style: { + verticalAlign: 'middle' + } }; import { injectIntl, intlShape } from 'react-intl'; diff --git a/src/components/ui/button/Button.jsx b/src/components/ui/button/Button.jsx new file mode 100644 index 0000000..1c294fe --- /dev/null +++ b/src/components/ui/button/Button.jsx @@ -0,0 +1,33 @@ +import { Component, PropTypes } from 'react'; + +import styles from './styles'; + +import { colors, green } from 'components/ui/colors'; + +export default class Button extends Component { + + static propTypes = { + label: PropTypes.node.isRequired, + color: PropTypes.oneOf(Object.values(colors)) + }; + + static defaultProps = { + color: green + }; + + render() { + const {props} = this; + const {color, label} = props; + + return ( +
+ {label} +
+ ); + } + +} diff --git a/src/components/button/index.js b/src/components/ui/button/index.js similarity index 100% rename from src/components/button/index.js rename to src/components/ui/button/index.js diff --git a/src/components/ui/button/styles.js b/src/components/ui/button/styles.js new file mode 100644 index 0000000..1bd5c87 --- /dev/null +++ b/src/components/ui/button/styles.js @@ -0,0 +1,25 @@ +import { colors } from 'components/ui/colors'; + +/** + * @param {Color} color + * @return {{backgroundColor: *}} + */ +function generateColor(color) { + return { + backgroundColor: color.color + }; +} + +const styles = { + button: { + padding: '0 13px', + lineHeight: '50px', + display: 'inline-block' + } +}; + +Object.values(colors).forEach((color) => { + styles[color] = generateColor(color); +}); + +export default styles; diff --git a/src/components/ui/colors.js b/src/components/ui/colors.js new file mode 100644 index 0000000..b330803 --- /dev/null +++ b/src/components/ui/colors.js @@ -0,0 +1,48 @@ +export class Color { + + constructor(name, base, light, dark) { + this._name = name; + this._base = base; + this._light = light; + this._dark = dark; + } + + get name() { + return this._name; + } + + get color() { + return this._base; + } + + get light() { + return this._light; + } + + get dark() { + return this._dark; + } + + toString() { + return this.name; + } + +} + +export const green = new Color('green', '#207e5c', '#379070', '#1a6449'); +export const blue = new Color('blue', '#5b9aa9', '#71a6b2', '#568297'); +export const darkBlue = new Color('darkBlue', '#28555b', '#3e6164', '#233d49'); +export const violet = new Color('violet', '#6b5b8c', '#816795', '#66437a'); +export const lightViolet = new Color('lightViolet', '#8b5d79', '#a16982', '#864567'); +export const orange = new Color('orange', '#dd8650', '#f39259', '#d86e3e'); +export const red = new Color('red', '#e66c69', '#e15457', '#fc7872'); + +export const colors = { + green, + blue, + darkBlue, + violet, + lightViolet, + orange, + red +}; diff --git a/src/components/ui/index.js b/src/components/ui/index.js new file mode 100644 index 0000000..79056bf --- /dev/null +++ b/src/components/ui/index.js @@ -0,0 +1,7 @@ +import Button from './button/Button'; +import Input from './input/Input'; + +export { + Button, + Input +}; diff --git a/src/components/ui/input/Input.jsx b/src/components/ui/input/Input.jsx new file mode 100644 index 0000000..21d5134 --- /dev/null +++ b/src/components/ui/input/Input.jsx @@ -0,0 +1,33 @@ +import { Component, PropTypes } from 'react'; + +import { colors, green } from 'components/ui/colors'; + +import styles from './styles'; + +export default class Input extends Component { + + static propTypes = { + value: PropTypes.string.isRequired, + color: PropTypes.oneOf(Object.values(colors)) + }; + + static defaultProps = { + color: green + }; + + render() { + const {props} = this; + const {value, color, style} = props; + + return ( +
+ {value} +
+ ); + } + +} diff --git a/src/components/input/index.js b/src/components/ui/input/index.js similarity index 100% rename from src/components/input/index.js rename to src/components/ui/input/index.js diff --git a/src/components/ui/input/styles.js b/src/components/ui/input/styles.js new file mode 100644 index 0000000..f5a24bd --- /dev/null +++ b/src/components/ui/input/styles.js @@ -0,0 +1,30 @@ +import { colors } from 'components/ui/colors'; + +/** + * @param {Color} color + * @return {{backgroundColor: *}} + */ +function generateColor(color) { + return { + borderColor: color.color, + color: color.dark + }; +} + +const styles = { + input: { + backgroundColor: '#fff', + padding: '0 30px', + lineHeight: '50px', + fontSize: '18px', + display: 'inline-block', + border: '3px solid transparent', + color: '#444' + } +}; + +Object.values(colors).forEach((color) => { + styles[color] = generateColor(color); +}); + +export default styles; diff --git a/src/emails/register/Register.jsx b/src/emails/register/Register.jsx index 9b8e21d..1f10b1c 100644 --- a/src/emails/register/Register.jsx +++ b/src/emails/register/Register.jsx @@ -2,11 +2,11 @@ import { PropTypes } from 'react'; import { FormattedMessage as Message } from 'react-intl'; -import { Userbar, Header, Footer } from 'components/layout'; +import { Userbar, Header, Content, Footer } from 'components/layout'; import { Table } from 'components/table'; -import { Button } from 'components/button'; -import { Input } from 'components/input'; +import { blue } from 'components/ui/colors'; import { BitmapText } from 'components/text'; +import { Code } from 'components/blocks'; import styles from './styles'; import messages from './messages.intl.json'; @@ -21,12 +21,10 @@ export default function Register({username, link, code}) {
+ } /> -
+ - - - - - - - - - - @@ -78,9 +45,7 @@ export default function Register({username, link, code}) { ...styles.contentCenterCell, ...styles.whatsNextText }}> - + @@ -94,9 +59,7 @@ export default function Register({username, link, code}) { }} />
@@ -36,41 +34,10 @@ export default function Register({username, link, code}) {
- - - -
- -
- -
- {code} + + + } />
- +
- +
- +
-
+