From 2ff6295f7160e7f248d830ff5d1dd4e001acf105 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 15 Sep 2016 15:04:25 -0400
Subject: [PATCH] UX: De-emphasize back/quit buttons in the wizard

---
 .../wizard/templates/components/wizard-step.hbs        | 10 ++--------
 .../wizard/test/acceptance/wizard-test.js.es6          |  4 ++--
 app/assets/stylesheets/wizard.scss                     |  6 ++++++
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
index 52a9b5fbfd..8b568b66c3 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
@@ -22,17 +22,11 @@
 
   <div class='wizard-buttons'>
     {{#if showQuitButton}}
-      <button class='wizard-btn danger' {{action "quit"}} disabled={{saving}}>
-        {{fa-icon "chevron-left"}}
-        {{i18n "wizard.quit"}}
-      </button>
+      <a href {{action "quit"}} class='action-link quit'>{{i18n "wizard.quit"}}</a>
     {{/if}}
 
     {{#if showBackButton}}
-      <button class='wizard-btn back' {{action "backStep"}} disabled={{saving}}>
-        {{fa-icon "chevron-left"}}
-        {{i18n "wizard.back"}}
-      </button>
+      <a href {{action "backStep"}} class='action-link back'>{{i18n "wizard.back"}}</a>
     {{/if}}
 
     {{#if showNextButton}}
diff --git a/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6 b/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
index 17e39ce347..fb95fa7abf 100644
--- a/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
+++ b/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
@@ -61,10 +61,10 @@ test("Going back and forth in steps", assert => {
 
     assert.ok(!exists('.wizard-btn.next'));
     assert.ok(exists('.wizard-btn.done'), 'last step shows a done button');
-    assert.ok(exists('.wizard-btn.back'), 'shows the back button');
+    assert.ok(exists('.action-link.back'), 'shows the back button');
   });
 
-  click('.wizard-btn.back');
+  click('.action-link.back');
   andThen(() => {
     assert.ok(exists('.wizard-step-title'));
     assert.ok(exists('.wizard-btn.next'));
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 0c62106992..cca2f2421d 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -71,6 +71,12 @@ body.wizard {
     }
   }
 
+  .action-link {
+    margin-right: 1em;
+    text-decoration: none;
+    color: #6699ff;
+  }
+
   .wizard-btn {
     border-radius: 2px;
     font-size: 1.0em;