Change to reactstrap and customize styles

Author: joshsmith

gatsby-config.js

@@ -2,5 +2,16 @@ module.exports = {
   siteMetadata: {
     title: 'Know Your User',
   },
-  plugins: ['gatsby-plugin-react-helmet', 'gatsby-plugin-sass'],
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-sass',
+    {
+      resolve: `gatsby-plugin-google-fonts`,
+      options: {
+        fonts: [
+          `open sans\:400,700`
+        ]
+      }
+    }
+  ],
 }

package.json

@@ -7,6 +7,7 @@
     "bootstrap": "^4.1.1",
     "gatsby": "^1.9.247",
     "gatsby-link": "^1.6.40",
+    "gatsby-plugin-google-fonts": "^0.0.4",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-plugin-sass": "^1.0.26",
     "react": "^16.3.2",

src/layouts/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
-import 'bootstrap/dist/css/bootstrap.css'
 import '../styles/index.scss'
 
 const Layout = ({ children, data }) => (

src/pages/index.js

@@ -1,34 +1,37 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import Testimonial from '../components/testimonial'
-import { Button } from 'reactstrap'
+import { Button, Container, Form, FormGroup, Input, Row, Col } from 'reactstrap'
 
 const IndexPage = ({ Testimonial }) => (
-  <div>
-    <div>
-      <h1>Get our best links every weekday</h1>
-      <div>
-        <p>
+  <Container fluid>
+    <Row className="hero">
+      <Col sm="12" md={{ size: 9, offset: 1 }}>
+        <h1 className="hero__title">Get our best links every weekday</h1>
+        <p className="hero__subtitle">
           We handpick new content on product development, user experience,
           analytics, and more sent right to your inbox.
         </p>
-        <div className="input">
-          <input
-            type="email"
-            className="form-control"
-            aria-describedby="emailHelp"
-            placeholder="Your email adress"
-          />
-        </div>
-        <div className="subscribe-button">
-          <button type="button" className="btn btn-primary">
+      </Col>
+    </Row>
+    <Row className="subscription">
+      <Col sm="12" md={{ size: 8, offset: 2 }}>
+        <Form>
+          <FormGroup className="subscription__email">
+            <Input
+              className="subscription__email__input"
+              type="email"
+              placeholder="Your email address"
+            />
+          </FormGroup>
+          <Button className="subscription__button" color="primary" block>
             Subscribe
-          </button>
-        </div>
-        <div>{Testimonial}</div>
-      </div>
-    </div>
-  </div>
+          </Button>
+        </Form>
+      </Col>
+    </Row>
+    <div>{Testimonial}</div>
+  </Container>
 )
 
 export default IndexPage

src/styles/_variables.scss

@@ -0,0 +1,2 @@
+$font-family-sans-serif: 'Open Sans', sans-serif;
+$primary: #3f51b5;

src/styles/index.scss

@@ -1 +1,5 @@
-@import 'pages/index.scss';
+@import 'variables';
+
+@import '~bootstrap/scss/bootstrap';
+
+@import 'pages/index';

src/styles/pages/_index.scss

@@ -1,23 +1,32 @@
-h1 {
-  text-align: center;
-}
+.hero {
+  @extend .text-center;
 
-.input {
-  margin-bottom: 5px;
-  text-align: center;
-}
+  &__title {
+    @extend .h2;
 
-.form-control {
-  width: 45%;
-}
+    color: $primary;
+    font-weight: 700;
+    margin-bottom: 2rem;
+  }
 
-.subscribe-button {
-  text-align: center;
-  display: block;
+  &__subtitle {
+    @extend .lead;
+
+    margin-bottom: 3rem;
+  }
 }
 
-.btn-primary {
-  background-color: #3f51b5;
-  border-color: #ccc;
-  width: 45%;
+.subscription {
+  &__email {
+    margin-bottom: 0.5rem;
+
+    &__input {
+      padding: 0.75rem;
+    }
+  }
+
+  &__button {
+    font-weight: 700;
+    padding: 0.75rem;
+  }
 }

yarn.lock

@@ -3235,6 +3235,10 @@ gatsby-module-loader@^1.0.11:
     babel-runtime "^6.26.0"
     loader-utils "^0.2.16"
 
+gatsby-plugin-google-fonts@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-0.0.4.tgz#dc1402a71f27c3ae6caee10777d10adadf74bd7c"
+
 gatsby-plugin-react-helmet@^2.0.10:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.11.tgz#a2db81755f5b41d54e0e535ca1d9a008d3ccff0a"