Add first rendition theme configs

Change-type: patch
Changelog-entry: Use rendition theme property for step buttons
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>

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

@@ -65,7 +65,6 @@ const SelectImageButton = (props) => {
     <Provider>
       <StepSelection>
         <StepButton
-          primary
           onClick={props.openImageSelector}
         >
           Select image

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

@@ -138,7 +138,6 @@ class ProgressButton extends React.Component {
       <Provider>
         <StepSelection>
           <StepButton
-            primary
             onClick= { this.props.callback }
             disabled= { this.props.disabled }
           >

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 {

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,31 +16,50 @@
 
 'use strict'
 
+// eslint-disable-next-line no-unused-vars
+const React = require('react')
 const { default: styled } = require('styled-components')
 const { colors } = require('./theme')
 const {
-  Button, Txt, Flex
+  Button, Txt, Flex, Provider
 } = require('rendition')
 
-exports.StepButton = styled(Button) `
-  width: 200px;
-  height: 48px;
-  font-size: 16px;
-  margin: auto;
-  overflow: hidden;
-  border: none;
-  border-radius: 2px;
+const theme = {
+  button: {
+    border: {
+      width: '0',
+      radius: '2px'
+    },
+    disabled: {
+      opacity: 1
+    },
+    extend: (props) => `
+      width: 200px;
+      min-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.StepButton = (props) => {
+  return (
+    <Provider theme={theme}>
+      <Button primary {...props}>
+      </Button>
+    </Provider>
+  )
+}
 
 exports.ChangeButton = styled(Button) `
   color: ${colors.primary.background};

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

@@ -6388,11 +6388,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 +6401,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;