merge: update master

package.json

@@ -74,6 +74,9 @@
     "timezone-mock": "^0.0.7"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/react-fontawesome": "^0.0.20",
     "create-redux-form": "^0.1.2",
     "ethjs": "^0.3.3",
     "ethjs-account": "^0.1.4",

src/bootstrap/app.js

@@ -14,6 +14,7 @@ import PageNotFound from '../containers/page-not-found'
 import Initializer from './initializer'
 import GlobalComponents from './global-components'
 import { ETHAddressRegExpCaptureGroup, ETHAddressRegExp } from './dapp-api'
+import './fontawesome'
 
 import './app.css'
 

src/bootstrap/fontawesome.js

@@ -0,0 +1,4 @@
+import { library } from '@fortawesome/fontawesome'
+import faExclamationCircle from '@fortawesome/fontawesome-free-solid/faExclamationCircle'
+
+library.add(faExclamationCircle)

src/components/__snapshots__/storyshots.test.js.snap

@@ -88,11 +88,11 @@ exports[`Storyshots Button disabled 1`] = `
             className="Button is-disabled "
             onClick={null}
           >
-            <span
+            <div
               className="Button-label "
             >
               CLICK ME
-            </span>
+            </div>
           </div>
           <div
             data-radium={true}
@@ -394,11 +394,11 @@ exports[`Storyshots Button primary 1`] = `
             className="Button  "
             onClick={[Function]}
           >
-            <span
+            <div
               className="Button-label "
             >
               CLICK ME
-            </span>
+            </div>
           </div>
           <div
             data-radium={true}
@@ -700,11 +700,11 @@ exports[`Storyshots Button with lots of text 1`] = `
             className="Button  "
             onClick={[Function]}
           >
-            <span
+            <div
               className="Button-label "
             >
               CLICK ME, CLICK ME, CLICK ME
-            </span>
+            </div>
           </div>
           <div
             data-radium={true}
@@ -4277,21 +4277,37 @@ exports[`Storyshots Requires MetaMask needs unlock 1`] = `
           <div
             className="RequiresMetaMask"
           >
+            <img
+              alt="MetaMask Logo"
+              className="RequiresMetaMask-logo"
+              src="meta-mask-logo.png"
+            />
             <div
-              className="RequiresMetaMask-message"
+              className="RequiresMetaMask-content"
             >
               <span>
                 This is a decentralized application. In order to use this site please
 
+                unlock
+                 MetaMask.
               </span>
-              unlock 
               <a
-                className="RequiresMetaMask-message-link"
-                href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
+                href="https://metamask.helpscoutdocs.com/article/58-metamask-basics"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                MetaMask
+                <div
+                  className="Button  RequiresMetaMask-content-button"
+                  onClick={null}
+                >
+                  <div
+                    className="Button-label "
+                  >
+                    Unlock
+                     MetaMask
+                  </div>
+                </div>
               </a>
-              .
             </div>
           </div>
           <div
@@ -4593,21 +4609,37 @@ exports[`Storyshots Requires MetaMask not found 1`] = `
           <div
             className="RequiresMetaMask"
           >
+            <img
+              alt="MetaMask Logo"
+              className="RequiresMetaMask-logo"
+              src="meta-mask-logo.png"
+            />
             <div
-              className="RequiresMetaMask-message"
+              className="RequiresMetaMask-content"
             >
               <span>
                 This is a decentralized application. In order to use this site please
 
+                download
+                 MetaMask.
               </span>
-              download 
               <a
-                className="RequiresMetaMask-message-link"
                 href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                MetaMask
+                <div
+                  className="Button  RequiresMetaMask-content-button"
+                  onClick={null}
+                >
+                  <div
+                    className="Button-label "
+                  >
+                    Download
+                     MetaMask
+                  </div>
+                </div>
               </a>
-              .
             </div>
           </div>
           <div

src/components/button/button.scss

@@ -2,7 +2,6 @@
 
 /* @define Button */
 .Button {
-  // stylelint-disable-next-line declaration-colon-newline-after
   background: $primary;
   border-radius: 5px;
   box-shadow: 0 2px 0 0 $primary;

src/components/button/index.js

@@ -16,7 +16,7 @@ const Button = ({
     className={`Button ${disabled ? 'is-disabled' : ''} ${className}`}
     {...rest}
   >
-    <span className={`Button-label ${labelClassName}`}>{children}</span>
+    <div className={`Button-label ${labelClassName}`}>{children}</div>
   </div>
 )
 
@@ -26,7 +26,7 @@ Button.propTypes = {
     .isRequired,
 
   // Handlers
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
 
   // Modifiers
   disabled: PropTypes.bool,
@@ -35,6 +35,9 @@ Button.propTypes = {
 }
 
 Button.defaultProps = {
+  // Handlers
+  onClick: null,
+
   // Modifiers
   disabled: false,
   className: '',

src/components/requires-meta-mask/index.js

@@ -1,21 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import metaMaskLogo from '../../assets/images/meta-mask-logo.png'
+import Button from '../button'
+
 import './require-meta-mask.css'
 
 const RequiresMetaMask = ({ needsUnlock }) => (
   <div className="RequiresMetaMask">
-    <div className="RequiresMetaMask-message">
+    <img
+      src={metaMaskLogo}
+      alt="MetaMask Logo"
+      className="RequiresMetaMask-logo"
+    />
+    <div className="RequiresMetaMask-content">
       <span>
         This is a decentralized application. In order to use this site please{' '}
+        {needsUnlock ? 'unlock' : 'download'} MetaMask.
       </span>
-      {needsUnlock ? 'unlock ' : 'download '}
       <a
-        className="RequiresMetaMask-message-link"
-        href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
+        href={
+          needsUnlock
+            ? 'https://metamask.helpscoutdocs.com/article/58-metamask-basics'
+            : 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en'
+        }
+        target="_blank"
+        rel="noopener noreferrer"
       >
-        MetaMask
-      </a>.
+        <Button className="RequiresMetaMask-content-button">
+          {needsUnlock ? 'Unlock' : 'Download'} MetaMask
+        </Button>
+      </a>
     </div>
   </div>
 )

src/components/requires-meta-mask/require-meta-mask.scss

@@ -2,17 +2,34 @@
 
 /* @define RequiresMetaMask */
 .RequiresMetaMask {
-  height: 100%;
+  align-items: center;
+  background: $light;
+  border: 1px solid $light3;
+  color: $dark;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.5rem;
+  justify-content: center;
+  line-height: 2.8125rem;
+  margin: 60px 15%;
+  padding: 5% 5% 5% 0;
 
-  &-message {
-    color: $dark;
-    font-size: 40px;
-    padding: 70px 50px;
-    text-align: center;
+  &-logo {
+    margin: 15px 41px;
+    width: 100px;
+  }
+
+  &-content {
+    display: flex;
+    flex: 1 1;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 15px;
 
-    &-link {
-      color: $dark4;
-      text-decoration: none;
+    &-button {
+      font-weight: 700;
+      margin-top: 25px;
+      max-width: 280px;
     }
   }
 }