feat(instances): user scripts responsive designs

packages/instance-steps/src/user-script/index.js

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