Merge pull request #2795 from balena-io/bump-styled-components-system

Upgrade rendition to v8

.gitattributes

@@ -48,4 +48,10 @@ CODEOWNERS text
 *.rpi-sdcard binary diff=hex
 *.wic binary diff=hex
 *.foo binary diff=hex
+*.eot binary diff=hex
+*.otf binary diff=hex
+*.woff binary diff=hex
+*.woff2 binary diff=hex
+*.ttf binary diff=hex
 xz-without-extension binary diff=hex
+wmic-output.txt binary diff=hex

lib/gui/app/components/drive-selector/index.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2019 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.TargetSelector
+ */
+
+const angular = require('angular')
+const { react2angular } = require('react2angular')
+
+const MODULE_NAME = 'Etcher.Components.TargetSelector'
+const SelectTargetButton = angular.module(MODULE_NAME, [])
+
+SelectTargetButton.component(
+  'targetSelector',
+  react2angular(require('./target-selector.jsx'))
+)
+
+module.exports = MODULE_NAME

lib/gui/app/components/drive-selector/target-selector.jsx

@@ -0,0 +1,166 @@
+/*
+ * Copyright 2019 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.
+ */
+
+/* eslint-disable no-magic-numbers */
+
+'use strict'
+
+// eslint-disable-next-line no-unused-vars
+const React = require('react')
+const propTypes = require('prop-types')
+const { default: styled } = require('styled-components')
+const {
+  ChangeButton,
+  DetailsText,
+  StepButton,
+  StepNameButton,
+  ThemedProvider
+} = require('./../../styled-components')
+const { Txt } = require('rendition')
+const middleEllipsis = require('./../../utils/middle-ellipsis')
+const { bytesToClosestUnit } = require('./../../../../shared/units')
+
+const TargetDetail = styled((props) => (
+  <Txt.span {...props}>
+  </Txt.span>
+)) `
+  float: ${({ float }) => float}
+`
+
+const TargetDisplayText = ({
+  description,
+  size,
+  ...props
+}) => {
+  return (
+    <Txt.span {...props}>
+      <TargetDetail
+        float='left'>
+        {description}
+      </TargetDetail>
+      <TargetDetail
+        float='right'
+      >
+        {size}
+      </TargetDetail>
+    </Txt.span>
+  )
+}
+
+const TargetSelector = (props) => {
+  const targets = props.selection.getSelectedDrives()
+
+  if (targets.length === 1) {
+    const target = targets[0]
+    return (
+      <ThemedProvider>
+        <StepNameButton
+          plain
+          tooltip={props.tooltip}
+        >
+          {/* eslint-disable no-magic-numbers */}
+          { middleEllipsis(target.description, 20) }
+        </StepNameButton>
+        { !props.flashing &&
+          <ChangeButton
+            plain
+            mb={14}
+            onClick={props.reselectDrive}
+          >
+            Change
+          </ChangeButton>
+        }
+        <DetailsText>
+          { props.constraints.hasListDriveImageCompatibilityStatus(targets, props.image) &&
+            <Txt.span className='glyphicon glyphicon-exclamation-sign'
+              ml={2}
+              tooltip={
+                props.constraints.getListDriveImageCompatibilityStatuses(targets, props.image)[0].message
+              }
+            />
+          }
+          { bytesToClosestUnit(target.size) }
+        </DetailsText>
+      </ThemedProvider>
+    )
+  }
+
+  if (targets.length > 1) {
+    const targetsTemplate = []
+    for (const target of targets) {
+      targetsTemplate.push((
+        <DetailsText
+          key={target.device}
+          tooltip={
+            `${target.description} ${target.displayName} ${bytesToClosestUnit(target.size)}`
+          }
+          px={21}
+        >
+          <TargetDisplayText
+            description={middleEllipsis(target.description, 14)}
+            size={bytesToClosestUnit(target.size)}
+          >
+          </TargetDisplayText>
+        </DetailsText>
+      ))
+    }
+    return (
+      <ThemedProvider>
+        <StepNameButton
+          plain
+          tooltip={props.tooltip}
+        >
+          {targets.length} Targets
+        </StepNameButton>
+        { !props.flashing &&
+          <ChangeButton
+            plain
+            onClick={props.reselectDrive}
+            mb={14}
+          >
+            Change
+          </ChangeButton>
+        }
+        {targetsTemplate}
+      </ThemedProvider>
+    )
+  }
+
+  return (
+    <ThemedProvider>
+      <StepButton
+        tabindex={(targets.length > 0) ? -1 : 2 }
+        disabled={props.disabled}
+        onClick={props.openDriveSelector}
+      >
+        Select target
+      </StepButton>
+    </ThemedProvider>
+  )
+}
+
+TargetSelector.propTypes = {
+  disabled: propTypes.bool,
+  openDriveSelector: propTypes.func,
+  selection: propTypes.object,
+  reselectDrive: propTypes.func,
+  flashing: propTypes.bool,
+  constraints: propTypes.object,
+  show: propTypes.bool,
+  tooltip: propTypes.string
+}
+
+module.exports = TargetSelector

lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html

@@ -52,7 +52,7 @@
 </div>
 
 <div class="modal-footer">
-  <button class="button button-primary button-block"
+  <button class="button button-primary"
     tabindex="{{ 15 + modal.getDrives().length }}"
     ng-class="{
       'button-warning': modal.constraints.hasListDriveImageCompatibilityStatus(modal.state.getSelectedDrives(), modal.state.getImage())

lib/gui/app/components/file-selector/file-selector/file-list.jsx

