callback

Author: lucassabreu

src/Home.css

@@ -35,20 +35,25 @@
     height: 2em;
 }
 
-.Home .description {
-    font: 300 140% aller, Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
-    clear: both;
-    margin-top: 1rem;
+.Home section {
     text-align: center;
-    padding: 1rem;
 }
 
-.Home section {
+.Home section:not(:last-child) {
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    padding: 1rem 0;
+}
+
+.Home section.description {
+    font: 300 140% aller, Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
+    clear: both;
+    margin-top: 1rem;
     text-align: center;
+    padding: 4rem;
 }
 
-.Home section h2 {
+.Home section h2,
+.Home section h4 {
     text-align: center;
     margin: 2rem 0;
     padding: 0;
@@ -61,14 +66,23 @@
     padding: 0;
 }
 
-.Home .project-handlers-buttons button {
+.Home .project-handlers-buttons button,
+.Home .project-handlers-buttons a {
+    display: inline-block;
     padding: 0 3rem;
     height: 7rem;
     width: 100%;
     margin-bottom: 1rem;
 }
 
-.Home .project-handlers-buttons button .material-icons {
+.Home .project-handlers-buttons a{
+    background-color: green;
+    color: white;
+
+}
+
+.Home .project-handlers-buttons button .material-icons,
+.Home .project-handlers-buttons a .material-icons {
     position: relative;
     top: -2px;
     width: 3rem;

src/Home.js

@@ -2,13 +2,18 @@ import React from 'react';
 import Footer from './Footer';
 import Button from 'rmwc/Button';
 import Icon from 'rmwc/Icon';
+import { withRouter } from 'react-router-dom';
 
 import logo from './assets/images/hand-yellow.svg'
 import github from './assets/images/github.svg'
 import gitlab from './assets/images/gitlab.svg'
 import trello from './assets/images/trello.svg'
 import './Home.css'
 
+const base = window.location.href + 'callback'
+const EXTERNAL_ROUTES = {
+  GITHUB: 'https://github.com/login/oauth/authorize?client_id=0e8a63320fba47de145c&scope=repos&redirect_uri=' + base + '/github',
+};
 
 const Home = () => (
   <div className="Home">
@@ -17,49 +22,43 @@ const Home = () => (
       <h1 className="text">CODEROCKR WAY PROJECT SETUP</h1>
     </header>
     <div className="container">
-        <section className="description">
-          <p>
-            This web client helps to setup a project at GitHub, GitLab or Trello to use the
-            Coderockr Way's labels, making easier to bootstrap the basic configuration at
-            your project.
+      <section className="description">
+        <p>
+          This web client helps to setup a project at GitHub, GitLab or Trello to use the
+          Coderockr Way's labels, making easier to bootstrap the basic configuration at
+          your project.
+          </p>
+      </section>
+      <section className="project-handlers">
+        <h2>Where is your project?</h2>
+        <ul className="row project-handlers-buttons justify-content-md-center">
+          <li className="col-md-4">
+            <a class="button" href={EXTERNAL_ROUTES.GITHUB}>
+              <Icon children={github} />
+              GitHub
+            </a>
+          </li>
+          <li className="col-md-4">
+            <Button disabled raised>
+              <Icon children={gitlab} />
+              GitLab
+            </Button>
+          </li>
+          <li className="col-md-4">
+            <Button disabled raised>
+              <Icon children={trello} />
+              Trello
+            </Button>
+          </li>
+        </ul>
+      </section>
+      <section className="more-about">
+        <h4>Wanna know more about?</h4>
+        <p>Look this link: <a href="https://blog.coderockr.com/simplificando-o-setup-de-projetos-no-github-f29b76c83194">Simplificando o Setup de Projetos no GitHub</a>
         </p>
-        </section>
-        <section className="project-handlers">
-          <h2>Where is your project?</h2>
-          <ul className="row project-handlers-buttons justify-content-md-center">
-            <li className="col-md-4">
-              <Button raised>
-                <Icon children={github} />
-                GitHub
-          </Button>
-            </li>
-            <li className="col-md-4">
-              <Button raised>
-                <Icon children={gitlab} />
-                GitLab
-          </Button>
-            </li>
-            <li className="col-md-4">
-              <Button raised>
-                <Icon children={trello} />
-                Trello
-          </Button>
-            </li>
-          </ul>
-        </section>
-        <section className="more-about">
-          <h2>Wanna know more about?</h2>
-          <p>Look this links:</p>
-          <ul>
-            <li>
-              <a href="https://blog.coderockr.com/simplificando-o-setup-de-projetos-no-github-f29b76c83194">
-                Simplificando o Setup de Projetos no GitHub
-              </a>
-            </li>
-          </ul>
-        </section>
+      </section>
     </div>
   </div>
-);
+)
 
-export default Home;
+export default withRouter(Home);