Move "Skip this step" to side panel

2 files changed, 17 insertions, 12 deletions

diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 36a18956a..8077b134c 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -47,16 +47,18 @@ class BuyEtherScreen extends Component {
     setTimeout(() => this.setState({ justCopied: false }), 1000)
   }
 
-  renderSkipStep() {
+  renderSkip() {
     const {showAccountDetail, address} = this.props
 
     return (
-      <button
-        className="first-time-flow__button--tertiary"
+      <div
+        className="buy-ether__side-panel-exit"
         onClick={() => showAccountDetail(address)}
       >
-        Skip this step
-      </button>
+        <div className="buy-ether__side-panel-item-name">
+          Do it later
+        </div>
+      </div>
     )
   }
 
@@ -100,8 +102,6 @@ class BuyEtherScreen extends Component {
           >
             Buy
           </button>
-          <div className="buy-ether__button-separator-text">or</div>
-          {this.renderSkipStep()}
         </div>
       </div>
     )
@@ -126,8 +126,6 @@ class BuyEtherScreen extends Component {
               >
                 Buy
               </button>
-              <div className="buy-ether__button-separator-text">or</div>
-              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -148,8 +146,6 @@ class BuyEtherScreen extends Component {
               >
                 { justCopied ? 'Copied' : 'Copy' }
               </button>
-              <div className="buy-ether__button-separator-text">or</div>
-              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -189,6 +185,7 @@ class BuyEtherScreen extends Component {
                   )}
                 </div>
               ))}
+              {this.renderSkip()}
             </div>
             <div className="buy-ether__action-content">
               {this.renderContent()}
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f0d62679c..483bda212 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -361,7 +361,8 @@ button.backup-phrase__confirm-seed-option:hover {
   flex-flow: column nowrap;
 }
 
-.buy-ether__side-panel-item {
+.buy-ether__side-panel-item,
+.buy-ether__side-panel-exit {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -372,6 +373,13 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 18px;
   cursor: pointer;
   min-width: 140px;
+}
+
+.buy-ether__side-panel-exit {
+  color: #FF001F;
+}
+
+.buy-ether__side-panel-item {
   border-bottom: 1px solid #CDCDCD;
 }