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] 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>
   );
 };