[Ivan Diaz] - Add animation to login widget

package.json

@@ -50,6 +50,7 @@
     "morgan": "^1.6.1",
     "react": "^0.13.x",
     "react-document-title": "^1.0.2",
+    "react-motion": "^0.3.0",
     "react-router": "^0.13.x",
     "reflux": "^0.2.9",
     "run-sequence": "^1.1.1",

src/app/main/main-home/main-home-page-login-widget.js

@@ -1,5 +1,6 @@
 import React              from 'react/addons';
 import {ListenerMixin}    from 'reflux';
+import {Motion, spring}   from 'react-motion';
 
 import UserActions        from 'actions/user-actions';
 import UserStore          from 'stores/user-store';
@@ -9,20 +10,23 @@ import Widget             from 'core-components/widget';
 import Input              from 'core-components/input';
 import Button             from 'core-components/button';
 
-
 var MainHomePageLoginWidget = React.createClass({
     render() {
         return (
-            <Widget className="main-home-page--widget" title="Login">
-                <Form className="login-widget--form" onSubmit={this.handleSubmit}>
-                    <div className="login-widget--inputs">
-                        <Input placeholder="email" name="email" className="login-widget--input"/>
-                        <Input placeholder="password" name="password" type="password" className="login-widget--input"/>
-                    </div>
-                    <Button type="primary">LOG IN</Button>
-                </Form>
-                <Button className="login-widget--forgot-password"type="link">{'Forgot your password?'}</Button>
-            </Widget>
+            <Motion defaultStyle={{animation: -90}} style={{animation: spring(0, [200,10])}}>
+                {({animation}) => (
+                    <Widget className="main-home-page--widget" title="Login" style={{transform: `rotateY(${animation}deg)`}}>
+                        <Form className="login-widget--form" onSubmit={this.handleSubmit}>
+                            <div className="login-widget--inputs">
+                                <Input placeholder="email" name="email" className="login-widget--input"/>
+                                <Input placeholder="password" name="password" type="password" className="login-widget--input"/>
+                            </div>
+                            <Button type="primary">LOG IN</Button>
+                        </Form>
+                        <Button className="login-widget--forgot-password" type="link">{'Forgot your password?'}</Button>
+                    </Widget>
+                )}
+            </Motion>
         );
     },
 

src/core-components/widget.js

@@ -15,7 +15,7 @@ var Widget = React.createClass({
 
     render() {
         return (
-            <div className={this.getClass()}>
+            <div {...this.props} className={this.getClass()}>
                 {this.renderTitle()}
                 {this.props.children}
             </div>

src/utils/i18n.js

@@ -1,4 +1,4 @@
-import MessageFormat                 from 'messageformat';
+import MessageFormat      from 'messageformat';
 
 import CommonStore        from 'stores/common-store';
 import i18nData           from 'data/i18n-data';