diff --git a/src/app/main/main-home/main-home-page-login-widget.js b/src/app/main/main-home/main-home-page-login-widget.js index 394afddd..719f4149 100644 --- a/src/app/main/main-home/main-home-page-login-widget.js +++ b/src/app/main/main-home/main-home-page-login-widget.js @@ -13,13 +13,15 @@ import Button from 'core-components/button'; var MainHomePageLoginWidget = React.createClass({ render() { return ( - -

Login

-
- - + + +
+ + +
+
); }, diff --git a/src/app/main/main-home/main-home-page-login-widget.scss b/src/app/main/main-home/main-home-page-login-widget.scss index 255fa4b1..0d9ad1bb 100644 --- a/src/app/main/main-home/main-home-page-login-widget.scss +++ b/src/app/main/main-home/main-home-page-login-widget.scss @@ -1,5 +1,11 @@ .login-widget { + &--inputs { + } + &--input { margin: 10px 0; } + + &--form { + } } \ No newline at end of file diff --git a/src/app/main/main-layout-header.js b/src/app/main/main-layout-header.js index 6ed920df..39cef6ac 100644 --- a/src/app/main/main-layout-header.js +++ b/src/app/main/main-layout-header.js @@ -7,8 +7,8 @@ var MainLayoutHeader = React.createClass({ return (
- - + +
); diff --git a/src/core-components/__tests__/button-test.js b/src/core-components/__tests__/button-test.js index 089ac4e8..0fb709d9 100644 --- a/src/core-components/__tests__/button-test.js +++ b/src/core-components/__tests__/button-test.js @@ -21,7 +21,9 @@ describe('Button', () => { it('should add passed types to class', () => { var types = [ - 'primary' + 'primary', + 'clean', + 'link' ]; types.forEach((type) => { diff --git a/src/core-components/button.js b/src/core-components/button.js index 7fde8ef2..b59dc21b 100644 --- a/src/core-components/button.js +++ b/src/core-components/button.js @@ -12,7 +12,8 @@ var Button = React.createClass({ children: React.PropTypes.node, type: React.PropTypes.oneOf([ 'primary', - 'light' + 'clean', + 'link' ]), route: React.PropTypes.shape({ to: React.PropTypes. string.isRequired, diff --git a/src/core-components/button.scss b/src/core-components/button.scss index 972ee375..ab744f8d 100644 --- a/src/core-components/button.scss +++ b/src/core-components/button.scss @@ -12,8 +12,19 @@ width: 239px; } - &-light { + &-clean { background: none; border: none; } + + &-link { + background: none; + border: none; + color: $dark-grey; + text-decoration: underline; + + &:focus { + outline: none; + } + } } \ No newline at end of file diff --git a/src/core-components/input.js b/src/core-components/input.js index caaf2a7f..ce44c425 100644 --- a/src/core-components/input.js +++ b/src/core-components/input.js @@ -7,7 +7,14 @@ var Input = React.createClass({ propTypes: { value: React.PropTypes.string, validation: React.PropTypes.func, - onChange: React.PropTypes.func + onChange: React.PropTypes.func, + type: React.PropTypes.string + }, + + getDefaultProps() { + return { + type: 'text' + }; }, render() { @@ -20,7 +27,6 @@ var Input = React.createClass({ var props = _.clone(this.props); props.className = this.getClass(); - props.type = 'text'; return props; }, diff --git a/src/core-components/input.scss b/src/core-components/input.scss index 4fa92705..1abcf8fb 100644 --- a/src/core-components/input.scss +++ b/src/core-components/input.scss @@ -6,7 +6,7 @@ padding: 8px; &:hover { - border-color: $dark-grey; + border-color: $medium-grey; } &:focus { diff --git a/src/core-components/widget.js b/src/core-components/widget.js index 2585eebe..ff75e456 100644 --- a/src/core-components/widget.js +++ b/src/core-components/widget.js @@ -3,17 +3,35 @@ import classNames from 'classnames'; var Widget = React.createClass({ propTypes: { + title: React.PropTypes.string, children: React.PropTypes.node.isRequired }, + getDefaultProps() { + return { + title: '' + }; + }, + render() { return (
+ {this.renderTitle()} {this.props.children}
); }, + renderTitle() { + var titleNode = null; + + if (this.props.title) { + titleNode =

{this.props.title}

; + } + + return titleNode; + }, + getClass() { var classes = { 'widget': true diff --git a/src/core-components/widget.scss b/src/core-components/widget.scss index 7ec67f4d..6877ca63 100644 --- a/src/core-components/widget.scss +++ b/src/core-components/widget.scss @@ -1,7 +1,16 @@ +@import "../scss/vars"; + .widget { background-color: white; border-radius: 4px; text-align: center; - padding: 27px; + padding: 20px; width: 324px; + + &--title { + text-transform: uppercase; + color: $primary-black; + font-size: 17px; + margin-bottom: 20px; + } } \ No newline at end of file diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index f217a87a..0217abb3 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -6,7 +6,10 @@ $primary-blue: #414A59; $light-grey: #EEEEEE; $grey: #E7E7E7; -$dark-grey: #D9D9D9; +$medium-grey: #D9D9D9; +$dark-grey: #8D8D8D; + +$primary-black: #4D4D4D; // SPACING $full-space: 40px;