From 3caf9859b06ea06d893d5fa474c05f79fbab356c Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Fri, 5 Feb 2016 12:48:42 -0400
Subject: [PATCH] Improve "Burn another" screen design

Fixes: https://github.com/resin-io/etcher/issues/74
---
 build/css/main.css              | 27 +++++++++++++++++++++------
 lib/components/hero-button.html |  2 --
 lib/index.html                  | 31 ++++++++++++++++++++++---------
 lib/scss/main.scss              | 17 +++++++++++++++++
 lib/scss/modules/_space.scss    |  4 ++++
 5 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/build/css/main.css b/build/css/main.css
index 1ae8e759..9ef4fb8b 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -5847,6 +5847,9 @@ button.close {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.space-medium {
+  margin: 15px; }
+
 .space-vertical-medium {
   margin: 15px 0; }
 
@@ -5875,12 +5878,14 @@ hero-badge[disabled] .badge {
 hero-icon[disabled] hero-caption {
   color: #787c7f; }
 
-hero-button .btn[disabled] {
-  background-color: #313339;
-  color: #787c7f;
-  pointer-events: none; }
-  hero-button .btn[disabled]:hover {
-    background-color: #36383e; }
+hero-button .btn {
+  min-width: 170px; }
+  hero-button .btn[disabled] {
+    background-color: #313339;
+    color: #787c7f;
+    pointer-events: none; }
+    hero-button .btn[disabled]:hover {
+      background-color: #36383e; }
 
 hero-progress-button .bar {
   background: #6ca1e0; }
@@ -5949,3 +5954,13 @@ body {
 
 .tiny {
   font-size: 10px; }
+
+.separator-xs {
+  flex-grow: 0;
+  background-color: #64686a;
+  padding: 0px;
+  min-width: 2px; }
+
+.button-label {
+  margin: 0 auto 15px;
+  max-width: 165px; }
diff --git a/lib/components/hero-button.html b/lib/components/hero-button.html
index 002c66ae..dfe1a4c1 100644
--- a/lib/components/hero-button.html
+++ b/lib/components/hero-button.html
@@ -13,8 +13,6 @@
         letter-spacing: 0.5px;
         outline: none;
 
-        min-width: 170px;
-
         position: relative;
       }
 
diff --git a/lib/index.html b/lib/index.html
index e1213deb..73e173ef 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -100,15 +100,28 @@
               <h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>
               <p class="soft">Safely ejected and ready for use</p>
 
-              <div class="space-vertical-large">
-                <hero-button ng-click="app.restart({ preserveImage: true })">
-                  <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
-                  Burn image again
-                </hero-button>
-                <hero-button ng-click="app.restart()">
-                  <span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
-                  Burn another image
-                </hero-button>
+              <div class="row center-xs space-vertical-large">
+                <div class="col-xs-4 space-medium">
+                  <div class="box">
+                    <p class="soft button-label">Would you like to burn the same image?</p>
+
+                    <hero-button ng-click="app.restart({ preserveImage: true })">
+                      Use <b>same</b> image
+                    </hero-button>
+                  </div>
+                </div>
+
+                <div class="col-xs separator-xs"></div>
+
+                <div class="col-xs-4 space-medium">
+                  <div class="box">
+                    <p class="soft button-label">Would you like to burn a new image?</p>
+
+                    <hero-button ng-click="app.restart()">
+                      Use <b>new</b> image
+                    </hero-button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index ef37a087..a9cf04cb 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -25,6 +25,7 @@ $color-disabled: rgb(120, 124, 127);
 $btn-disabled: rgb(49, 51, 57);
 $badge-disabled: rgb(92, 94, 92);
 $btn-padding: 10px;
+$btn-min-width: 170px;
 
 @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 
@@ -49,6 +50,8 @@ hero-icon[disabled] hero-caption {
 }
 
 hero-button .btn {
+  min-width: $btn-min-width;
+
   &[disabled] {
     background-color: $btn-disabled;
     color: $color-disabled;
@@ -154,3 +157,17 @@ body {
 .tiny {
   font-size: 10px;
 }
+
+.separator-xs {
+  flex-grow: 0;
+  background-color: darken($color-disabled, 8%);
+  padding: 0px;
+  min-width: 2px;
+}
+
+.button-label {
+  margin: 0 auto $spacing-medium;
+
+  // Keep some spacing at the sides
+  max-width: $btn-min-width - 5px;
+}
diff --git a/lib/scss/modules/_space.scss b/lib/scss/modules/_space.scss
index 1c027107..dbe72a9c 100644
--- a/lib/scss/modules/_space.scss
+++ b/lib/scss/modules/_space.scss
@@ -19,6 +19,10 @@ $spacing-large: 30px;
 $spacing-medium: 15px;
 $spacing-tiny: 5px;
 
+.space-medium {
+  margin: $spacing-medium;
+}
+
 .space-vertical-medium {
   margin: $spacing-medium 0;
 }