Restyle success screen and enlarge UI elements

Change-type: patch
Changelog-entry: Added React component for the Flash Another button
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>

lib/gui/app/components/flash-another/flash-another.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+const React = require('react')
+const propTypes = require('prop-types')
+
+const FlashAnother = (props) => {
+  return (
+    <div>
+      <button className="button button-primary button-brick" onClick={props.onClick.bind(null, { preserveImage: true })}>
+        <b>Flash Another</b>
+      </button>
+    </div>
+  )
+}
+
+FlashAnother.propTypes = {
+  onClick: propTypes.func
+}
+
+module.exports = FlashAnother

lib/gui/app/components/flash-another/index.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2018 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+/**
+ * @module Etcher.Components.FlashAnother
+ */
+
+const angular = require('angular')
+const { react2angular } = require('react2angular')
+
+const MODULE_NAME = 'Etcher.Components.FlashAnother'
+const FlashAnother = angular.module(MODULE_NAME, [])
+
+FlashAnother.component(
+  'flashAnother',
+  react2angular(require('./flash-another.jsx'))
+)
+
+module.exports = MODULE_NAME

lib/gui/app/pages/finish/templates/success.tpl.html

@@ -15,11 +15,8 @@
         </div>
       </div>
 
-      <div class="col-xs-4">
+      <flash-another on-click="finish.restart">
-        <button class="button button-primary button-brick" ng-click="finish.restart({ preserveImage: true })">
+      </flash-another>
-          <b>Flash Another</b>
-        </button>
-      </div>
     </div>
 
     <div class="box center">

lib/gui/app/pages/main/main.js

@@ -42,6 +42,7 @@ const MainPage = angular.module(MODULE_NAME, [
   require('../../components/file-selector'),
   require('../../components/featured-project'),
   require('../../components/reduced-flashing-infos'),
+  require('../../components/flash-another'),
 
   require('../../os/open-external/open-external'),
   require('../../os/dropzone/dropzone'),

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

@@ -47,7 +47,6 @@ svg-icon > img[disabled] {
 }
 
 .page-main .button-brick {
-  min-width: $btn-min-width;
   width: 200px;
   height: 48px;
   font-size: 16px;
@@ -64,6 +63,12 @@ svg-icon > img[disabled] {
   top: 30%;
 }
 
+.button-brick {
+  width: 200px;
+  height: 48px;
+  font-size: 16px;
+}
+
 %step-border {
   height: 2px;
   background-color: $palette-theme-dark-foreground;

lib/gui/app/scss/components/_button.scss

@@ -37,6 +37,7 @@
     @extend .button-no-hover;
     background-color: $palette-theme-dark-disabled-background;
     color: $palette-theme-dark-disabled-foreground;
+    opacity: 1;
   }
 }
 

lib/gui/app/styled-components.js

@@ -32,6 +32,7 @@ exports.StepButton = styled(Button) `
   &:disabled {
     background-color: ${colors.dark.disabled.background};
     color: ${colors.dark.disabled.foreground};
+    opacity: 1;
     &:hover {
       background-color: ${colors.dark.disabled.background};
       color: ${colors.dark.disabled.foreground};

lib/gui/app/theme.js

@@ -26,7 +26,7 @@ exports.colors = {
     },
     disabled: {
       foreground: '#787c7f',
-      background: '#313339'
+      background: '#3a3c41'
     }
   },
   light: {

lib/gui/css/main.css

@@ -6076,7 +6076,8 @@ body {
     margin-right: 2px; }
   .button[disabled] {
     background-color: #3a3c41;
-    color: #787c7f; }
+    color: #787c7f;
+    opacity: 1; }
 
 .button-block {
   display: block;
@@ -6425,7 +6426,6 @@ svg-icon > img[disabled] {
   position: relative; }
 
 .page-main .button-brick {
-  min-width: 170px;
   width: 200px;
   height: 48px;
   font-size: 16px; }
@@ -6440,6 +6440,11 @@ svg-icon > img[disabled] {
   right: -17px;
   top: 30%; }
 
+.button-brick {
+  width: 200px;
+  height: 48px;
+  font-size: 16px; }
+
 .page-main .step-border-left, .page-main .step-border-right {
   height: 2px;
   background-color: #fff;