Add animations, adjust style

Author: lorensr

.eslintrc

@@ -11,6 +11,7 @@
     "arrow-body-style": 0,
     "react/jsx-filename-extension": 0,
     "react/react-in-jsx-scope": 0,
-    "react/jsx-closing-bracket-location": [1, "props-aligned"]
+    "react/jsx-closing-bracket-location": [1, "props-aligned"],
+    "react/no-find-dom-node": 0
   }
 }

components/delay.js

@@ -0,0 +1,33 @@
+import { Component, PropTypes } from 'react'
+
+class Delay extends Component {
+  static propTypes = {
+    children: PropTypes.func.isRequired,
+    ms: PropTypes.number.isRequired, // eslint-disable-line
+    initial: PropTypes.bool.isRequired,
+  }
+
+  state = {
+    value: this.props.initial,
+  }
+
+  componentDidMount() {
+    this.refresh(this.props)
+  }
+
+  componentWillReceiveProps(props) {
+    this.refresh(props)
+  }
+
+  refresh({ value, ms }) {
+    setTimeout(() => this.setState({
+      value,
+    }), ms)
+  }
+
+  render() {
+    return this.props.children(this.state.value)
+  }
+}
+
+export default Delay

components/email.js

@@ -131,6 +131,16 @@ export default class Email extends Component {
     }
   }
 
+  componentDidMount() {
+    console.log(this.props, this.textHanlder)
+    if (this.props.autoFocus) {
+      // textHandler is undefined at time of mounting 
+      setTimeout(() => {
+        this.textHandler.focus()
+      }, 1000)
+    }
+  }
+
   // https://github.com/callemall/material-ui/issues/705
   render() {
     return (

css/raw.js

@@ -1,9 +1,14 @@
-import { fontFamily, color } from '../lib/styles'
+import { grey200 } from 'material-ui/styles/colors'
+
+import { fontFamily, color, white, black, grey } from '../lib/styles'
+
+const background = '#f2f2f2'
 
 export default `
 body {
   font-family: ${fontFamily};
-  color: #333;
+  color: ${black};
+  background-color: ${background};
   font-size: 18px;
   line-height: 1.7;
 }
@@ -30,14 +35,16 @@ a:hover {
   position: absolute;
   border: 1px solid #f3f3f3;
   pointer-events: none;
+  z-index: 1;
+  will-change: opacity, transform;
 }
 
 #logo > svg {
   width: 200px;
   height: 200px;
 }
 #logo > svg * {
-  fill: #f2f2f2;
+  fill: ${white};
 }
 
 .logo-collection > svg {
@@ -54,4 +61,18 @@ a:hover {
 .st2 {
   fill:#FFFFFF;
 }
+
+svg.twitter {
+  width: 30px;
+  height: 30px;
+  margin-left: 6px;
+}
+svg.twitter * {
+  fill: ${grey};
+}
+
+a.-grey:hover {
+  text-decoration: none;
+  color: ${grey200};
+}
 `

lib/muitheme.js

@@ -2,14 +2,16 @@ import React from 'react'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 
-import { fontFamily, color } from './styles'
+import { fontFamily, color, white } from './styles'
 
 // overwrite anything in:
 // https://github.com/callemall/material-ui/blob/master/src/styles/baseThemes/lightBaseTheme.js
 const muiTheme = getMuiTheme({
   fontFamily,
   palette: {
     primary1Color: color,
+    alternateTextColor: white,
+    canvasColor: white,
   },
 })
 

lib/styles.js

@@ -1,6 +1,8 @@
-// import { cyan500 } from 'material-ui/styles/colors'
+import { darkBlack, grey400 } from 'material-ui/styles/colors'
 
 export const fontFamily = 'Roboto, sans-serif'
 // export const fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif'
-export const white = '#f2f2f2'
+export const white = '#f9f9f9'
 export const color = '#E10098'
+export const black = darkBlack
+export const grey = grey400

package.json

@@ -26,10 +26,12 @@
     "graphql": "^0.8.2",
     "graphql-server-express": "^0.4.4",
     "graphql-tools": "^0.9.0",
+    "gsap": "^1.19.1",
     "lodash": "^4.17.4",
     "material-ui": "^0.16.6",
     "next": "^2.0.0-beta",
     "react": "^15.4.2",
+    "react-dom": "^15.4.2",
     "react-email-autocomplete": "^1.0.2",
     "react-motion": "^0.4.7",
     "react-style-proptype": "^1.4.0",