From 7b54efb036936751676c8a955b10f9bd1a6ce8f4 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Mon, 13 Feb 2017 11:59:29 +0000
Subject: [PATCH 1/4] moving overriding styles into style-component format

---
 .../src/components/new-project/billing.js     |  7 +++++-
 frontend/src/components/new-project/index.js  |  7 +++++-
 .../src/components/new-project/new-billing.js |  7 +++++-
 frontend/src/components/people-list/index.js  | 16 +++++++++-----
 .../components/people-list/table/tooltip.js   | 22 +++++++++++--------
 5 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/new-project/billing.js b/frontend/src/components/new-project/billing.js
index 441fb76e..de4594c7 100644
--- a/frontend/src/components/new-project/billing.js
+++ b/frontend/src/components/new-project/billing.js
@@ -6,12 +6,17 @@ const constants = require('@ui/shared/constants');
 const fns = require('@ui/shared/functions');
 
 const Button = require('@ui/components/button');
+const BaseElements = require('@ui/components/base-elements');
 const Card = require('@ui/components/payment-card');
 
 const {
   FormattedMessage
 } = ReactIntl;
 
+const {
+  H2,
+} = BaseElements;
+
 const {
   default: styled
 } = Styled;
@@ -35,7 +40,7 @@ const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
 `;
 
-const Title = styled.h2`
+const Title = styled(H2)`
   margin: 0 0 ${remcalc(18)} 0;
   font-size: ${remcalc(36)};
   color: ${colors.brandSecondaryColor};
diff --git a/frontend/src/components/new-project/index.js b/frontend/src/components/new-project/index.js
index 19a5a3d2..c4dcf705 100644
--- a/frontend/src/components/new-project/index.js
+++ b/frontend/src/components/new-project/index.js
@@ -8,6 +8,11 @@ const fns = require('@ui/shared/functions');
 
 const Input = require('@ui/components/input');
 const Button = require('@ui/components/button');
+const BaseElements = require('@ui/components/base-elements');
+
+const {
+  H2,
+} = BaseElements;
 
 const {
   Field
@@ -33,7 +38,7 @@ const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
 `;
 
-const Title = styled.h2`
+const Title = styled(H2)`
   margin: 0 0 ${remcalc(18)} 0;
   font-size: ${remcalc(36)};
   color: ${colors.brandSecondaryColor};
diff --git a/frontend/src/components/new-project/new-billing.js b/frontend/src/components/new-project/new-billing.js
index 2b37359a..c939b803 100644
--- a/frontend/src/components/new-project/new-billing.js
+++ b/frontend/src/components/new-project/new-billing.js
@@ -8,6 +8,11 @@ const fns = require('@ui/shared/functions');
 
 const Input = require('@ui/components/input');
 const Button = require('@ui/components/button');
