moving overriding styles into style-component format

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

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

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

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>
 

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