Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

moving overriding styles into style-component format

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/new-project/billing.js
View File

@ -6,12 +6,17 @@ const constants = require('@ui/shared/constants');
const fns = require('@ui/shared/functions'); const fns = require('@ui/shared/functions');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const BaseElements = require('@ui/components/base-elements');
const Card = require('@ui/components/payment-card'); const Card = require('@ui/components/payment-card');
const { const {
FormattedMessage FormattedMessage
} = ReactIntl; } = ReactIntl;
const {
H2,
} = BaseElements;
const { const {
default: styled default: styled
} = Styled; } = Styled;
@ -35,7 +40,7 @@ const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)}; padding: ${remcalc(96)} ${remcalc(40)};
`; `;
const Title = styled.h2` const Title = styled(H2)`
margin: 0 0 ${remcalc(18)} 0; margin: 0 0 ${remcalc(18)} 0;
font-size: ${remcalc(36)}; font-size: ${remcalc(36)};
color: ${colors.brandSecondaryColor}; color: ${colors.brandSecondaryColor};

7
frontend/src/components/new-project/index.js
View File

@ -8,6 +8,11 @@ const fns = require('@ui/shared/functions');
const Input = require('@ui/components/input'); const Input = require('@ui/components/input');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const BaseElements = require('@ui/components/base-elements');
const {
H2,
} = BaseElements;
const { const {
Field Field
@ -33,7 +38,7 @@ const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)}; padding: ${remcalc(96)} ${remcalc(40)};
`; `;
const Title = styled.h2` const Title = styled(H2)`
margin: 0 0 ${remcalc(18)} 0; margin: 0 0 ${remcalc(18)} 0;
font-size: ${remcalc(36)}; font-size: ${remcalc(36)};
color: ${colors.brandSecondaryColor}; color: ${colors.brandSecondaryColor};

7
frontend/src/components/new-project/new-billing.js
View File

@ -8,6 +8,11 @@ const fns = require('@ui/shared/functions');
const Input = require('@ui/components/input'); const Input = require('@ui/components/input');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const BaseElements = require('@ui/components/base-elements');
const {
H2,
} = BaseElements;
const { const {
Field Field
@ -33,7 +38,7 @@ const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)}; padding: ${remcalc(96)} ${remcalc(40)};
`; `;
const Title = styled.h2` const Title = styled(H2)`
margin: 0 0 ${remcalc(18)} 0; margin: 0 0 ${remcalc(18)} 0;
font-size: ${remcalc(36)}; font-size: ${remcalc(36)};
color: ${colors.brandSecondaryColor}; color: ${colors.brandSecondaryColor};

16
frontend/src/components/people-list/index.js
View File

@ -1,4 +1,5 @@
const React = require('react'); const React = require('react');
const Styled = require('styled-components');
const Empty = require('@components/empty/people'); const Empty = require('@components/empty/people');
@ -9,9 +10,13 @@ const Button = require('@ui/components/button');
const PeopleTable = require('./table'); const PeopleTable = require('./table');
const Invite = require('./invite'); const Invite = require('./invite');
const buttonStyle = { const {
float: 'right' default: styled
}; } = Styled;
const StyledButton = styled(Button)`
float: right;
`;
const People = (props) => { const People = (props) => {
const { const {
@ -24,13 +29,12 @@ const People = (props) => {
<div> <div>
<Row> <Row>
<Column md={2} mdOffset={9}> <Column md={2} mdOffset={9}>
<Button <StyledButton
disabled={UI.invite_toggled} disabled={UI.invite_toggled}
onClick={handleToggle} onClick={handleToggle}
style={buttonStyle}
> >
Invite Invite
</Button> </StyledButton>
</Column> </Column>
</Row> </Row>

22
frontend/src/components/people-list/table/tooltip.js
View File

@ -1,13 +1,18 @@
const React = require('react'); const React = require('react');
const Styled = require('styled-components');
const Tooltip = require('@ui/components/tooltip'); 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 = { const arrowPosition = {
bottom: '100%', bottom: '100%',
@ -51,13 +56,12 @@ module.exports = ({
}); });
return ( return (
<Tooltip <StyledTooltip
arrowPosition={arrowPosition} arrowPosition={arrowPosition}
key={person.uuid} key={person.uuid}
style={tooltipStyle}
> >
{_options} {_options}
</Tooltip> </StyledTooltip>
); );
}; };