Upgrade rendition to v8.7.2

Change-type: patch
Changelog-entry: Upgrade rendition to v8.7.2
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>

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/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;

lib/gui/app/styled-components.js

@@ -16,7 +16,7 @@
 
 'use strict'
 
-const styled = require('styled-components').default
+const { default: styled } = require('styled-components')
 const { colors } = require('./theme')
 const {
   Button, Txt, Flex
@@ -28,6 +28,8 @@ exports.StepButton = styled(Button) `
   font-size: 16px;
   margin: auto;
   overflow: hidden;
+  border: none;
+  border-radius: 2px;
 
   &:disabled {
     background-color: ${colors.dark.disabled.background};

package.json

@@ -65,15 +65,15 @@
     "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-components": "^4.2.0",
     "styled-system": "^3.1.11",
     "sudo-prompt": "^8.2.3",
     "tmp": "^0.1.0",