Merge pull request #1217 from poanetwork/feature/#1178-apply-new-desi…

…gn-to-noweb3-available

(Feature) Apply new design to "No Web3 Available" section

src/assets/stylesheets/v2.0/components/_ButtonMetamask.scss

@@ -0,0 +1,65 @@
+$btn-ButtonMetamask-height: 58px !default;
+
+.btn-ButtonMetamask {
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    height: $btn-ButtonMetamask-height;
+    outline: none;
+    padding: 0;
+
+    .sw-NoWeb3_ButtonsContainer & {
+        margin-bottom: 25px;
+
+        @media (min-width: $breakpoint-md) {
+            margin-bottom: 0;
+        }
+    }
+
+    &:active {
+        opacity: 0.6;
+    }
+}
+
+.btn-ButtonMetamask_Icon {
+    @include image-retina('#{ $base-images-path }/ButtonMetamask/mm', 'png');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: $btn-ButtonMetamask-height;
+    position: relative;
+    width: 53px;
+    z-index: 5;
+}
+
+.btn-ButtonMetamask_TextContainer {
+    background-color: #f68c24;
+    border-radius: 3px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    justify-content: center;
+    margin-left: -10px;
+    padding: 0 15px;
+    position: relative;
+    text-align: left;
+    z-index: 1;
+}
+
+.btn-ButtonMetamask_TopText {
+    font-size: 9px;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 1.8px;
+    text-transform: uppercase;
+}
+
+.btn-ButtonMetamask_BottomText {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+}

src/assets/stylesheets/v2.0/components/_ButtonNiftyWallet.scss

@@ -0,0 +1,65 @@
+$btn-ButtonNiftyWallet-height: 58px !default;
+
+.btn-ButtonNiftyWallet {
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    height: $btn-ButtonNiftyWallet-height;
+    outline: none;
+    padding: 0;
+
+    .sw-NoWeb3_ButtonsContainer & {
+        margin-bottom: 25px;
+
+        @media (min-width: $breakpoint-md) {
+            margin-bottom: 0;
+        }
+    }
+
+    &:active {
+        opacity: 0.6;
+    }
+}
+
+.btn-ButtonNiftyWallet_Icon {
+    @include image-retina('#{ $base-images-path }/ButtonNiftyWallet/nw-icon', 'png');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: $btn-ButtonNiftyWallet-height;
+    position: relative;
+    width: 64px;
+    z-index: 5;
+}
+
+.btn-ButtonNiftyWallet_TextContainer {
+    background-color: #5e2b99;
+    border-radius: 3px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    justify-content: center;
+    margin-left: -20px;
+    padding: 0 15px 0 30px;
+    position: relative;
+    text-align: left;
+    z-index: 1;
+}
+
+.btn-ButtonNiftyWallet_TopText {
+    font-size: 9px;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 1.8px;
+    text-transform: uppercase;
+}
+
+.btn-ButtonNiftyWallet_BottomText {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+}

src/assets/stylesheets/v2.0/components/_NoWeb3.scss

