hotfix: update usage of style props in components

app/components/button.js

@@ -13,8 +13,14 @@ const defaultStyles = `
   // $FlowFixMe
   props => props.theme.fontFamily
 };
-  font-weight: bold;
-  font-size: 0.9em;
+  font-weight: ${
+  // $FlowFixMe
+  props => props.theme.fontWeight.bold
+};
+  font-size: ${
+  // $FlowFixMe
+  props => `${props.theme.fontSize.text}em`
+};
   cursor: pointer;
   outline: none;
   min-width: 100px;

app/components/layout.js

@@ -1,16 +1,15 @@
 // @flow
-
 import React from 'react';
 import styled from 'styled-components';
 
 const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100vh;
+  width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
+  height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
   background-color: ${props => props.theme.colors.background};
-  padding-left: 35px;
-  padding-right: 45px;
+  padding-left: ${props => props.theme.layoutPaddingLeft};
+  padding-right: ${props => props.theme.layoutPaddingRight};
 `;
 
 type Props = {

app/components/text.js

@@ -10,7 +10,7 @@ const Text = styled.p`
   color: ${props => props.color || props.theme.colors.text};
   margin: 0;
   padding: 0;
-  font-weight: ${props => (props.isBold ? 'bold' : '400')};
+  font-weight: ${props => (props.isBold ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
 `;
 
 type Props = {
@@ -18,13 +18,13 @@ type Props = {
   isBold?: boolean,
   color?: string,
   className?: string,
-  size?: string,
+  size?: string | number,
 };
 
 export const TextComponent = ({
   value, isBold, color, className, size,
 }: Props) => (
-  <Text className={className} isBold={isBold} color={color} size={size}>
+  <Text className={className} isBold={isBold} color={color} size={`${String(size)}em`}>
     {value}
   </Text>
 );
@@ -33,5 +33,5 @@ TextComponent.defaultProps = {
   className: '',
   isBold: false,
   color: theme.colors.text,
-  size: '1em',
+  size: `${theme.fontSize.text}em`,
 };