diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index dbea2bca..ddf6183b 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -15,6 +15,10 @@ exports[`renders
without throwing 1`] = `
}
.c31 {
+ padding: 1.125rem;
+}
+
+.c32 {
padding: 1.875rem;
}
@@ -929,12 +933,28 @@ exports[`renders
without throwing 1`] = `
disabled={false}
name="card-outlet"
>
-
- You haven't created any instances yet, but they're really easy to set up.
- Click above to get going.
-
+
+ You haven't created any instances yet, but they're really easy to set up.
+ Click above to get going.
+
+
+
+
+ You haven't created any instances yet, but they're really easy to set up.
+ Click above to get going.
+
+
@@ -959,6 +979,10 @@ exports[`renders
without throwing 1`] = `
}
.c38 {
+ padding: 1.125rem;
+}
+
+.c39 {
padding: 1.875rem;
}
@@ -1942,12 +1966,28 @@ exports[`renders
without throwing 1`] = `
disabled={false}
name="card-outlet"
>
-
- You haven't created any instances yet, but they're really easy to set up.
- Click above to get going.
-
+
+ You haven't created any instances yet, but they're really easy to set up.
+ Click above to get going.
+
+
+
+
+ You haven't created any instances yet, but they're really easy to set up.
+ Click above to get going.
+
+
diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index bcb576c8..59e88d81 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -33,6 +33,9 @@ import {
import GetRandomName from '../graphql/get-random-name.gql';
import { Forms, Values } from '../constants';
import { instanceName as validateName } from '../validators';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
const { IR_NAME_F } = Forms;
const { IR_NAME_V_USE_RANDOM } = Values;
@@ -61,7 +64,7 @@ const Name = ({
isValid={handleValidate(preview)}
{...props}
>
- }>Name this instance
+ }>Instance name
Your instance name will be used to identify this specific instance.
@@ -87,29 +90,57 @@ const Name = ({
Instance name
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index cc583d1e..79c5ea90 100644
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@@ -19,6 +19,10 @@ import {
import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
+
const Card = styled(BaseCard)`
${is('error')`
border: ${remcalc(1)} solid ${props => props.theme.redDark};
@@ -46,25 +50,29 @@ export const Header = ({ icon = null, children }) => (
-
- {icon}
-
+
+
+ {icon}
+
+
{children}
{/* improve this */}
- {optional ? (
-
-
-
-
-
-
-
- Optional
-
-
- ) : null}
+
+ {optional ? (
+
+
+
+
+
+
+
+ Optional
+
+
+ ) : null}
+
@@ -168,7 +176,12 @@ export default class Step extends PureComponent {
>
- {children}
+
+ {children}
+
+
+ {children}
+