feat(GUI): use design background and drive size ordering (#2341)

We use the new design background color, and order the drive step size in
accordance with the new design as well.

Related: https://github.com/resin-io/etcher/issues/2310
Change-Type: patch
Changelog-Entry: Use new design background color and drive step size
ordering.

lib/gui/app/pages/main/styles/_main.scss

@@ -15,7 +15,7 @@
  */
 
 .page-main {
-  margin-top: 50px;
+margin-top: 50px;
 }
 
 svg-icon > img[disabled] {
@@ -115,7 +115,8 @@ svg-icon > img[disabled] {
   margin-top: 1px;
 }
 
-.page-main div.step-fill {
+.page-main div.step-fill,
+.page-main span.step-fill {
   margin-top: 25px;
 }
 
@@ -140,13 +141,11 @@ svg-icon > img[disabled] {
   align-items: center;
   height: 39px;
   width: 100%;
-  margin-right: 4.5px;
   font-weight: bold;
   color: $palette-theme-primary-foreground;
 }
 
 .page-main .step-size {
-  margin-right: 4.5px;
   color: $palette-theme-dark-disabled-foreground;
   margin-top: 10px;
 }

lib/gui/app/pages/main/templates/main.tpl.html

@@ -72,19 +72,22 @@
               <!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
               {{ drive.getDrivesTitle() | middleEllipsis:20 }}
             </span>
-            <span
-              ng-if="main.selection.getSelectedDevices().length <= 1"
-              class="step-drive step-size">
-              {{ drive.getDrivesSubtitle() }}
-            </span>
             <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
               uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
               ng-show="main.constraints.hasListDriveImageCompatibilityStatus(main.selection.getSelectedDrives(), main.selection.getImage())"></span>
+            <button class="button button-link step-footer"
+              tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
+              ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
+              ng-click="drive.reselectDrive()">Change</button>
+            <span
+              ng-if="main.selection.getSelectedDevices().length <= 1"
+              ng-class="{
+                'step-fill': !drive.shouldShowDrivesButton()
+              }"
+              class="step-drive step-size">
+              {{ drive.getDrivesSubtitle() }}
+            </span>
           </div>
-          <button class="button button-link step-footer"
-            tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
-            ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
-            ng-click="drive.reselectDrive()">Change</button>
         </div>
         <div ng-if="main.selection.getSelectedDevices().length > 1"
           ng-class="{

lib/gui/app/scss/modules/_theme.scss

@@ -15,7 +15,7 @@
  */
 
 $palette-theme-dark-foreground: #fff;
-$palette-theme-dark-background: #535760;
+$palette-theme-dark-background: #4d5057;
 $palette-theme-light-foreground: #666;
 $palette-theme-light-background: #fff;
 $palette-theme-dark-soft-foreground: #ddd;

lib/gui/css/main.css

@@ -5964,10 +5964,10 @@ button.close {
  * limitations under the License.
  */
 html {
-  background-color: #535760; }
+  background-color: #4d5057; }
 
 body {
-  background-color: #535760; }
+  background-color: #4d5057; }
 
 .checkbox input[type="checkbox"] {
   position: initial;
@@ -6045,7 +6045,7 @@ body {
   padding: 8px 25px; }
 
 .label-inset {
-  background-color: #3b3e45;
+  background-color: #35373c;
   color: #919191; }
 
 .label-danger {
@@ -6581,7 +6581,8 @@ svg-icon > img[disabled] {
 .page-main .step-drive.glyphicon, .page-main .step-drive.tick {
   margin-top: 1px; }
 
-.page-main div.step-fill {
+.page-main div.step-fill,
+.page-main span.step-fill {
   margin-top: 25px; }
 
 .page-main .step-drive.step-list::-webkit-scrollbar {
@@ -6600,12 +6601,10 @@ svg-icon > img[disabled] {
   align-items: center;
   height: 39px;
   width: 100%;
-  margin-right: 4.5px;
   font-weight: bold;
   color: #fff; }
 
 .page-main .step-size {
-  margin-right: 4.5px;
   color: #787c7f;
   margin-top: 10px; }
 
@@ -6749,7 +6748,7 @@ svg-icon > img[disabled] {
   position: absolute;
   top: 125px;
   left: 0;
-  background-color: #535760;
+  background-color: #4d5057;
   color: #fff;
   font-weight: 300; }
   .page-finish .fallback-banner .caption {