Inline styles

lib/components/github/Explore.js

@@ -1,5 +1,6 @@
 import React, { findDOMNode, PropTypes } from 'react'
 import shallowEqualScalar from 'redux/lib/utils/shallowEqualScalar'
+import Radium from 'radium'
 
 const DEFAULT_USER = 'emmenko'
 
@@ -10,6 +11,42 @@ function parseFullName (params) {
   return username + (repo ? '/' + repo : '')
 }
 
+const styles = {
+  button: {
+    background: '#fff',
+    color: '#3498db',
+    padding: '5px 15px',
+    marginLeft: 10,
+    border: '2px solid #3498db',
+    borderRadius: 5,
+    transition: '.2s all',
+    ':hover': {
+      background: '#3498db',
+      color: 'white',
+      transition: '.2s all'
+    }
+  },
+  input: {
+    width: 100,
+    borderRadius: 5,
+    border: '2px solid #e5e5e5',
+    transition: '.2s all',
+    boxShadow: 'none',
+    ':focus': {
+      width: 300,
+      borderColor: '#3498db',
+      transition: '.2s all'
+    },
+    '@media (max-width: 480px)': {
+      display: 'inline',
+      ':focus': {
+        width: 200
+      }
+    }
+  }
+}
+
+@Radium
 export default class Explore extends React.Component {
 
   static propTypes = {
@@ -55,11 +92,12 @@ export default class Explore extends React.Component {
             <input
               size="45"
               ref="usernameOrRepo"
+              style={styles.input}
               onKeyUp={this.handleKeyUp}
               onChange={this.handleOnChange}
               value={this.state.usernameOrRepo}
-              placeholder="username/repo" />
-            <button type="submit" className="pure-button pure-button-primary"
+              placeholder="Search..." />
+            <button type="submit" style={styles.button}
               onClick={this.handleGoClick}>
               Go!
             </button>

package.json

@@ -25,10 +25,11 @@
     "babel-runtime": "5.6.15",
     "classnames": "2.1.2",
     "parse-link-header": "0.2.0",
-    "redux": "0.12.0",
+    "radium": "^0.13.3",
     "react": "0.13.3",
     "react-pure-render": "1.0.2",
     "react-router": "1.0.0-beta2",
+    "redux": "0.12.0",
     "whatwg-fetch": "0.9.0"
   },
   "devDependencies": {
@@ -49,4 +50,4 @@
     "webpack": "1.10.0",
     "webpack-dev-server": "1.10.1"
   }
-}
+}