Add options page

2 files changed, 117 insertions, 2 deletions

diff --git a/src/containers/options/index.js b/src/containers/options/index.js
index 16ddd2a..4d999b1 100644
--- a/src/containers/options/index.js
+++ b/src/containers/options/index.js
@@ -1,11 +1,44 @@
 import React from 'react';
+
+import './styles.css';
 import Logo from '../../components/icons/logo';
+import { Link } from 'react-router-dom';
 
 class OptionsContainer extends React.Component {
   render() {
     return (
-      <div className="container">
-        <Logo/>
+      <div className="options-container">
+
+        <div className="header">
+          <Link className="logo clearfix" to='/'>
+            <Logo/>
+            <div className="logo-text">
+              <h3>GitHunt</h3>
+              <p className="text-muted">Configure githunt through the options below</p>
+            </div>
+          </Link>
+        </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/>
+            <p className="text-muted">Follow the steps listed below to generate the token</p>
+            <ul>
+              <li>
+                Go to the <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer">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>
+        </div>
       </div>
     );
   }
diff --git a/src/containers/options/styles.css b/src/containers/options/styles.css
new file mode 100644
index 0000000..34df04e
--- /dev/null
+++ b/src/containers/options/styles.css
@@ -0,0 +1,82 @@
+.options-container {
+  margin: 100px auto;
+  max-width: 700px;
+}
+
+.options-container .container {
+  background: white;
+  padding: 25px 30px;
+  border-radius: 20px;
+}
+
+.options-container .header svg {
+  margin-right: 15px;
+  float: left;
+  height: 85px;
+  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: 0 auto 25px;
+  width: 440px;
+}
+
+.options-container ul {
+  padding: 0;
+  margin: 15px 0;
+}
+
+.options-container ul li {
+  line-height: 25px;
+  padding: 10px;
+  list-style: none;
+  background: #f7f3f3;
+  margin-bottom: 4px;
+  border-radius: 5px;
+}
+
+.options-container ul li span,
+.options-container ul li a {
+  font-weight: 500;
+  color: #1157ed;
+}
+
+.options-container .header .logo {
+  color: #2d2d2d;
+}
+
+.options-container .header .logo-text {
+  margin-top: 11px;
+  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 .btn-save {
+  font-size: 15px;
+  padding: 15px 25px;
+  height: 60px;
+  display: block;
+  width: 100%;
+}