Upgrade styled-system to v4.1.0

Change-type: patch
Changelog-entry: Upgrade styled-system to v4.1.0
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>

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/image-selector/image-selector.jsx

@@ -40,7 +40,7 @@ const SelectImageButton = (props) => {
     return (
       <Provider>
         <StepNameButton
-          plaintext
+          plain
           onClick={props.showSelectedImageDetails}
           tooltip={props.imageBasename}
         >
@@ -52,7 +52,7 @@ const SelectImageButton = (props) => {
         </DetailsText>
         { !props.flashing &&
           <ChangeButton
-            plaintext
+            plain
             onClick={props.reselectImage}
           >
             Change

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

@@ -125,10 +125,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 +170,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

@@ -62,18 +62,18 @@
             <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"
+            <p
-              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>
+            </p>
+            <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>
         <div ng-if="main.selection.getSelectedDevices().length > 1"

lib/gui/app/styled-components.js

@@ -79,5 +79,5 @@ exports.Underline = styled(Txt.span) `
 `
 exports.DetailsText = styled(Txt.p) `
   color: ${colors.dark.disabled.foreground};
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 `

lib/gui/css/main.css

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

npm-shrinkwrap.json

@@ -1037,6 +1037,14 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-dom": {
+      "version": "16.8.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.4.tgz",
+      "integrity": "sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-icon-base": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@types/react-icon-base/-/react-icon-base-2.1.3.tgz",
@@ -11501,12 +11509,37 @@
       }
     },
     "styled-system": {
-      "version": "3.2.1",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-4.1.0.tgz",
-      "integrity": "sha512-ag0Yp7UeVHHc3t+1uM3jvlljaZYzwqpbJ8hMrFvpaKfUd8xsB9JeQXLwMpEsz8iLx8Lz/+9j0coWFZjmw8MogQ==",
+      "integrity": "sha512-ioIAJ029tRr6eJhiUrE3VZeahN+GBuJHv/jmckkfikY4ej8BaxvIKAaavmjFoqzNsIzr+x5HCpry1ybQYpchtQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.4.2",
-        "prop-types": "^15.6.2"
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz",
+          "integrity": "sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
       }
     },
     "stylis": {

package.json

@@ -39,6 +39,7 @@
   ],
   "dependencies": {
     "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
+    "@types/react-dom": "^16.8.4",
     "angular": "1.7.6",
     "angular-if-state": "^1.0.0",
     "angular-moment": "^1.0.1",
@@ -74,7 +75,7 @@
     "roboto-fontface": "^0.9.0",
     "semver": "^5.1.1",
     "styled-components": "^4.2.0",
-    "styled-system": "^3.1.11",
+    "styled-system": "^4.1.0",
     "sudo-prompt": "^8.2.3",
     "tmp": "^0.1.0",
     "uuid": "^3.0.1",