Merge pull request #137 from oceanprotocol/add-ask-a-question-on-gitter-to-footer

Add "✋ Ask a question on Gitter" to the footer

content/tutorials/wallets.md

@@ -36,10 +36,9 @@ MetaMask is a browser extension that allows web applications to interact with th
 The unique part about MetaMask is that it serves a dual purpose as an ERC-20 wallet and a Web 3.0 browser. For users, it works as an Ethereum wallet, allowing them to store and send any ERC-20 tokens. For developers, it allows you to design and run Ethereum DApps right in your browser without running a full Ethereum node. MetaMask talks to the Ethereum blockchain for you.
 
 **How to setup Metamask?**
-Here are some setup Instructions for Metamask
+Here are some setup Instructions for Metamask:
 
 1. Go to the Chrome Web Store for extensions and search/install metamask. ![metamask-chrome-store](images/metamask-chrome-extension.png)
-
 2. It will get added as a browser extension on the top right portion. Go ahead and accept the terms and conditions. Create a username and password as well. ![tandc-metamask](images/metamask-create-username-password.png)
 3. MetaMask will generate a secret backup phrase for you. Write it down, store it in a safe place, and click next. ![backup](images/metamask-secret-passcode.png)
 4. Confirm your secret backup phrase and finish your MetaMask wallet set up! ![setup-final-metamask](images/metamask_view-account-options.png)

src/components/DocFooter.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { ReactComponent as Pencil } from '../images/pencil.svg'
 import styles from './DocFooter.module.scss'
-import { githubContentPath, githubDevOceanPath } from '../../config'
+import { social, githubContentPath, githubDevOceanPath } from '../../config'
 
 const DocFooter = ({ post, url, externalName }) => {
     let path
@@ -24,6 +24,7 @@ const DocFooter = ({ post, url, externalName }) => {
 
     return (
         <footer className={styles.footer}>
+            <a href={social.gitter}>✋ Ask a question on Gitter</a>
             <a href={url} className={post && !post.html ? styles.active : null}>
                 <Pencil /> Edit this page on GitHub
                 {externalName && (

src/components/DocFooter.module.scss

@@ -6,12 +6,22 @@
     font-size: $font-size-small;
     text-align: center;
 
+    @media (min-width: $break-point--small) {
+        display: flex;
+        justify-content: space-between;
+    }
+
     a {
         font-family: $font-family-button;
         font-weight: $font-weight-bold;
         text-transform: uppercase;
         color: $brand-grey-light;
-        margin: 0 $spacer / 2;
+        display: block;
+        margin-bottom: $spacer / 2;
+
+        @media (min-width: $break-point--small) {
+            margin-bottom: 0;
+        }
 
         &:hover,
         &:focus {
@@ -24,6 +34,10 @@
             margin-bottom: -1px;
             fill: $brand-grey-light;
         }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 }