+const BaseElements = require('@ui/components/base-elements');
+
+const {
+  H2,
+} = BaseElements;
 
 const {
   Field
@@ -33,7 +38,7 @@ const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
 `;
 
-const Title = styled.h2`
+const Title = styled(H2)`
   margin: 0 0 ${remcalc(18)} 0;
   font-size: ${remcalc(36)};
   color: ${colors.brandSecondaryColor};
diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js
index 6c01d537..f4f65ada 100644
--- a/frontend/src/components/people-list/index.js
+++ b/frontend/src/components/people-list/index.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const Styled = require('styled-components');
 
 const Empty = require('@components/empty/people');
 
@@ -9,9 +10,13 @@ const Button = require('@ui/components/button');
 const PeopleTable = require('./table');
 const Invite = require('./invite');
 
-const buttonStyle = {
-  float: 'right'
-};
+const {
+  default: styled
+} = Styled;
+
+const StyledButton = styled(Button)`
+  float: right;
+`;
 
 const People = (props) => {
   const {
@@ -24,13 +29,12 @@ const People = (props) => {
     <div>
       <Row>
         <Column md={2} mdOffset={9}>
-          <Button
+          <StyledButton
             disabled={UI.invite_toggled}
             onClick={handleToggle}
-            style={buttonStyle}
           >
             Invite
-          </Button>
+          </StyledButton>
         </Column>
       </Row>
 
diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js
index 17ef7ed7..7a125bc1 100644
--- a/frontend/src/components/people-list/table/tooltip.js
+++ b/frontend/src/components/people-list/table/tooltip.js
@@ -1,13 +1,18 @@
 const React = require('react');
+const Styled = require('styled-components');
 
 const Tooltip = require('@ui/components/tooltip');
 
-const tooltipStyle = {
-  position: 'absolute',
-  top: '30px',
-  zIndex: 1,
-  right: '-36px',
-};
+const {
+  default: styled
+} = Styled;
+
+const StyledTooltip = styled(Tooltip)`
+  position: absolute;
+  top: 30px;
+  z-index: 1;
+  right: -36px;
+`;
 
 const arrowPosition = {
   bottom: '100%',
@@ -51,13 +56,12 @@ module.exports = ({
   });
 
   return (
-    <Tooltip
+    <StyledTooltip
       arrowPosition={arrowPosition}
       key={person.uuid}
-      style={tooltipStyle}
     >
       {_options}
-    </Tooltip>
+    </StyledTooltip>
   );
 };
 

From f7b9ea20d0441fc384d0db48bb9a36e6cd942f3e Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 9 Feb 2017 13:56:29 +0000
Subject: [PATCH 2/4] removing inline styles and passing styles down to
 styled-component via props

---
 ui/src/components/avatar/index.js             |  4 ++-
 ui/src/components/checkbox/index.js           |  4 ++-
 ui/src/components/close/index.js              |  7 ++--
 ui/src/components/nav-link/index.js           | 13 ++++++--
 ui/src/components/notification/index.js       |  3 +-
 ui/src/components/radio-group/item.js         | 10 ++----
 ui/src/components/radio-group/style.css       | 33 -------------------
 ui/src/components/radio/index.js              |  4 ++-
 ui/src/components/range-slider/index.js       |  4 ++-
 ui/src/components/table-data-table/index.js   |  6 +++-
 ui/src/components/table-simple-table/table.js |  6 +++-
 ui/src/components/textarea/index.js           |  8 +++--
 ui/src/components/tooltip/index.js            |  4 +--
 13 files changed, 48 insertions(+), 58 deletions(-)
 delete mode 100644 ui/src/components/radio-group/style.css

diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js
index b43210a3..0ec2bff6 100644
--- a/ui/src/components/avatar/index.js
+++ b/ui/src/components/avatar/index.js
@@ -37,6 +37,8 @@ const Avatar = styled.div`
   overflow: hidden;
   position: relative;
   text-align: center;
+  
+  ${props => props.styles}
 `;
 
 module.exports = ({
@@ -77,7 +79,7 @@ module.exports = ({
   );
 
   return (
-    <Avatar className={className} style={_style}>
+    <Avatar className={className} styles={_style}>
       {av}
     </Avatar>
   );
diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js
index 15b0ce48..6a8aaae5 100644
--- a/ui/src/components/checkbox/index.js
+++ b/ui/src/components/checkbox/index.js
@@ -26,6 +26,8 @@ const StyledInput = styled.input`
   &:disabled + label::after {
     opacity: 0.3;
   }
+  
+  ${props => props.styles}
 `;
 
 const StyledLabel = styled.label`
@@ -92,7 +94,7 @@ const Checkbox = ({
         onChange={onChange}
         readOnly={readOnly}
         required={required}
-        style={style}
+        styles={style}
         tabIndex={tabIndex}
         type='checkbox'
       />
diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js
index 07658740..00e78635 100644
--- a/ui/src/components/close/index.js
+++ b/ui/src/components/close/index.js
@@ -18,19 +18,17 @@ const StyledButton = styled.button`
   top: ${remcalc(16)};
   right: ${remcalc(16)};
   
-  ${props => props.customStyles ? props.customStyles : null}
+  ${props => props.styles}
 `;
 
 const Close = ({
   style,
   onClick,
-  customStyles = ''
 }) => {
   return (
     <StyledButton
-      customStyles={customStyles}
       onClick={onClick}
-      style={style}
+      styles={style}
     >
       <img
         alt="Close"
@@ -41,7 +39,6 @@ const Close = ({
 };
 
 Close.propTypes = {
-  customStyles: React.PropTypes.string,
   onClick: React.PropTypes.func,
   style: React.PropTypes.object
 };
diff --git a/ui/src/components/nav-link/index.js b/ui/src/components/nav-link/index.js
index 3b65ac58..dc14e28c 100644
--- a/ui/src/components/nav-link/index.js
+++ b/ui/src/components/nav-link/index.js
@@ -2,12 +2,21 @@
 
 const React = require('react');
 const ReactRouter = require('react-router-dom');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
 
 const {
   Link,
   Route
 } = ReactRouter;
 
+const StyledLink = styled(Link)`
+  ${props => props.styles}
+`;
+
 const NavLink = ({
   activeClassName,
   activeStyle,
@@ -39,7 +48,7 @@ const NavLink = ({
       : className;
 
     return (
-      <Link
+      <StyledLink
         className={clssnm}
         // eslint-disable-next-line object-curly-newline
         style={isActive ? { ...style, ...activeStyle } : style}
@@ -47,7 +56,7 @@ const NavLink = ({
         {...rest}
       >
         {newChildren}
-      </Link>
+      </StyledLink>
     );
   };
 
diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js
index 619b559f..83b108ca 100644
--- a/ui/src/components/notification/index.js
+++ b/ui/src/components/notification/index.js
@@ -31,6 +31,7 @@ const StyledNotification = styled.div`
   width: 100%;
 
   ${baseBox(0)}
+  ${props => props.styles}
   
   &::before {
     background-color: ${props => colors[props.type] || colors.brandPrimary}
@@ -60,7 +61,7 @@ const Notificaton = ({
   return (
     <StyledNotification
       className={className}
-      style={style}
+      styles={style}
       type={type}
     >
       { renderClose  }
diff --git a/ui/src/components/radio-group/item.js b/ui/src/components/radio-group/item.js
index 98177329..18333b44 100644
--- a/ui/src/components/radio-group/item.js
+++ b/ui/src/components/radio-group/item.js
@@ -1,19 +1,15 @@
 const React = require('react');
-// const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 const constants = require('../../shared/constants');
 
-// const {
-//   verticallyAlignCenter
-// } = composers;
-
 const {
   remcalc
 } = fns;
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
 const {
@@ -21,7 +17,7 @@ const {
 } = Styled;
 
 const RadioItem = styled.div`
-  background: #FFFFFF;
+  background: ${colors.base.white};
   border: ${boxes.border.unchecked};
   cursor: pointer;
   flaot: left;
diff --git a/ui/src/components/radio-group/style.css b/ui/src/components/radio-group/style.css
deleted file mode 100644
index 61e7680e..00000000
--- a/ui/src/components/radio-group/style.css
+++ /dev/null
@@ -1,33 +0,0 @@
-~boxes: "../../shared/constants.js";
-~colors: "../../shared/constants.js";
-
-:root {
-  --border-checked: ~boxes.border.checked;
-  --border-unchecked: ~boxes.border.unchecked;
-  --border-radius: remcalc(~boxes.borderRadius);
-  --bottom-shaddow: ~boxes.bottomShaddow;
-}
-
-.group {
-  & .item {
-    background: #FFFFFF;
-    cursor: pointer;
-    margin-bottom: remcalc(15);
-    padding: remcalc(25);
-
-    @add-mixin create-base-box-properties;
-
-    &:last-child {
-      margin-bottom: initial;
-    }
-
-    &.checked {
-      border: var(--border-checked);
-      box-shadow: var(--bottom-shaddow);
-    }
-
-    &.disabled {
-      cursor: default;
-    }
-  }
-}
diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index 8c57492c..642317ca 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -32,6 +32,8 @@ const StyledInput = styled.input`
 `;
 
 const StyledLabel = styled.label`
+
+  ${props => props.styles}
 `;
 
 const StyledContent = styled.div`
@@ -82,7 +84,7 @@ const Radio = ({
 }) => {
 
   return (
-    <StyledLabel>
+    <StyledLabel styles={style}>
       <StyledInput
         checked={checked}
         defaultChecked={defaultChecked}
diff --git a/ui/src/components/range-slider/index.js b/ui/src/components/range-slider/index.js
index 0373bb59..b102655f 100644
--- a/ui/src/components/range-slider/index.js
+++ b/ui/src/components/range-slider/index.js
@@ -127,6 +127,8 @@ const StyledRange = styled.input`
   &:focus::-ms-fill-upper {
     ${rangeUpper}
   }
+  
+  ${props => props.styles}
 `;
 
 const RangeSlider = ({
@@ -138,7 +140,7 @@ const RangeSlider = ({
     <StyledRange
       className={className}
       onChange={onChange}
-      style={style}
+      styles={style}
       type='range'
     />
   );
diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js
index a665420b..0989974d 100644
--- a/ui/src/components/table-data-table/index.js
+++ b/ui/src/components/table-data-table/index.js
@@ -14,18 +14,21 @@ const StyledTitle = styled.h3`
 const StyledTableWrapper = styled.section`
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
+	
+	${props => props.styles}
 `;
 
 const Table = ({
   children,
   columns = [],
   data = [],
+  style,
   title,
 }) => {
 
   return (
 
-    <StyledTableWrapper>
+    <StyledTableWrapper styles={style}>
       <StyledTitle>{title}</StyledTitle>
 
       <TableContent
@@ -40,6 +43,7 @@ Table.propTypes = {
   children: React.PropTypes.node,
   columns: React.PropTypes.array,
   data: React.PropTypes.array,
+  style: React.PropTypes.object,
   title: React.PropTypes.string,
 };
 
diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js
index 4fe899ed..8ba65e76 100644
--- a/ui/src/components/table-simple-table/table.js
+++ b/ui/src/components/table-simple-table/table.js
@@ -15,19 +15,23 @@ const StyledTableWrapper = styled.section`
   border: solid 1px ${colors.base.greyDark}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
+	
+	${props => props.styles}
 `;
 
 const Table = ({
   children,
+  style,
   title,
 }) => (
-  <StyledTableWrapper>
+  <StyledTableWrapper styles={style}>
     {children}
   </StyledTableWrapper>
 );
 
 Table.propTypes = {
   children: React.PropTypes.node,
+  style: React.PropTypes.object,
   title: React.PropTypes.string,
 };
 
diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js
index f11d8aaa..07f95c36 100644
--- a/ui/src/components/textarea/index.js
+++ b/ui/src/components/textarea/index.js
@@ -22,6 +22,10 @@ const {
   default: styled
 } = Styled;
 
+const StyledDiv = styled.div`
+  ${props => props.styles}
+`;
+
 const Label = styled.label`
   color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
@@ -81,7 +85,7 @@ const Textarea = ({
   const _error = error ? (<Error>{error}</Error>) : null;
 
   return (
-    <div>
+    <StyledDiv styles={style}>
       <Label
         error={error}
         htmlFor={id}
@@ -112,7 +116,7 @@ const Textarea = ({
         value={value}
       />
       {_children}
-    </div>
+    </StyledDiv>
   );
 };
 
diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js
index f885792b..85c743e4 100644
--- a/ui/src/components/tooltip/index.js
+++ b/ui/src/components/tooltip/index.js
@@ -39,7 +39,7 @@ const StyledList = styled.ul`
   padding: ${remcalc(ulPadder)};
   min-width: ${remcalc(200)};
 
-  ${props => props.style}
+  ${props => props.styles}
 
   ${baseBox()}
 
@@ -86,7 +86,7 @@ module.exports = ({
     <StyledList
       arrowPosition={arrowPosition}
       className={className}
-      style={style}
+      styles={style}
     >
       {children}
     </StyledList>

From 730b8d27bef7b4cbbbb54a28d2d96eda67acc037 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Mon, 13 Feb 2017 12:09:29 +0000
Subject: [PATCH 3/4] updating ui components to removing props => props.style.
 HTML inline style is valid, but should be avoided.

---
 ui/src/components/avatar/index.js             |  4 +---
 ui/src/components/checkbox/index.js           |  4 +---
 ui/src/components/close/index.js              |  4 +---
 ui/src/components/nav-link/index.js           | 13 ++-----------
 ui/src/components/notification/index.js       |  3 +--
 ui/src/components/radio/index.js              |  7 ++-----
 ui/src/components/range-slider/index.js       |  4 +---
 ui/src/components/table-data-table/index.js   |  4 +---
 ui/src/components/table-simple-table/table.js |  4 +---
 ui/src/components/textarea/index.js           |  8 ++------
 10 files changed, 13 insertions(+), 42 deletions(-)

diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js
index 0ec2bff6..b43210a3 100644
--- a/ui/src/components/avatar/index.js
+++ b/ui/src/components/avatar/index.js
@@ -37,8 +37,6 @@ const Avatar = styled.div`
   overflow: hidden;
   position: relative;
   text-align: center;
-  
-  ${props => props.styles}
 `;
 
 module.exports = ({
@@ -79,7 +77,7 @@ module.exports = ({
   );
 
   return (
-    <Avatar className={className} styles={_style}>
+    <Avatar className={className} style={_style}>
       {av}
     </Avatar>
   );
diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js
index 6a8aaae5..15b0ce48 100644
--- a/ui/src/components/checkbox/index.js
+++ b/ui/src/components/checkbox/index.js
@@ -26,8 +26,6 @@ const StyledInput = styled.input`
   &:disabled + label::after {
     opacity: 0.3;
   }
-  
-  ${props => props.styles}
 `;
 
 const StyledLabel = styled.label`
@@ -94,7 +92,7 @@ const Checkbox = ({
         onChange={onChange}
         readOnly={readOnly}
         required={required}
-        styles={style}
+        style={style}
         tabIndex={tabIndex}
         type='checkbox'
       />
diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js
index 00e78635..d69296de 100644
--- a/ui/src/components/close/index.js
+++ b/ui/src/components/close/index.js
@@ -17,8 +17,6 @@ const StyledButton = styled.button`
   position: absolute;
   top: ${remcalc(16)};
   right: ${remcalc(16)};
-  
-  ${props => props.styles}
 `;
 
 const Close = ({
@@ -28,7 +26,7 @@ const Close = ({
   return (
     <StyledButton
       onClick={onClick}
-      styles={style}
+      style={style}
     >
       <img
         alt="Close"
diff --git a/ui/src/components/nav-link/index.js b/ui/src/components/nav-link/index.js
index dc14e28c..3b65ac58 100644
--- a/ui/src/components/nav-link/index.js
+++ b/ui/src/components/nav-link/index.js
@@ -2,21 +2,12 @@
 
 const React = require('react');
 const ReactRouter = require('react-router-dom');
-const Styled = require('styled-components');
-
-const {
-  default: styled
-} = Styled;
 
 const {
   Link,
   Route
 } = ReactRouter;
 
-const StyledLink = styled(Link)`
-  ${props => props.styles}
-`;
-
 const NavLink = ({
   activeClassName,
   activeStyle,
@@ -48,7 +39,7 @@ const NavLink = ({
       : className;
 
     return (
-      <StyledLink
+      <Link
         className={clssnm}
         // eslint-disable-next-line object-curly-newline
         style={isActive ? { ...style, ...activeStyle } : style}
@@ -56,7 +47,7 @@ const NavLink = ({
         {...rest}
       >
         {newChildren}
-      </StyledLink>
+      </Link>
     );
   };
 
diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js
index 83b108ca..619b559f 100644
--- a/ui/src/components/notification/index.js
+++ b/ui/src/components/notification/index.js
@@ -31,7 +31,6 @@ const StyledNotification = styled.div`
   width: 100%;
 
   ${baseBox(0)}
-  ${props => props.styles}
   
   &::before {
     background-color: ${props => colors[props.type] || colors.brandPrimary}
@@ -61,7 +60,7 @@ const Notificaton = ({
   return (
     <StyledNotification
       className={className}
-      styles={style}
+      style={style}
       type={type}
     >
       { renderClose  }
diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index 642317ca..cf1a77cc 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -31,10 +31,7 @@ const StyledInput = styled.input`
   }
 `;
 
-const StyledLabel = styled.label`
-
-  ${props => props.styles}
-`;
+const StyledLabel = styled.label``;
 
 const StyledContent = styled.div`
   margin-left: ${remcalc(45)};
@@ -84,7 +81,7 @@ const Radio = ({
 }) => {
 
   return (
-    <StyledLabel styles={style}>
+    <StyledLabel style={style}>
       <StyledInput
         checked={checked}
         defaultChecked={defaultChecked}
diff --git a/ui/src/components/range-slider/index.js b/ui/src/components/range-slider/index.js
index b102655f..0373bb59 100644
--- a/ui/src/components/range-slider/index.js
+++ b/ui/src/components/range-slider/index.js
@@ -127,8 +127,6 @@ const StyledRange = styled.input`
   &:focus::-ms-fill-upper {
     ${rangeUpper}
   }
-  
-  ${props => props.styles}
 `;
 
 const RangeSlider = ({
@@ -140,7 +138,7 @@ const RangeSlider = ({
     <StyledRange
       className={className}
       onChange={onChange}
-      styles={style}
+      style={style}
       type='range'
     />
   );
diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js
index 0989974d..461dd0da 100644
--- a/ui/src/components/table-data-table/index.js
+++ b/ui/src/components/table-data-table/index.js
@@ -14,8 +14,6 @@ const StyledTitle = styled.h3`
 const StyledTableWrapper = styled.section`
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
-	
-	${props => props.styles}
 `;
 
 const Table = ({
@@ -28,7 +26,7 @@ const Table = ({
 
   return (
 
-    <StyledTableWrapper styles={style}>
+    <StyledTableWrapper style={style}>
       <StyledTitle>{title}</StyledTitle>
 
       <TableContent
diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js
index 8ba65e76..80de0238 100644
--- a/ui/src/components/table-simple-table/table.js
+++ b/ui/src/components/table-simple-table/table.js
@@ -15,8 +15,6 @@ const StyledTableWrapper = styled.section`
   border: solid 1px ${colors.base.greyDark}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
-	
-	${props => props.styles}
 `;
 
 const Table = ({
@@ -24,7 +22,7 @@ const Table = ({
   style,
   title,
 }) => (
-  <StyledTableWrapper styles={style}>
+  <StyledTableWrapper style={style}>
     {children}
   </StyledTableWrapper>
 );
diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js
index 07f95c36..e8511276 100644
--- a/ui/src/components/textarea/index.js
+++ b/ui/src/components/textarea/index.js
@@ -22,10 +22,6 @@ const {
   default: styled
 } = Styled;
 
-const StyledDiv = styled.div`
-  ${props => props.styles}
-`;
-
 const Label = styled.label`
   color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
@@ -85,7 +81,7 @@ const Textarea = ({
   const _error = error ? (<Error>{error}</Error>) : null;
 
   return (
-    <StyledDiv styles={style}>
+    <div style={style}>
       <Label
         error={error}
         htmlFor={id}
@@ -116,7 +112,7 @@ const Textarea = ({
         value={value}
       />
       {_children}
-    </StyledDiv>
+    </div>
   );
 };
 

From da6835e97ea09bf7dd0178e14221863f4192fb88 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 15 Feb 2017 17:19:04 +0000
Subject: [PATCH 4/4] further removing inline styles

---
 frontend/src/components/people-list/invite.js | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js
index 4a0a8605..aa9b9576 100644
--- a/frontend/src/components/people-list/invite.js
+++ b/frontend/src/components/people-list/invite.js
@@ -72,10 +72,10 @@ const Invite = React.createClass({
 
     const {
       handleToggle,
-      // UI = {},
-      // people = [],
     } = this.props;
 
+    // TODO: When removing react-select css
+    // change this to styled-components format
     const InputStyle = {
       float: 'left',
       width: '75%',
@@ -84,14 +84,14 @@ const Invite = React.createClass({
       paddingTop: '10px'
     };
 
-    const AddButtonStyle = {
-      float: 'right',
-      width: '20%'
-    };
+    const StyledSubmitButton = styled(Button)`
+      float: right;
+      width: 20%;
+    `;
 
-    const styleInline = {
-      display: 'inline-block'
-    };
+    const StyledInlineButton = styled(Button)`
+      display: inline-block;
+    `;
 
     const selectData = this.getFormattedPlatformMembers();
 
@@ -121,30 +121,26 @@ const Invite = React.createClass({
                     value={this.state.selectValue}
                   />
                 </SelectWrapper>
-                <Button
+                <StyledSubmitButton
                   secondary
-                  style={AddButtonStyle}
                   type="submit"
                 >
                   Add
-                </Button>
+                </StyledSubmitButton>
               </form>
             </Column>
           </Row>
 
-          <Button
+          <StyledInlineButton
             onClick={handleToggle}
             secondary
-            style={styleInline}
           >
             Cancel
-          </Button>
+          </StyledInlineButton>
 
-          <Button
-            style={styleInline}
-          >
+          <StyledInlineButton>
             Send Invitation(s)
-          </Button>
+          </StyledInlineButton>
         </Column>
       </Row>
     );