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

updating empty service component

Browse Source
This commit is contained in:
Alex Windett 2017-02-06 15:30:33 +00:00
parent 9c0cbd8556
commit a4b6f64c39
1 changed files with 61 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/components/empty/services.js
View File

@ -1,13 +1,25 @@
const React = require('react'); const React = require('react');
const ReactIntl = require('react-intl'); const ReactIntl = require('react-intl');
const Styled = require('styled-components');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const Column = require('@ui/components/column'); const Column = require('@ui/components/column');
const Row = require('@ui/components/row'); const Row = require('@ui/components/row');
const BaseElements = require('@ui/components/base-elements'); const BaseElements = require('@ui/components/base-elements');
const fns = require('@ui/shared/functions');
const {
default: styled
} = Styled;
const {
remcalc,
} = fns;
const { const {
P, P,
H2,
H3, H3,
} = BaseElements; } = BaseElements;
@ -15,34 +27,60 @@ const {
FormattedMessage FormattedMessage
} = ReactIntl; } = ReactIntl;
const StyledBox = styled.div`
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
border: solid 1px #d8d8d8;
padding: ${remcalc('6 18 24')};
& + & {
margin-top: ${remcalc(24)};
}
`;
module.exports = () => ( module.exports = () => (
<div> <div>
<Row name='empty-services'> <Row name='empty-services'>
<Column md={6} xs={12}> <Column>
<H3> <H2>
<FormattedMessage id='add-services' /> <FormattedMessage id='services' />
</H3> </H2>
<P>
<FormattedMessage id='no-services' />
</P>
</Column>
</Row>
<Row>
<Column xs={12}>
<Button>
<FormattedMessage id='edit-project-manifest' />
</Button>
</Column>
</Row>
<Row>
<Column xs={12}>
<P>
<FormattedMessage id='or-bring-in-from' />
</P>
<Button secondary>GitHub</Button> <Row>
<Button secondary>BitBucket</Button> <Column>
<StyledBox>
<Row>
<Column md={10}>
<H3>
<FormattedMessage id='import-services-title' />
</H3>
<P>
<FormattedMessage id='import-services-body' />
</P>
<Button secondary>from GitHub</Button>
<Button secondary>from GitLab</Button>
<Button secondary>from BitBucket</Button>
</Column>
</Row>
</StyledBox>
<StyledBox>
<Row>
<Column md={9}>
<H3>
<FormattedMessage id='alt-import-services-title' />
</H3>
<P>
<FormattedMessage id='alt-import-services-body' />
</P>
<Button secondary>Upload manifest</Button>
<Button secondary>Edit manifest</Button>
</Column>
</Row>
</StyledBox>
</Column>
</Row>
</Column> </Column>
</Row> </Row>
</div> </div>