feat(instances): user scripts responsive designs

This commit is contained in:
Fábio Moreira 2018-05-30 15:02:29 +01:00 committed by Sérgio Ramos
parent cad1431e79
commit deb1a8436f

View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
import { withTheme } from 'styled-components';
import { Margin } from 'styled-components-spacing';
import { compose } from 'react-apollo';
import { Link } from 'react-router-dom';
@ -30,8 +31,11 @@ const UserScript = ({
handleChangeOpenForm,
handleSubmit,
handleEdit,
theme = {},
...props
}) => (
}) => {
const mobile = theme.screen === 'mobile';
return (
<Step name="user-script" getValue={handleGetValue} {...props}>
<StepHeader icon={<ScriptIcon />}>User script</StepHeader>
<StepDescription href="https://docs.joyent.com/private-cloud/instances/using-mdata#UsingtheMetadataAPI-ListofMetadataKeys">
@ -53,12 +57,13 @@ const UserScript = ({
{props => (
<Fragment>
<UserScriptForm {...props} />
<Margin top="5">
<Margin top={mobile ? '3' : '5'}>
<Button
id="next-button-userscript"
type="button"
component={Link}
to={next}
fluid={mobile}
>
Next
</Button>
@ -71,6 +76,7 @@ const UserScript = ({
</StepOutlet>
</Step>
);
};
export default compose(
connect(
@ -100,4 +106,4 @@ export default compose(
}
})
)
)(UserScript);
)(withTheme(({ ...rest }) => <UserScript {...rest} />));