@@ -0,0 +1,109 @@
+$sw-NoWeb3_InfoIcon-height: 88px !default;
+$sw-NoWeb3_Button-height: 40px !default;
+
+.sw-NoWeb3 {
+    height: 100%;
+}
+
+.sw-NoWeb3_Background {
+    @include image-retina('#{ $base-images-path }/NoWeb3/background', 'jpg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1;
+}
+
+.sw-NoWeb3_Container {
+    align-items: center;
+    background-color: rgba(#404040, 0.5);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    min-height: fit-content;
+    padding: 10px;
+    position: relative;
+    z-index: 12;
+}
+
+.sw-NoWeb3_Block {
+    background-color: #fff;
+    border-radius: 5px;
+    max-width: 580px;
+    min-height: fit-content;
+    padding: 20px;
+
+    @media (min-width: $breakpoint-sm) {
+        padding: 40px 40px 30px 40px;
+    }
+}
+
+.sw-NoWeb3_InfoIcon {
+    background-image: url('#{ $base-images-path }/NoWeb3/info.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: $sw-NoWeb3_InfoIcon-height;
+    margin: 0 auto 40px;
+    width: $sw-NoWeb3_InfoIcon-height;
+}
+
+.sw-NoWeb3_Title {
+    color: #333;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 1.2;
+    margin-bottom: 24px;
+    text-align: center;
+}
+
+.sw-NoWeb3_Description {
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.71;
+    margin: 0 0 45px;
+    text-align: center;
+
+    a {
+        color: $brand-primary;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.sw-NoWeb3_ButtonsContainer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @media (min-width: $breakpoint-md) {
+        flex-direction: row;
+    }
+}
+
+.sw-NoWeb3_Button {
+    border-radius: 3px;
+    border: 1px solid $brand-primary;
+    color: $brand-primary;
+    font-size: 15px;
+    font-weight: 700;
+    height: $sw-NoWeb3_Button-height;
+    line-height: $sw-NoWeb3_Button-height;
+    padding: 0 15px;
+    text-align: left;
+    text-decoration: none;
+
+    &:active {
+        opacity: 0.6;
+    }
+}

src/assets/stylesheets/v2.0/components/_index.scss

@@ -9,6 +9,8 @@
 @import "ButtonCopyToClipboard";
 @import "ButtonDelete";
 @import "ButtonDownload";
+@import "ButtonMetamask";
+@import "ButtonNiftyWallet";
 @import "ButtonPlus";
 @import "ButtonRetry";
 @import "ButtonSkip";
@@ -37,6 +39,7 @@
 @import "LogoPrimary";
 @import "LogoWhite";
 @import "ModalWindow";
+@import "NoWeb3";
 @import "NumericInput";
 @import "NumericInputAndButtonContainer";
 @import "RadioButton";

src/components/Common/ButtonMetamask.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const ButtonMetamask = ({ onClick, extraClassName = '', disabled }) => (
+  <button className={`btn-ButtonMetamask ${extraClassName}`} disabled={disabled} onClick={onClick} type="button">
+    <span className="btn-ButtonMetamask_Icon" />
+    <span className="btn-ButtonMetamask_TextContainer">
+      <span className="btn-ButtonMetamask_TopText">Download</span>
+      <span className="btn-ButtonMetamask_BottomText">Metamask</span>
+    </span>
+  </button>
+)

src/components/Common/ButtonNiftyWallet.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const ButtonNiftyWallet = ({ onClick, extraClassName = '', disabled }) => (
+  <button className={`btn-ButtonNiftyWallet ${extraClassName}`} disabled={disabled} onClick={onClick} type="button">
+    <span className="btn-ButtonNiftyWallet_Icon" />
+    <span className="btn-ButtonNiftyWallet_TextContainer">
+      <span className="btn-ButtonNiftyWallet_TopText">Download</span>
+      <span className="btn-ButtonNiftyWallet_BottomText">Nifty Wallet</span>
+    </span>
+  </button>
+)

src/components/Common/NoWeb3.js

@@ -1,35 +1,53 @@
 import React, { Component } from 'react'
+import { ButtonMetamask } from '../Common/ButtonMetamask'
+import { ButtonNiftyWallet } from '../Common/ButtonNiftyWallet'
 
 export default class NoWeb3 extends Component {
+  goToURL = theURL => {
+    window.open(theURL, '_blank')
+  }
+
   render() {
     return (
-      <div>
-        <section className="home">
-          <div className="container">
-            <div className="st-StepContent_Info">
-              <div className="st-StepContentInfo_InfoText">
-                <h1 className="st-StepContent_InfoTitle">
-                  Wallet not found, or access to Ethereum account not granted
-                </h1>
-                <p className="st-StepContent_InfoDescription">
-                  If{' '}
-                  <a
-                    href="https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid"
-                    target="blank"
-                  >
-                    a Wallet
-                  </a>{' '}
-                  extension is installed on your web browser, please verify that the access to Ethereum account has been
-                  granted and is available for the corresponding domain. Check Token Wizard GitHub for{' '}
-                  <a href="https://github.com/poanetwork/token-wizard/wiki" target="blank">
-                    the instruction
-                  </a>.
-                </p>
-              </div>
+      <section className="sw-NoWeb3">
+        <div className="sw-NoWeb3_Background background-blur" />
+        <div className="sw-NoWeb3_Container">
+          <div className="sw-NoWeb3_Block">
+            <div className="sw-NoWeb3_InfoIcon" />
+            <h1 className="sw-NoWeb3_Title">Wallet not found, or access to your Ethereum account was not granted.</h1>
+            <p className="sw-NoWeb3_Description">
+              If a wallet extension is installed on your web browser, please verify that access to your Ethereum account
+              has been granted and that it's available for this domain.<br />
+              <strong>Need more help?</strong>
+              <br />
+              <a href="https://poanet.zendesk.com/hc/en-us/categories/360000586593-Wallets" target="blank">
+                Wallets HowTo
+              </a>{' '}
+              -{' '}
+              <a href="https://github.com/poanetwork/token-wizard/wiki" target="blank">
+                Token Wizard Wiki
+              </a>
+            </p>
+            <div className="sw-NoWeb3_ButtonsContainer">
+              <ButtonMetamask
+                onClick={() => {
+                  this.goToURL('https://metamask.io/')
+                }}
+              />
+              <ButtonNiftyWallet
+                onClick={() => {
+                  this.goToURL(
+                    'https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid?hl=en'
+                  )
+                }}
+              />
+              <a className="sw-NoWeb3_Button" href="/">
+                Cancel
+              </a>
             </div>
           </div>
-        </section>
-      </div>
+        </div>
+      </section>
     )
   }
 }