From 7186bae1a016f3aa08b7a848aeff971f698a171a Mon Sep 17 00:00:00 2001
From: Marin Gerov <marin.gerov@gmail.com>
Date: Tue, 14 Jul 2015 17:00:27 +0200
Subject: [PATCH 1/2] Added Radium and implemented inline styles for the form
 in the Explore component

---
 lib/components/github/Explore.js | 42 ++++++++++++++++++++++++++++++--
 package.json                     |  5 ++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/lib/components/github/Explore.js b/lib/components/github/Explore.js
index 5c7cffd..fb27621 100644
--- a/lib/components/github/Explore.js
+++ b/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,7 @@ function parseFullName (params) {
   return username + (repo ? '/' + repo : '')
 }
 
+@Radium
 export default class Explore extends React.Component {
 
   static propTypes = {
@@ -55,11 +57,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>
@@ -91,3 +94,38 @@ export default class Explore extends React.Component {
     return findDOMNode(this.refs.usernameOrRepo).value
   }
 }
+
+var 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
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 1de058c..633f14b 100644
--- a/package.json
+++ b/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"
   }
-}
\ No newline at end of file
+}

From d441d21dd7a7107cbb5715c0ab1ae86017a7c9d7 Mon Sep 17 00:00:00 2001
From: Marin Gerov <marin.gerov@gmail.com>
Date: Tue, 14 Jul 2015 18:39:09 +0200
Subject: [PATCH 2/2] Move styles into a const and put above class block

---
 lib/components/github/Explore.js | 70 ++++++++++++++++----------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/lib/components/github/Explore.js b/lib/components/github/Explore.js
index fb27621..ab0b0ee 100644
--- a/lib/components/github/Explore.js
+++ b/lib/components/github/Explore.js
@@ -11,6 +11,41 @@ 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 {
 
@@ -94,38 +129,3 @@ export default class Explore extends React.Component {
     return findDOMNode(this.refs.usernameOrRepo).value
   }
 }
-
-var 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
-      }
-    }
-  }
-}