Merge pull request #243 from yldio/fix/inline-styles

Removing HTML inline styling

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 = {
+const {
-  float: 'right'
+  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/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 = {
+    const StyledSubmitButton = styled(Button)`
-      float: 'right',
+      float: right;
-      width: '20%'
+      width: 20%;
-    };
+    `;
 
-    const styleInline = {
+    const StyledInlineButton = styled(Button)`
-      display: 'inline-block'
+      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
+          <StyledInlineButton>
-            style={styleInline}
-          >
             Send Invitation(s)
-          </Button>
+          </StyledInlineButton>
         </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 = {
+const {
-  position: 'absolute',
+  default: styled
-  top: '30px',
+} = Styled;
-  zIndex: 1,
+
-  right: '-36px',
+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>
   );
 };
 

ui/src/components/close/index.js

@@ -17,18 +17,14 @@ const StyledButton = styled.button`
   position: absolute;
   top: ${remcalc(16)};
   right: ${remcalc(16)};
-  
-  ${props => props.customStyles ? props.customStyles : null}
 `;
 
 const Close = ({
   style,
   onClick,
-  customStyles = ''
 }) => {
   return (
     <StyledButton
-      customStyles={customStyles}
       onClick={onClick}
       style={style}
     >
@@ -41,7 +37,6 @@ const Close = ({
 };
 
 Close.propTypes = {
-  customStyles: React.PropTypes.string,
   onClick: React.PropTypes.func,
   style: React.PropTypes.object
 };

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;

ui/src/components/radio-group/style.css

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

ui/src/components/radio/index.js

@@ -31,8 +31,7 @@ const StyledInput = styled.input`
   }
 `;
 
-const StyledLabel = styled.label`
+const StyledLabel = styled.label``;
-`;
 
 const StyledContent = styled.div`
   margin-left: ${remcalc(45)};
@@ -82,7 +81,7 @@ const Radio = ({
 }) => {
 
   return (
-    <StyledLabel>
+    <StyledLabel style={style}>
       <StyledInput
         checked={checked}
         defaultChecked={defaultChecked}

ui/src/components/table-data-table/index.js

@@ -20,12 +20,13 @@ const Table = ({
   children,
   columns = [],
   data = [],
+  style,
   title,
 }) => {
 
   return (
 
-    <StyledTableWrapper>
+    <StyledTableWrapper style={style}>
       <StyledTitle>{title}</StyledTitle>
 
       <TableContent
@@ -40,6 +41,7 @@ Table.propTypes = {
   children: React.PropTypes.node,
   columns: React.PropTypes.array,
   data: React.PropTypes.array,
+  style: React.PropTypes.object,
   title: React.PropTypes.string,
 };
 

ui/src/components/table-simple-table/table.js

@@ -19,15 +19,17 @@ const StyledTableWrapper = styled.section`
 
 const Table = ({
   children,
+  style,
   title,
 }) => (
-  <StyledTableWrapper>
+  <StyledTableWrapper style={style}>
     {children}
   </StyledTableWrapper>
 );
 
 Table.propTypes = {
   children: React.PropTypes.node,
+  style: React.PropTypes.object,
   title: React.PropTypes.string,
 };
 

ui/src/components/textarea/index.js

@@ -81,7 +81,7 @@ const Textarea = ({
   const _error = error ? (<Error>{error}</Error>) : null;
 
   return (
-    <div>
+    <div style={style}>
       <Label
         error={error}
         htmlFor={id}

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>