@@ -87,7 +87,7 @@ class UnstyledFileListWrap extends React.PureComponent {
   render () {
     return (
       <Flex className={ this.props.className }
-        innerRef={ ::this.setScrollElem }
+        ref={ ::this.setScrollElem }
         wrap="wrap">
         { this.props.children }
       </Flex>

lib/gui/app/components/file-selector/file-selector/file-selector.jsx

@@ -58,7 +58,7 @@ const Flex = styled.div`
   overflow: ${ props => props.overflow };
 `
 
-const Header = Flex.extend`
+const Header = styled(Flex) `
   padding: 10px 15px 0;
   border-bottom: 1px solid ${ colors.primary.faded };
 
@@ -67,9 +67,9 @@ const Header = Flex.extend`
   }
 `
 
-const Main = Flex.extend``
+const Main = styled(Flex) ``
 
-const Footer = Flex.extend`
+const Footer = styled(Flex) `
   padding: 10px;
   flex: 0 0 auto;
   border-top: 1px solid ${ colors.primary.faded };

lib/gui/app/components/file-selector/file-selector/path-breadcrumbs.jsx

@@ -72,7 +72,7 @@ class Crumb extends React.PureComponent {
     return (
       <rendition.Button
         onClick={ ::this.navigate }
-        plaintext={ true }>
+        plain={ true }>
         <rendition.Txt bold={ this.props.bold }>
           { middleEllipsis(this.props.dir.name, FILENAME_CHAR_LIMIT_SHORT) }
         </rendition.Txt>

lib/gui/app/components/file-selector/file-selector/recent-files.jsx

@@ -49,7 +49,7 @@ class RecentFileLink extends React.PureComponent {
     return (
       <rendition.Button
         onClick={ ::this.select }
-        plaintext={ true }>
+        plain={ true }>
         { middleEllipsis(file.name, FILENAME_CHAR_LIMIT_SHORT) }
       </rendition.Button>
     )

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

@@ -16,10 +16,12 @@
 
 'use strict'
 
+// eslint-disable-next-line no-unused-vars
 const React = require('react')
 const PropTypes = require('prop-types')
 const styled = require('styled-components').default
 const { position, right } = require('styled-system')
+const { BaseButton, ThemedProvider } = require('../../styled-components')
 
 const Div = styled.div `
   ${position}
@@ -28,11 +30,15 @@ const Div = styled.div `
 
 const FlashAnother = (props) => {
   return (
-    <Div position='absolute' right='152px'>
-      <button className="button button-primary button-brick" onClick={props.onClick.bind(null, { preserveImage: true })}>
-        <b>Flash Another</b>
-      </button>
-    </Div>
+    <ThemedProvider>
+      <Div position='absolute' right='152px'>
+        <BaseButton
+          primary
+          onClick={props.onClick.bind(null, { preserveImage: true })}>
+          Flash Another
+        </BaseButton>
+      </Div>
+    </ThemedProvider>
   )
 }
 

lib/gui/app/components/image-selector/image-selector.jsx

@@ -22,8 +22,6 @@ const propTypes = require('prop-types')
 
 const middleEllipsis = require('./../../utils/middle-ellipsis')
 
-const { Provider } = require('rendition')
-
 const shared = require('./../../../../shared/units')
 const {
   StepButton,
@@ -32,40 +30,41 @@ const {
   Footer,
   Underline,
   DetailsText,
-  ChangeButton
+  ChangeButton,
+  ThemedProvider
 } = require('./../../styled-components')
 
 const SelectImageButton = (props) => {
   if (props.hasImage) {
     return (
-      <Provider>
+      <ThemedProvider>
         <StepNameButton
-          plaintext
+          plain
           onClick={props.showSelectedImageDetails}
           tooltip={props.imageBasename}
         >
           {/* eslint-disable no-magic-numbers */}
           { middleEllipsis(props.imageName || props.imageBasename, 20) }
         </StepNameButton>
-        <DetailsText>
-          {shared.bytesToClosestUnit(props.imageSize)}
-        </DetailsText>
         { !props.flashing &&
           <ChangeButton
-            plaintext
+            plain
+            mb={14}
             onClick={props.reselectImage}
           >
             Change
           </ChangeButton>
         }
-      </Provider>
+        <DetailsText>
+          {shared.bytesToClosestUnit(props.imageSize)}
+        </DetailsText>
+      </ThemedProvider>
     )
   }
   return (
-    <Provider>
+    <ThemedProvider>
       <StepSelection>
         <StepButton
-          primary
           onClick={props.openImageSelector}
         >
           Select image
@@ -79,7 +78,7 @@ const SelectImageButton = (props) => {
           </Underline>
         </Footer>
       </StepSelection>
-    </Provider>
+    </ThemedProvider>
   )
 }
 

lib/gui/app/components/image-selector/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * 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.

lib/gui/app/components/modal/styles/_modal.scss

@@ -83,6 +83,7 @@
 .modal-footer {
   flex-grow: 0;
   border: 0;
+  text-align: center;
 }
 
 .modal {

lib/gui/app/components/progress-button/progress-button.jsx

@@ -20,7 +20,11 @@ const React = require('react')
 const propTypes = require('prop-types')
 const Color = require('color')
 
-const { default: styled, keyframes } = require('styled-components')
+const {
+  default: styled,
+  css,
+  keyframes
+} = require('styled-components')
 
 const { ProgressBar, Provider } = require('rendition')
 
@@ -49,6 +53,10 @@ const ProgressButtonStripes = keyframes `
   }
 `
 
+const ProgressButtonStripesRule = css `
+  ${ProgressButtonStripes} 1s linear infinite;
+`
+
 const FlashProgressBar = styled(ProgressBar) `
   > div {
     width: 200px;
@@ -83,7 +91,7 @@ const FlashProgressBarValidating = styled(FlashProgressBar) `
 
   background-color: white;
 
-  animation: ${ProgressButtonStripes} 1s linear infinite;
+  animation: ${ProgressButtonStripesRule};
   overflow: hidden;
 
   background-size: 20px 20px;
@@ -130,7 +138,6 @@ class ProgressButton extends React.Component {
       <Provider>
         <StepSelection>
           <StepButton
-            primary
             onClick= { this.props.callback }
             disabled= { this.props.disabled }
           >

lib/gui/app/components/svg-icon/index.js

@@ -28,5 +28,5 @@ const react2angular = require('react2angular').react2angular
 const MODULE_NAME = 'Etcher.Components.SVGIcon'
 const angularSVGIcon = angular.module(MODULE_NAME, [])
 
-angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon/svg-icon.jsx')))
+angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon.jsx')))
 module.exports = MODULE_NAME

lib/gui/app/pages/finish/styles/_finish.scss

@@ -49,7 +49,6 @@
 
   > b {
     color: $palette-theme-dark-soft-foreground;
-    font-family: monospace;
   }
 }
 

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

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

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

@@ -46,12 +46,6 @@ svg-icon > img[disabled] {
   position: relative;
 }
 
-.page-main .button-brick {
-  width: 200px;
-  height: 48px;
-  font-size: 16px;
-}
-
 .page-main .button-abort-write {
   width: 20px;
   height: 20px;
@@ -67,6 +61,7 @@ svg-icon > img[disabled] {
   width: 200px;
   height: 48px;
   font-size: 16px;
+  font-weight: 300;
 }
 
 %step-border {
@@ -125,10 +120,13 @@ svg-icon > img[disabled] {
 }
 
 .page-main .button.step-footer {
-  font-size: 12px;
+  font-size: 14px;
   color: $palette-theme-primary-background;
   border-radius: 0;
   padding: 0;
+  width: 100%;
+  font-weight: 300;
+  height: 21px;
 }
 
 .page-main .step-drive.glyphicon {
@@ -167,7 +165,11 @@ svg-icon > img[disabled] {
 
 .page-main .step-size {
   color: $palette-theme-dark-disabled-foreground;
-  margin-top: 10px;
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  line-height: 1.5;
+  height: 21px;
+  width: 100%;
 }
 
 .page-main .step-list {

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

@@ -21,11 +21,13 @@
         >
         </image-selector>
       </div>
+
     </div>
   </div>
 
   <div class="col-xs" ng-controller="DriveSelectionController as drive">
     <div class="box text-center relative">
+
       <div class="step-border-left" ng-disabled="main.shouldDriveStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
       <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
 
@@ -35,58 +37,20 @@
       </div>
 
       <div class="space-vertical-large">
-        <div ng-if="!main.selection.hasDrive() && drive.shouldShowDrivesButton()">
-
-          <div>
-            <button class="button button-primary button-brick"
-              tabindex="{{ main.selection.hasDrive() ? -1 : 2 }}"
-              ng-disabled="main.shouldDriveStepBeDisabled()"
-              ng-click="drive.openDriveSelector()">Select drive</button>
-          </div>
-
-        </div>
-        <div ng-if="main.selection.hasDrive() || !drive.shouldShowDrivesButton()">
-
-          <div class="step-selection-text"
-            ng-class="{
-              'text-disabled': main.shouldDriveStepBeDisabled()
-            }">
-            <span class="step-drive step-name"
-              ng-class="{
-                'text-warning': !main.selection.getSelectedDevices().length
-              }"
-              uib-tooltip="{{ drive.getDriveListLabel() }}">
-              <!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
-              {{ drive.getDrivesTitle() | middleEllipsis:20 }}
-            </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>
-        </div>
-        <div ng-if="main.selection.getSelectedDevices().length > 1"
-          ng-class="{
-            'step-fill': !drive.shouldShowDrivesButton()
-          }"
-          class="step-drive step-list">
-          <div ng-repeat="driveObj in drive.getMemoizedSelectedDrives()"
-            uib-tooltip="{{ driveObj.description }} ({{ driveObj.displayName }})">
-            {{ driveObj.description | middleEllipsis:14 }}
-          </div>
-        </div>
+        <target-selector
+          disabled="main.shouldDriveStepBeDisabled()"
+          show="!main.selection.hasDrive() && drive.shouldShowDrivesButton()"
+          tooltip="drive.getDriveListLabel()"
+          selection="main.selection"
+          open-drive-selector="drive.openDriveSelector"
+          reselect-drive="drive.reselectDrive"
+          flashing="main.state.isFlashing()"
+          constraints="main.constraints"
+          targets="drive.getMemoizedSelectedDrives()"
+        >
+        </target-selector>
       </div>
+
     </div>
   </div>
 

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

@@ -20,7 +20,7 @@
   padding: 10px;
   padding-top: 11px;
 
-  border-radius: 2px;
+  border-radius: 24px;
   border: 0;
 
   letter-spacing: .5px;
@@ -33,6 +33,11 @@
     margin-right: 2px;
   }
 
+  &.button-primary{
+    width: 200px;
+    height: 48px;
+  }
+
   &[disabled] {
     @extend .button-no-hover;
     background-color: $palette-theme-dark-disabled-background;

lib/gui/app/scss/main.scss

@@ -15,7 +15,7 @@
  */
 
 $icon-font-path: "../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
-$font-size-base: 13px;
+$font-size-base: 16px;
 $cursor-disabled: initial;
 $link-hover-decoration: none;
 $btn-min-width: 170px;
@@ -47,44 +47,90 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/web
 @import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
 
 @font-face {
-  font-family: Roboto;
-  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff');
-  font-weight: 100;
+  font-family: 'Nunito';
+  src: url('Nunito-Regular.eot');
+  src: url('./fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
+      url('./fonts/Nunito-Regular.woff2') format('woff2'),
+      url('./fonts/Nunito-Regular.woff') format('woff'),
+      url('./fonts/Nunito-Regular.ttf') format('truetype');
+  font-weight: normal;
   font-style: normal;
+  font-display: block;
 }
 
 @font-face {
-  font-family: Roboto;
-  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff');
+  font-family: 'Nunito';
+  src: url('Nunito-Bold.eot');
+  src: url('./fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
+      url('./fonts/Nunito-Bold.woff2') format('woff2'),
+      url('./fonts/Nunito-Bold.woff') format('woff'),
+      url('./fonts/Nunito-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Light.eot');
+  src: url('./fonts/Nunito-Light.eot?#iefix') format('embedded-opentype'),
+      url('./fonts/Nunito-Light.woff2') format('woff2'),
+      url('./fonts/Nunito-Light.woff') format('woff'),
+      url('./fonts/Nunito-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
+  font-display: block;
 }
 
 @font-face {
-  font-family: Roboto;
-  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff');
-  font-weight: 400;
+  font-family: 'CircularStd';
+  src: url('./fonts/CircularStd-Bold.eot');
+  src: url('./fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
+      url('./fonts/CircularStd-Bold.woff2') format('woff2'),
+      url('./fonts/CircularStd-Bold.woff') format('woff'),
+      url('./fonts/CircularStd-Bold.ttf') format('truetype');
+  font-weight: bold;
   font-style: normal;
+  font-display: block;
 }
 
 @font-face {
-  font-family: Roboto;
-  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff');
+  font-family: 'CircularStd';
+  src: url('./fonts/CircularStd-Book.eot');
+  src: url('./fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
+      url('./fonts/CircularStd-Book.woff2') format('woff2'),
+      url('./fonts/CircularStd-Book.woff') format('woff'),
+      url('./fonts/CircularStd-Book.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
+  font-display: block;
 }
 
 @font-face {
-  font-family: Roboto;
-  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
-  font-weight: 700;
+  font-family: 'CircularStd';
+  src: url('./fonts/CircularStd-Medium.eot');
+  src: url('./fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
+      url('./fonts/CircularStd-Medium.woff2') format('woff2'),
+      url('./fonts/CircularStd-Medium.woff') format('woff'),
+      url('./fonts/CircularStd-Medium.ttf') format('truetype');
+  font-weight: 400;
   font-style: normal;
+  font-display: block;
+}
+
+.circular {
+  font-family: 'CircularStd';
+  font-weight: 500;
+}
+.nunito {
+  font-family: 'Nunito';
 }
 
 body {
   letter-spacing: 0.5px;
   display: flex;
   flex-direction: column;
+  font-family: 'CircularStd';
 
   > header {
     flex: 0 0 auto;
@@ -100,12 +146,6 @@ body {
   }
 }
 
-body,
-.tooltip,
-.popover {
-  font-family: Roboto;
-}
-
 .section-footer-main {
   display: flex;
   align-items: center;
@@ -173,7 +213,6 @@ body,
 .section-header {
   text-align: right;
   padding: 5px 8px;
-  font-size: 15px;
 
   > .button {
     padding-left: 3px;

lib/gui/app/styled-components.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * 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.
@@ -16,44 +16,79 @@
 
 'use strict'
 
-const styled = require('styled-components').default
-const { colors } = require('./theme')
+// eslint-disable-next-line no-unused-vars
+const React = require('react')
+const { default: styled } = require('styled-components')
 const {
-  Button, Txt, Flex
+  Button,
+  Txt,
+  Flex,
+  Provider
 } = require('rendition')
+const {
+  space
+} = require('styled-system')
+const { colors } = require('./theme')
 
-exports.StepButton = styled(Button) `
-  width: 200px;
-  height: 48px;
-  font-size: 16px;
-  margin: auto;
-  overflow: hidden;
+const theme = {
+  button: {
+    border: {
+      width: '0',
+      radius: '24px'
+    },
+    disabled: {
+      opacity: 1
+    },
+    extend: () => `
+      width: 200px;
+      height: 48px;
+      font-size: 16px;
 
-  &: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};
-    }
+      &: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};
+        }
+      }
+    `
   }
+}
+
+exports.ThemedProvider = (props) => (
+  <Provider theme={theme} {...props}>
+  </Provider>
+)
+
+const BaseButton = styled(Button) `
+  height: 48px;
 `
 
-exports.ChangeButton = styled(Button) `
+exports.BaseButton = BaseButton
+
+exports.StepButton = (props) => (
+  <BaseButton primary {...props}>
+  </BaseButton>
+)
+
+exports.ChangeButton = styled(BaseButton) `
   color: ${colors.primary.background};
   padding: 0;
   width: 100%;
+  height: auto;
+  ${space}
 
   &:hover, &:focus, &:active {
     color: ${colors.primary.background};
   }
 `
-exports.StepNameButton = styled(Button) `
+exports.StepNameButton = styled(BaseButton) `
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 39px;
   width: 100%;
   font-weight: bold;
   color: ${colors.dark.foreground};
@@ -77,5 +112,5 @@ exports.Underline = styled(Txt.span) `
 `
 exports.DetailsText = styled(Txt.p) `
   color: ${colors.dark.disabled.foreground};
-  margin-bottom: 10px;
+  margin-bottom: 0;
 `

lib/gui/app/theme.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * 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.

lib/gui/css/main.css

@@ -1074,7 +1074,7 @@ html {
 
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
+  font-size: 16px;
   line-height: 1.42857;
   color: #333333;
   background-color: #fff; }
@@ -1128,8 +1128,8 @@ img {
   border-radius: 50%; }
 
 hr {
-  margin-top: 18px;
-  margin-bottom: 18px;
+  margin-top: 22px;
+  margin-bottom: 22px;
   border: 0;
   border-top: 1px solid #eeeeee; }
 
@@ -1181,8 +1181,8 @@ h1, h2, h3, h4, h5, h6,
 h1, .h1,
 h2, .h2,
 h3, .h3 {
-  margin-top: 18px;
-  margin-bottom: 9px; }
+  margin-top: 22px;
+  margin-bottom: 11px; }
   h1 small,
   h1 .small, .h1 small,
   .h1 .small,
@@ -1197,8 +1197,8 @@ h3, .h3 {
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: 9px;
-  margin-bottom: 9px; }
+  margin-top: 11px;
+  margin-bottom: 11px; }
   h4 small,
   h4 .small, .h4 small,
   .h4 .small,
@@ -1211,38 +1211,38 @@ h6, .h6 {
     font-size: 75%; }
 
 h1, .h1 {
-  font-size: 33px; }
+  font-size: 41px; }
 
 h2, .h2 {
-  font-size: 27px; }
+  font-size: 34px; }
 
 h3, .h3 {
-  font-size: 23px; }
+  font-size: 28px; }
 
 h4, .h4 {
-  font-size: 17px; }
+  font-size: 20px; }
 
 h5, .h5 {
-  font-size: 13px; }
+  font-size: 16px; }
 
 h6, .h6 {
-  font-size: 12px; }
+  font-size: 14px; }
 
 p {
-  margin: 0 0 9px; }
+  margin: 0 0 11px; }
 
 .lead {
-  margin-bottom: 18px;
-  font-size: 14px;
+  margin-bottom: 22px;
+  font-size: 18px;
   font-weight: 300;
   line-height: 1.4; }
   @media (min-width: 768px) {
     .lead {
-      font-size: 19.5px; } }
+      font-size: 24px; } }
 
 small,
 .small {
-  font-size: 92%; }
+  font-size: 87%; }
 
 mark,
 .mark {
@@ -1350,14 +1350,14 @@ a.bg-danger:focus {
   background-color: #e4b9b9; }
 
 .page-header {
-  padding-bottom: 8px;
-  margin: 36px 0 18px;
+  padding-bottom: 10px;
+  margin: 44px 0 22px;
   border-bottom: 1px solid #eeeeee; }
 
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: 9px; }
+  margin-bottom: 11px; }
   ul ul,
   ul ol,
   ol ul,
@@ -1379,7 +1379,7 @@ ol {
 
 dl {
   margin-top: 0;
-  margin-bottom: 18px; }
+  margin-bottom: 22px; }
 
 dt,
 dd {
@@ -1418,9 +1418,9 @@ abbr[data-original-title] {
   font-size: 90%; }
 
 blockquote {
-  padding: 9px 18px;
-  margin: 0 0 18px;
-  font-size: 16.25px;
+  padding: 11px 22px;
+  margin: 0 0 22px;
+  font-size: 20px;
   border-left: 5px solid #eeeeee; }
   blockquote p:last-child,
   blockquote ul:last-child,
@@ -1461,7 +1461,7 @@ blockquote.pull-right {
     content: "\00A0 \2014"; }
 
 address {
-  margin-bottom: 18px;
+  margin-bottom: 22px;
   font-style: normal;
   line-height: 1.42857; }
 
@@ -1493,9 +1493,9 @@ kbd {
 
 pre {
   display: block;
-  padding: 8.5px;
-  margin: 0 0 9px;
-  font-size: 12px;
+  padding: 10.5px;
+  margin: 0 0 11px;
+  font-size: 15px;
   line-height: 1.42857;
   color: #333333;
   word-break: break-all;
@@ -2066,7 +2066,7 @@ th {
 .table {
   width: 100%;
   max-width: 100%;
-  margin-bottom: 18px; }
+  margin-bottom: 22px; }
   .table > thead > tr > th,
   .table > thead > tr > td,
   .table > tbody > tr > th,
@@ -2230,7 +2230,7 @@ th {
   @media screen and (max-width: 767px) {
     .table-responsive {
       width: 100%;
-      margin-bottom: 13.5px;
+      margin-bottom: 16.5px;
       overflow-y: hidden;
       -ms-overflow-style: -ms-autohiding-scrollbar;
       border: 1px solid #ddd; }
@@ -2275,8 +2275,8 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 18px;
-  font-size: 19.5px;
+  margin-bottom: 22px;
+  font-size: 24px;
   line-height: inherit;
   color: #333333;
   border: 0;
@@ -2328,16 +2328,16 @@ input[type="checkbox"]:focus {
 output {
   display: block;
   padding-top: 7px;
-  font-size: 13px;
+  font-size: 16px;
   line-height: 1.42857;
   color: #555555; }
 
 .form-control {
   display: block;
   width: 100%;
-  height: 32px;
+  height: 36px;
   padding: 6px 12px;
-  font-size: 13px;
+  font-size: 16px;
   line-height: 1.42857;
   color: #555555;
   background-color: #fff;
@@ -2380,7 +2380,7 @@ textarea.form-control {
   input[type="time"].form-control,
   input[type="datetime-local"].form-control,
   input[type="month"].form-control {
-    line-height: 32px; }
+    line-height: 36px; }
   input[type="date"].input-sm, .input-group-sm > input.form-control[type="date"],
   .input-group-sm > input.input-group-addon[type="date"],
   .input-group-sm > .input-group-btn > input.btn[type="date"], .input-group-sm > .input-group-btn > input.button[type="date"],
@@ -2406,7 +2406,7 @@ textarea.form-control {
   .input-group-sm > .input-group-btn > input.button[type="month"],
   .input-group-sm
   input[type="month"] {
-    line-height: 30px; }
+    line-height: 33px; }
   input[type="date"].input-lg, .input-group-lg > input.form-control[type="date"],
   .input-group-lg > input.input-group-addon[type="date"],
   .input-group-lg > .input-group-btn > input.btn[type="date"], .input-group-lg > .input-group-btn > input.button[type="date"],
@@ -2432,7 +2432,7 @@ textarea.form-control {
   .input-group-lg > .input-group-btn > input.button[type="month"],
   .input-group-lg
   input[type="month"] {
-    line-height: 45px; } }
+    line-height: 49px; } }
 
 .form-group {
   margin-bottom: 15px; }
@@ -2451,7 +2451,7 @@ textarea.form-control {
     cursor: initial; }
   .radio label,
   .checkbox label {
-    min-height: 18px;
+    min-height: 22px;
     padding-left: 20px;
     margin-bottom: 0;
     font-weight: 400;
@@ -2491,7 +2491,7 @@ textarea.form-control {
   margin-left: 10px; }
 
 .form-control-static {
-  min-height: 31px;
+  min-height: 38px;
   padding-top: 7px;
   padding-bottom: 7px;
   margin-bottom: 0; }
@@ -2506,17 +2506,17 @@ textarea.form-control {
 .input-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn, .input-group-sm > .input-group-btn > .button {
-  height: 30px;
+  height: 33px;
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5;
   border-radius: 3px; }
 
 select.input-sm, .input-group-sm > select.form-control,
 .input-group-sm > select.input-group-addon,
 .input-group-sm > .input-group-btn > select.btn, .input-group-sm > .input-group-btn > select.button {
-  height: 30px;
-  line-height: 30px; }
+  height: 33px;
+  line-height: 33px; }
 
 textarea.input-sm, .input-group-sm > textarea.form-control,
 .input-group-sm > textarea.input-group-addon,
@@ -2529,41 +2529,41 @@ select[multiple].input-sm,
   height: auto; }
 
 .form-group-sm .form-control {
-  height: 30px;
+  height: 33px;
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5;
   border-radius: 3px; }
 
 .form-group-sm select.form-control {
-  height: 30px;
-  line-height: 30px; }
+  height: 33px;
+  line-height: 33px; }
 
 .form-group-sm textarea.form-control,
 .form-group-sm select[multiple].form-control {
   height: auto; }
 
 .form-group-sm .form-control-static {
-  height: 30px;
-  min-height: 30px;
+  height: 33px;
+  min-height: 36px;
   padding: 6px 10px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5; }
 
 .input-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn, .input-group-lg > .input-group-btn > .button {
-  height: 45px;
+  height: 49px;
   padding: 10px 16px;
-  font-size: 17px;
+  font-size: 20px;
   line-height: 1.33333;
   border-radius: 6px; }
 
 select.input-lg, .input-group-lg > select.form-control,
 .input-group-lg > select.input-group-addon,
 .input-group-lg > .input-group-btn > select.btn, .input-group-lg > .input-group-btn > select.button {
-  height: 45px;
-  line-height: 45px; }
+  height: 49px;
+  line-height: 49px; }
 
 textarea.input-lg, .input-group-lg > textarea.form-control,
 .input-group-lg > textarea.input-group-addon,
@@ -2576,31 +2576,31 @@ select[multiple].input-lg,
   height: auto; }
 
 .form-group-lg .form-control {
-  height: 45px;
+  height: 49px;
   padding: 10px 16px;
-  font-size: 17px;
+  font-size: 20px;
   line-height: 1.33333;
   border-radius: 6px; }
 
 .form-group-lg select.form-control {
-  height: 45px;
-  line-height: 45px; }
+  height: 49px;
+  line-height: 49px; }
 
 .form-group-lg textarea.form-control,
 .form-group-lg select[multiple].form-control {
   height: auto; }
 
 .form-group-lg .form-control-static {
-  height: 45px;
-  min-height: 35px;
+  height: 49px;
+  min-height: 42px;
   padding: 11px 16px;
-  font-size: 17px;
+  font-size: 20px;
   line-height: 1.33333; }
 
 .has-feedback {
   position: relative; }
   .has-feedback .form-control {
-    padding-right: 40px; }
+    padding-right: 45px; }
 
 .form-control-feedback {
   position: absolute;
@@ -2608,25 +2608,25 @@ select[multiple].input-lg,
   right: 0;
   z-index: 2;
   display: block;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
   text-align: center;
   pointer-events: none; }
 
 .input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback, .input-group-lg > .input-group-addon + .form-control-feedback, .input-group-lg > .input-group-btn > .btn + .form-control-feedback, .input-group-lg > .input-group-btn > .button + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
-  width: 45px;
-  height: 45px;
-  line-height: 45px; }
+  width: 49px;
+  height: 49px;
+  line-height: 49px; }
 
 .input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback, .input-group-sm > .input-group-addon + .form-control-feedback, .input-group-sm > .input-group-btn > .btn + .form-control-feedback, .input-group-sm > .input-group-btn > .button + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
-  width: 30px;
-  height: 30px;
-  line-height: 30px; }
+  width: 33px;
+  height: 33px;
+  line-height: 33px; }
 
 .has-success .help-block,
 .has-success .control-label,
@@ -2716,7 +2716,7 @@ select[multiple].input-lg,
   color: #a94442; }
 
 .has-feedback label ~ .form-control-feedback {
-  top: 23px; }
+  top: 27px; }
 
 .has-feedback label.sr-only ~ .form-control-feedback {
   top: 0; }
@@ -2776,7 +2776,7 @@ select[multiple].input-lg,
 
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-height: 25px; }
+  min-height: 29px; }
 
 .form-horizontal .form-group {
   margin-right: -15px;
@@ -2799,12 +2799,12 @@ select[multiple].input-lg,
 @media (min-width: 768px) {
   .form-horizontal .form-group-lg .control-label {
     padding-top: 11px;
-    font-size: 17px; } }
+    font-size: 20px; } }
 
 @media (min-width: 768px) {
   .form-horizontal .form-group-sm .control-label {
     padding-top: 6px;
-    font-size: 12px; } }
+    font-size: 14px; } }
 
 .btn, .button {
   display: inline-block;
@@ -2818,7 +2818,7 @@ select[multiple].input-lg,
   background-image: none;
   border: 1px solid transparent;
   padding: 6px 12px;
-  font-size: 13px;
+  font-size: 16px;
   line-height: 1.42857;
   border-radius: 4px;
   -webkit-user-select: none;
@@ -3086,19 +3086,19 @@ fieldset[disabled] a.button {
 
 .btn-lg, .btn-group-lg > .btn, .btn-group-lg > .button {
   padding: 10px 16px;
-  font-size: 17px;
+  font-size: 20px;
   line-height: 1.33333;
   border-radius: 6px; }
 
 .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .button {
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5;
   border-radius: 3px; }
 
 .btn-xs, .btn-group-xs > .btn, .btn-group-xs > .button {
   padding: 1px 5px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5;
   border-radius: 3px; }
 
@@ -3172,7 +3172,7 @@ tbody.collapse.in {
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0;
-  font-size: 13px;
+  font-size: 16px;
   text-align: left;
   list-style: none;
   background-color: #fff;
@@ -3187,7 +3187,7 @@ tbody.collapse.in {
     left: auto; }
   .dropdown-menu .divider {
     height: 1px;
-    margin: 8px 0;
+    margin: 10px 0;
     overflow: hidden;
     background-color: #e5e5e5; }
   .dropdown-menu > li > a {
@@ -3236,7 +3236,7 @@ tbody.collapse.in {
 .dropdown-header {
   display: block;
   padding: 3px 20px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.42857;
   color: #777777;
   white-space: nowrap; }
@@ -3496,7 +3496,7 @@ tbody.collapse.in {
 
 .input-group-addon {
   padding: 6px 12px;
-  font-size: 13px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 1;
   color: #555555;
@@ -3508,13 +3508,13 @@ tbody.collapse.in {
   .input-group-sm > .input-group-addon,
   .input-group-sm > .input-group-btn > .input-group-addon.btn, .input-group-sm > .input-group-btn > .input-group-addon.button {
     padding: 5px 10px;
-    font-size: 12px;
+    font-size: 14px;
     border-radius: 3px; }
   .input-group-addon.input-lg,
   .input-group-lg > .input-group-addon,
   .input-group-lg > .input-group-btn > .input-group-addon.btn, .input-group-lg > .input-group-btn > .input-group-addon.button {
     padding: 10px 16px;
-    font-size: 17px;
+    font-size: 20px;
     border-radius: 6px; }
   .input-group-addon input[type="radio"],
   .input-group-addon input[type="checkbox"] {
@@ -3607,7 +3607,7 @@ tbody.collapse.in {
     border-color: #ddd; }
   .nav .nav-divider {
     height: 1px;
-    margin: 8px 0;
+    margin: 10px 0;
     overflow: hidden;
     background-color: #e5e5e5; }
   .nav > li > a > img {
@@ -3701,7 +3701,7 @@ tbody.collapse.in {
 .navbar {
   position: relative;
   min-height: 50px;
-  margin-bottom: 18px;
+  margin-bottom: 22px;
   border: 1px solid transparent; }
   .navbar:before, .navbar:after {
     display: table;
@@ -3806,9 +3806,9 @@ tbody.collapse.in {
 .navbar-brand {
   float: left;
   height: 50px;
-  padding: 16px 15px;
-  font-size: 17px;
-  line-height: 18px; }
+  padding: 14px 15px;
+  font-size: 20px;
+  line-height: 22px; }
   .navbar-brand:hover, .navbar-brand:focus {
     text-decoration: none; }
   .navbar-brand > img {
@@ -3843,11 +3843,11 @@ tbody.collapse.in {
       display: none; } }
 
 .navbar-nav {
-  margin: 8px -15px; }
+  margin: 7px -15px; }
   .navbar-nav > li > a {
     padding-top: 10px;
     padding-bottom: 10px;
-    line-height: 18px; }
+    line-height: 22px; }
   @media (max-width: 767px) {
     .navbar-nav .open .dropdown-menu {
       position: static;
@@ -3861,7 +3861,7 @@ tbody.collapse.in {
       .navbar-nav .open .dropdown-menu .dropdown-header {
         padding: 5px 15px 5px 25px; }
       .navbar-nav .open .dropdown-menu > li > a {
-        line-height: 18px; }
+        line-height: 22px; }
         .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
           background-image: none; } }
   @media (min-width: 768px) {
@@ -3871,8 +3871,8 @@ tbody.collapse.in {
       .navbar-nav > li {
         float: left; }
         .navbar-nav > li > a {
-          padding-top: 16px;
-          padding-bottom: 16px; } }
+          padding-top: 14px;
+          padding-bottom: 14px; } }
 
 .navbar-form {
   padding: 10px 15px;
@@ -3882,8 +3882,8 @@ tbody.collapse.in {
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  margin-top: 9px;
-  margin-bottom: 9px; }
+  margin-top: 7px;
+  margin-bottom: 7px; }
   @media (min-width: 768px) {
     .navbar-form .form-group {
       display: inline-block;
@@ -3951,18 +3951,18 @@ tbody.collapse.in {
   border-bottom-left-radius: 0; }
 
 .navbar-btn {
-  margin-top: 9px;
-  margin-bottom: 9px; }
+  margin-top: 7px;
+  margin-bottom: 7px; }
   .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.button {
-    margin-top: 10px;
-    margin-bottom: 10px; }
+    margin-top: 8.5px;
+    margin-bottom: 8.5px; }
   .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.button {
     margin-top: 14px;
     margin-bottom: 14px; }
 
 .navbar-text {
-  margin-top: 16px;
-  margin-bottom: 16px; }
+  margin-top: 14px;
+  margin-bottom: 14px; }
   @media (min-width: 768px) {
     .navbar-text {
       float: left;
@@ -4104,7 +4104,7 @@ tbody.collapse.in {
 
 .breadcrumb {
   padding: 8px 15px;
-  margin-bottom: 18px;
+  margin-bottom: 22px;
   list-style: none;
   background-color: #f5f5f5;
   border-radius: 4px; }
@@ -4120,7 +4120,7 @@ tbody.collapse.in {
 .pagination {
   display: inline-block;
   padding-left: 0;
-  margin: 18px 0;
+  margin: 22px 0;
   border-radius: 4px; }
   .pagination > li {
     display: inline; }
@@ -4174,7 +4174,7 @@ tbody.collapse.in {
 .pagination-lg > li > a,
 .pagination-lg > li > span {
   padding: 10px 16px;
-  font-size: 17px;
+  font-size: 20px;
   line-height: 1.33333; }
 
 .pagination-lg > li:first-child > a,
@@ -4190,7 +4190,7 @@ tbody.collapse.in {
 .pagination-sm > li > a,
 .pagination-sm > li > span {
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5; }
 
 .pagination-sm > li:first-child > a,
@@ -4205,7 +4205,7 @@ tbody.collapse.in {
 
 .pager {
   padding-left: 0;
-  margin: 18px 0;
+  margin: 22px 0;
   text-align: center;
   list-style: none; }
   .pager:before, .pager:after {
@@ -4296,7 +4296,7 @@ a.label:hover, a.label:focus {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: bold;
   line-height: 1;
   color: #fff;
@@ -4342,7 +4342,7 @@ a.badge:hover, a.badge:focus {
     color: inherit; }
   .jumbotron p {
     margin-bottom: 15px;
-    font-size: 20px;
+    font-size: 24px;
     font-weight: 200; }
   .jumbotron > hr {
     border-top-color: #d5d5d5; }
@@ -4363,12 +4363,12 @@ a.badge:hover, a.badge:focus {
         padding-left: 60px; }
       .jumbotron h1,
       .jumbotron .h1 {
-        font-size: 59px; } }
+        font-size: 72px; } }
 
 .thumbnail {
   display: block;
   padding: 4px;
-  margin-bottom: 18px;
+  margin-bottom: 22px;
   line-height: 1.42857;
   background-color: #fff;
   border: 1px solid #ddd;
@@ -4394,7 +4394,7 @@ a.thumbnail.active {
 
 .alert {
   padding: 15px;
-  margin-bottom: 18px;
+  margin-bottom: 22px;
   border: 1px solid transparent;
   border-radius: 4px; }
   .alert h4 {
@@ -4467,8 +4467,8 @@ a.thumbnail.active {
     background-position: 0 0; } }
 
 .progress {
-  height: 18px;
-  margin-bottom: 18px;
+  height: 22px;
+  margin-bottom: 22px;
   overflow: hidden;
   background-color: #f5f5f5;
   border-radius: 4px;
@@ -4479,8 +4479,8 @@ a.thumbnail.active {
   float: left;
   width: 0%;
   height: 100%;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
   color: #fff;
   text-align: center;
   background-color: #337ab7;
@@ -4737,7 +4737,7 @@ button.list-group-item-danger {
   line-height: 1.3; }
 
 .panel {
-  margin-bottom: 18px;
+  margin-bottom: 22px;
   background-color: #fff;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -4763,7 +4763,7 @@ button.list-group-item-danger {
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: 15px;
+  font-size: 18px;
   color: inherit; }
   .panel-title > a,
   .panel-title > small,
@@ -4938,7 +4938,7 @@ button.list-group-item-danger {
   border: 0; }
 
 .panel-group {
-  margin-bottom: 18px; }
+  margin-bottom: 22px; }
   .panel-group .panel {
     margin-bottom: 0;
     border-radius: 4px; }
@@ -5086,7 +5086,7 @@ button.list-group-item-danger {
 
 .close {
   float: right;
-  font-size: 19.5px;
+  font-size: 24px;
   font-weight: bold;
   line-height: 1;
   color: #000;
@@ -5249,7 +5249,7 @@ button.close {
   word-spacing: normal;
   word-wrap: normal;
   white-space: normal;
-  font-size: 12px;
+  font-size: 14px;
   filter: alpha(opacity=0);
   opacity: 0; }
   .tooltip.in {
@@ -5354,7 +5354,7 @@ button.close {
   word-spacing: normal;
   word-wrap: normal;
   white-space: normal;
-  font-size: 13px;
+  font-size: 16px;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ccc;
@@ -5438,7 +5438,7 @@ button.close {
 .popover-title {
   padding: 8px 14px;
   margin: 0;
-  font-size: 13px;
+  font-size: 16px;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: 5px 5px 0 0; }
@@ -6029,7 +6029,7 @@ body {
 .button {
   padding: 10px;
   padding-top: 11px;
-  border-radius: 2px;
+  border-radius: 24px;
   border: 0;
   letter-spacing: .5px;
   outline: none;
@@ -6037,6 +6037,9 @@ body {
   .button > .glyphicon, .button > .tick {
     top: 2px;
     margin-right: 2px; }
+  .button.button-primary {
+    width: 200px;
+    height: 48px; }
   .button[disabled] {
     background-color: #3a3c41;
     color: #787c7f;
@@ -6182,7 +6185,8 @@ body {
 
 .modal-footer {
   flex-grow: 0;
-  border: 0; }
+  border: 0;
+  text-align: center; }
 
 .modal {
   display: flex !important;
@@ -6388,11 +6392,6 @@ svg-icon > img[disabled] {
 .page-main .relative {
   position: relative; }
 
-.page-main .button-brick {
-  width: 200px;
-  height: 48px;
-  font-size: 16px; }
-
 .page-main .button-abort-write {
   width: 20px;
   height: 20px;
@@ -6406,7 +6405,8 @@ svg-icon > img[disabled] {
 .button-brick {
   width: 200px;
   height: 48px;
-  font-size: 16px; }
+  font-size: 16px;
+  font-weight: 300; }
 
 .page-main .step-border-left, .page-main .step-border-right {
   height: 2px;
@@ -6452,10 +6452,13 @@ svg-icon > img[disabled] {
   padding-bottom: 2px; }
 
 .page-main .button.step-footer {
-  font-size: 12px;
+  font-size: 14px;
   color: #2297de;
   border-radius: 0;
-  padding: 0; }
+  padding: 0;
+  width: 100%;
+  font-weight: 300;
+  height: 21px; }
 
 .page-main .step-drive.glyphicon, .page-main .step-drive.tick {
   margin-top: 1px; }
@@ -6485,7 +6488,11 @@ svg-icon > img[disabled] {
 
 .page-main .step-size {
   color: #787c7f;
-  margin-top: 10px; }
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  line-height: 1.5;
+  height: 21px;
+  width: 100%; }
 
 .page-main .step-list {
   height: 80px;
@@ -6591,8 +6598,7 @@ svg-icon > img[disabled] {
 .page-finish .label {
   display: inline-block; }
   .page-finish .label > b {
-    color: #ddd;
-    font-family: monospace; }
+    color: #ddd; }
 
 .page-finish .soft {
   color: #ddd; }
@@ -9855,39 +9861,65 @@ readers do not read off random characters that represent icons */
   font-weight: 900; }
 
 @font-face {
-  font-family: Roboto;
-  src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff");
-  font-weight: 100;
-  font-style: normal; }
+  font-family: 'Nunito';
+  src: url("Nunito-Regular.eot");
+  src: url("./fonts/Nunito-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Regular.woff2") format("woff2"), url("./fonts/Nunito-Regular.woff") format("woff"), url("./fonts/Nunito-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block; }
 
 @font-face {
-  font-family: Roboto;
-  src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff");
+  font-family: 'Nunito';
+  src: url("Nunito-Bold.eot");
+  src: url("./fonts/Nunito-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Bold.woff2") format("woff2"), url("./fonts/Nunito-Bold.woff") format("woff"), url("./fonts/Nunito-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: block; }
+
+@font-face {
+  font-family: 'Nunito';
+  src: url("Nunito-Light.eot");
+  src: url("./fonts/Nunito-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Light.woff2") format("woff2"), url("./fonts/Nunito-Light.woff") format("woff"), url("./fonts/Nunito-Light.ttf") format("truetype");
   font-weight: 300;
-  font-style: normal; }
+  font-style: normal;
+  font-display: block; }
 
 @font-face {
-  font-family: Roboto;
-  src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff");
-  font-weight: 400;
-  font-style: normal; }
+  font-family: 'CircularStd';
+  src: url("./fonts/CircularStd-Bold.eot");
+  src: url("./fonts/CircularStd-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Bold.woff2") format("woff2"), url("./fonts/CircularStd-Bold.woff") format("woff"), url("./fonts/CircularStd-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: block; }
 
 @font-face {
-  font-family: Roboto;
-  src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff");
+  font-family: 'CircularStd';
+  src: url("./fonts/CircularStd-Book.eot");
+  src: url("./fonts/CircularStd-Book.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Book.woff2") format("woff2"), url("./fonts/CircularStd-Book.woff") format("woff"), url("./fonts/CircularStd-Book.ttf") format("truetype");
   font-weight: 500;
-  font-style: normal; }
+  font-style: normal;
+  font-display: block; }
 
 @font-face {
-  font-family: Roboto;
-  src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff");
-  font-weight: 700;
-  font-style: normal; }
+  font-family: 'CircularStd';
+  src: url("./fonts/CircularStd-Medium.eot");
+  src: url("./fonts/CircularStd-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Medium.woff2") format("woff2"), url("./fonts/CircularStd-Medium.woff") format("woff"), url("./fonts/CircularStd-Medium.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: block; }
+
+.circular {
+  font-family: 'CircularStd';
+  font-weight: 500; }
+
+.nunito {
+  font-family: 'Nunito'; }
 
 body {
   letter-spacing: 0.5px;
   display: flex;
-  flex-direction: column; }
+  flex-direction: column;
+  font-family: 'CircularStd'; }
   body > header {
     flex: 0 0 auto; }
   body > main {
@@ -9896,11 +9928,6 @@ body {
   body > footer {
     flex: 0 0 auto; }
 
-body,
-.tooltip,
-.popover {
-  font-family: Roboto; }
-
 .section-footer-main {
   display: flex;
   align-items: center;
@@ -9946,8 +9973,7 @@ body,
 
 .section-header {
   text-align: right;
-  padding: 5px 8px;
-  font-size: 15px; }
+  padding: 5px 8px; }
   .section-header > .button {
     padding-left: 3px;
     padding-right: 3px; }

package.json

@@ -65,16 +65,16 @@
     "pretty-bytes": "^1.0.4",
     "prop-types": "^15.5.9",
     "react": "^16.8.5",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.8.5",
     "react2angular": "^4.0.2",
     "redux": "^3.5.2",
-    "rendition": "4.41.1",
+    "rendition": "^8.7.2",
     "request": "^2.81.0",
     "resin-corvus": "^2.0.3",
     "roboto-fontface": "^0.9.0",
     "semver": "^5.1.1",
-    "styled-components": "^3.2.3",
-    "styled-system": "^3.1.11",
+    "styled-components": "^4.2.0",
+    "styled-system": "^4.1.0",
     "sudo-prompt": "^8.2.3",
     "tmp": "^0.1.0",
     "uuid": "^3.0.1",
@@ -85,6 +85,7 @@
     "@babel/plugin-proposal-function-bind": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/react-dom": "^16.8.4",
     "acorn": "^6.0.5",
     "angular-mocks": "1.7.6",
     "babel-loader": "^8.0.4",