Componentize options form

4 files changed, 86 insertions, 74 deletions

diff --git a/src/components/options-form/index.js b/src/components/options-form/index.js
new file mode 100644
index 0000000..393ab93
--- /dev/null
+++ b/src/components/options-form/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './styles.css';
+
+const OptionsForm = () => (
+  <div className="options-form">
+    <div className="form-field">
+      <h2>Add the Token</h2>
+      <p className="text-muted">Generate a token and add it below to avoid hitting the rate limit.</p>
+      <hr/>
+      <ul>
+        <li>
+          Go to the <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer"><i className="fa fa-external-link mr-1"></i> Settings <i className="fa fa-angle-right"></i> Personal Access Tokens</a> of your github profile
+        </li>
+        <li>Click <span>Generate New Token</span>. Enter the description and select the <span>scope</span> called <span>public_repo</span> under repo and click <span>Generate Token</span>.</li>
+        <li>You will be presented with the generated token. Copy the token and add it below</li>
+      </ul>
+      <input type="text" className="form-control"/>
+    </div>
+    <button className="btn btn-dark btn-lg btn-save shadow">
+      <i className="fa fa-cog mr-2"></i>
+      Save Settings
+    </button>
+    <Link className='btn btn-primary shadow btn-block btn-lg' to='/'><i className="fa fa-arrow-left"></i> Go Home</Link>
+  </div>
+);
+
+export default OptionsForm;
diff --git a/src/components/options-form/styles.css b/src/components/options-form/styles.css
new file mode 100644
index 0000000..f1b0e52
--- /dev/null
+++ b/src/components/options-form/styles.css
@@ -0,0 +1,48 @@
+.options-form ul {
+  padding: 0;
+  margin: 15px 0 15px 25px;
+}
+
+.options-form ul li {
+  line-height: 30px;
+}
+
+.options-form ul li span,
+.options-form ul li a {
+  background: #ffa;
+  padding: 5px 7px;
+  color: #343a40;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.options-form ul li a {
+  color: blue;
+  text-decoration: underline;
+}
+
+.options-form .form-field p {
+  margin-bottom: 15px;
+}
+
+.options-form .form-field input[type="text"] {
+  display: block;
+  box-shadow: none;
+  height: 60px;
+  -webkit-box-shadow: none;
+  border: 2px solid #ececec;
+  margin-bottom: 15px;
+}
+
+.options-form .btn-save {
+  margin-bottom: 10px;
+}
+
+.options-form .btn {
+  font-size: 15px;
+  padding: 15px 25px;
+  height: 60px;
+  display: block;
+  width: 100%;
+}
diff --git a/src/containers/options/index.js b/src/containers/options/index.js
index 774aa31..d986f6e 100644
--- a/src/containers/options/index.js
+++ b/src/containers/options/index.js
@@ -3,6 +3,7 @@ import React from 'react';
 import './styles.css';
 import Logo from '../../components/icons/logo';
 import { Link } from 'react-router-dom';
+import OptionsForm from '../../components/options-form';
 
 class OptionsContainer extends React.Component {
   render() {
@@ -20,24 +21,7 @@ class OptionsContainer extends React.Component {
         </div>
 
         <div className="container shadow">
-          <div className="form-field">
-            <h2>Add the Token</h2>
-            <p className="text-muted">Generate a token and add it below to avoid hitting the rate limit.</p>
-            <hr/>
-            <ul>
-              <li>
-                Go to the <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer"><i className="fa fa-external-link mr-1"></i> Settings <i className="fa fa-angle-right"></i> Personal Access Tokens</a> of your github profile
-              </li>
-              <li>Click <span>Generate New Token</span>. Enter the description and select the <span>scope</span> called <span>public_repo</span> under repo and click <span>Generate Token</span>.</li>
-              <li>You will be presented with the generated token. Copy the token and add it below</li>
-            </ul>
-            <input type="text" className="form-control"/>
-          </div>
-          <button className="btn btn-dark btn-lg btn-save shadow">
-            <i className="fa fa-cog mr-2"></i>
-            Save Settings
-          </button>
-          <Link className='btn btn-primary shadow btn-block btn-lg' to='/'><i className="fa fa-arrow-left"></i> Go Home</Link>
+          <OptionsForm/>
         </div>
       </div>
     );
diff --git a/src/containers/options/styles.css b/src/containers/options/styles.css
index 0cccdbd..c1b09e5 100644
--- a/src/containers/options/styles.css
+++ b/src/containers/options/styles.css
@@ -16,44 +16,6 @@
   width: 85px;
 }
 
-.options-container .header {
-  margin-bottom: 10px;
-}
-
-.options-container .header h3 {
-  font-weight: 700;
-  margin-bottom: 0;
-}
-
-.options-container .header .logo {
-  display: block;
-  margin-bottom: 10px;
-}
-
-.options-container ul {
-  padding: 0;
-  margin: 15px 0 15px 25px;
-}
-
-.options-container ul li {
-  line-height: 30px;
-}
-
-.options-container ul li span,
-.options-container ul li a {
-  background: #ffa;
-  padding: 5px 7px;
-  color: #343a40;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.options-container ul li a {
-  color: blue;
-  text-decoration: underline;
-}
-
 .options-container .header .logo {
   color: #2d2d2d;
 }
@@ -63,27 +25,16 @@
   float: left;
 }
 
-.options-container .form-field p {
-  margin-bottom: 15px;
-}
-
-.options-container .form-field input[type="text"] {
-  display: block;
-  box-shadow: none;
-  height: 60px;
-  -webkit-box-shadow: none;
-  border: 2px solid #ececec;
-  margin-bottom: 15px;
+.options-container .header {
+  margin-bottom: 10px;
 }
 
-.options-container .btn-save {
-  margin-bottom: 10px;
+.options-container .header h3 {
+  font-weight: 700;
+  margin-bottom: 0;
 }
 
-.options-container .btn {
-  font-size: 15px;
-  padding: 15px 25px;
-  height: 60px;
+.options-container .header .logo {
   display: block;
-  width: 100%;
+  margin-bottom: 10px;
 }