feat(instances): CI - metadata resposive

packages/instance-steps/src/metadata/index.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react';
 import { Margin } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
+import { withTheme } from 'styled-components';
+
 import { compose } from 'react-apollo';
 import { Link } from 'react-router-dom';
 import ReduxForm from 'declarative-redux-form';
@@ -41,14 +43,18 @@ const Metadata = ({
   shouldAsyncValidate,
   handleAsyncValidate,
   handleChangeAddOpen,
+  theme = {},
   ...props
-}) => (
+}) => {
+  const mobile = theme.screen === 'mobile';
+
+  return (
     <Step name="metadata" getValue={handleGetValue} {...props}>
       <StepHeader icon={<MetadataIcon />}>Metadata</StepHeader>
       <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata">
-      Metadata can be used to pass data to the instance. It can also be used to
-      inject a custom boot script. Unlike tags, metadata is only viewable inside
-      the instance.
+        Metadata can be used to pass data to the instance. It can also be used
+        to inject a custom boot script. Unlike tags, metadata is only viewable
+        inside the instance.
       </StepDescription>
       <StepPreview>
         <Margin top="3">
@@ -99,9 +105,9 @@ const Metadata = ({
                   </Fragment>
                 ) : (
                   <Margin top="5">
-                  <Flex>
+                    <Flex column={mobile}>
                       <FlexItem>
-                      <Margin right="1">
+                        <Margin right={mobile ? '0' : '1'}>
                           <Button
                             id="button-add-metadata"
                             type="button"
@@ -113,14 +119,17 @@ const Metadata = ({
                         </Margin>
                       </FlexItem>
                       <FlexItem>
+                        <Margin top={mobile ? 1 : 0}>
                           <Button
                             id="next-button-metadata"
                             type="button"
                             component={Link}
                             to={next}
+                            fluid={mobile}
                           >
                             Next
                           </Button>
+                        </Margin>
                       </FlexItem>
                     </Flex>
                   </Margin>
@@ -131,7 +140,8 @@ const Metadata = ({
         )}
       </StepOutlet>
     </Step>
-);
+  );
+};
 
 export default compose(
   connect(({ values }, ownProps) => {
@@ -203,4 +213,4 @@ export default compose(
       ]);
     }
   }))
-)(Metadata);
+)(withTheme(({ ...rest }) => <Metadata {...rest} />));

packages/instance-steps/src/tags/index.js

@@ -55,8 +55,7 @@ const Tag = ({ name, value, onRemoveClick }) => (
   </Margin>
 );
 
-const TagsContainer = withTheme(
-  ({
+const TagsContainer = ({
   handleValidate,
   handleGetValue,
   preview = [],
@@ -70,7 +69,7 @@ const TagsContainer = withTheme(
   handleCancelEdit,
   theme = {},
   ...props
-  }) => {
+}) => {
   const mobile = theme.screen === 'mobile';
   return (
     <Step name="tags" getValue={handleGetValue} {...props}>
@@ -170,8 +169,7 @@ const TagsContainer = withTheme(
       </StepOutlet>
     </Step>
   );
-  }
-);
+};
 
 export default compose(
   connect(({ values }, ownProps) => {
@@ -225,4 +223,4 @@ export default compose(
       ]);
     }
   }))
-)(TagsContainer);
+)(withTheme(({ ...rest }) => <Metadata {...rest} />));

packages/resource-widgets/src/key-value/index.js

@@ -83,7 +83,8 @@ const TextareaKeyValue = ({
   submitting,
   onlyName,
   onlyValue,
-  editor
+  editor,
+  mobile
 }) => (
   <Fragment>
     {onlyValue ? null : (
@@ -97,7 +98,12 @@ const TextareaKeyValue = ({
           >
             <FormLabel>{titleCase(type)} key</FormLabel>
             <Margin top="0.5">
-              <Input onBlur={null} type="text" disabled={submitting} />
+              <Input
+                onBlur={null}
+                type="text"
+                disabled={submitting}
+                fluid={mobile}
+              />
               <Row>
                 <Col sm="7">
                   <FormMeta />
@@ -105,6 +111,7 @@ const TextareaKeyValue = ({
               </Row>
             </Margin>
           </FormGroup>
+          <Divider height={remcalc(12)} transparent />
         </Col>
       </Row>
     )}
@@ -133,6 +140,7 @@ const TextareaKeyValue = ({
               </Col>
             </Row>
           </FormGroup>
+          <Divider height={remcalc(12)} transparent />
         </Col>
       </Row>
     )}
@@ -149,7 +157,7 @@ const InputKeyValue = ({
   fluid = false
 }) => (
   <Flex wrap justifyStart contentStretch column={fluid}>
-    {!onlyValue ? (
+    {onlyValue ? null : (
       <FlexItem basis="auto">
         <FormGroup
           id={id ? 'kv-input-name-' + id : null}
@@ -170,7 +178,7 @@ const InputKeyValue = ({
           </Margin>
         </FormGroup>
       </FlexItem>
-    ) : null}
+    )}
     {onlyName ? null : (
       <Fragment>
         <FlexItem basis="auto">
@@ -198,8 +206,7 @@ const InputKeyValue = ({
   </Flex>
 );
 
-export const KeyValue = withTheme(
-  ({
+export const KeyValue = ({
   id = null,
   disabled = false,
   input = 'input',
@@ -216,6 +223,7 @@ export const KeyValue = withTheme(
   onToggleExpanded,
   onCancel = () => null,
   onRemove = () => null,
+  theme = {},
   editor = null,
   onlyName = false,
   onlyValue = false,
@@ -223,10 +231,8 @@ export const KeyValue = withTheme(
   borderless = false,
   shadow = true,
   customHeader,
-    headless = false,
-    noActions = false,
-    theme = {}
-  }) => {
+  headless = false
+}) => {
   const handleHeaderClick = method === 'edit' && onToggleExpanded;
   const mobile = theme.screen === 'mobile';
 
@@ -318,6 +324,7 @@ export const KeyValue = withTheme(
                 onlyName={onlyName}
                 onlyValue={onlyValue}
                 editor={editor}
+                mobile={mobile}
               />
             ) : null}
             {input !== 'textarea' && input !== 'input'
@@ -361,10 +368,10 @@ export const KeyValue = withTheme(
                       error
                       id={id ? 'kv-remove-button-' + id : null}
                     >
-                        <Margin right={2}>
+                      <Margin right="2">
                         <DeleteIcon
                           disabled={disabled || submitting}
-                            fill={disabled || submitting ? undefined : 'red'}
+                          fill={disabled || submitting ? undefined : theme.red}
                         />
                       </Margin>
                       <span>Delete</span>
@@ -373,14 +380,12 @@ export const KeyValue = withTheme(
                 )}
               </Row>
             </Margin>
-              )}
           </Padding>
         </CardOutlet>
       ) : null}
     </Card>
   );
-  }
-);
+};
 
 KeyValue.propTypes = {
   input: PropTypes.oneOf(['input', 'textarea']).isRequired,
@@ -397,8 +402,8 @@ KeyValue.propTypes = {
   onRemove: PropTypes.func
 };
 
-export default ({ handleSubmit, ...rest }) => (
+export default withTheme(({ handleSubmit, ...rest }) => (
   <form onSubmit={handleSubmit}>
     <KeyValue {...rest} />
   </form>
-);
+));