moving overriding styles into style-component format

This commit is contained in:
Alex Windett 2017-02-13 11:59:29 +00:00
parent d7cadc384f
commit 7b54efb036
5 changed files with 41 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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

View File

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