From f356ee267c454e0dd993538e3383ed282254f2c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Wed, 23 May 2018 16:27:57 +0100
Subject: [PATCH] feat(instances): remove icon and optional from card headers
 on xs

---
 packages/instance-steps/src/name/index.js |  2 +-
 packages/resource-step/src/index.js       | 38 ++++++++++++++---------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index c998c5ad..59e88d81 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -64,7 +64,7 @@ const Name = ({
     isValid={handleValidate(preview)}
     {...props}
   >
-    <StepHeader icon={<NameIcon />}>Name this instance</StepHeader>
+    <StepHeader icon={<NameIcon />}>Instance name</StepHeader>
     <StepDescription>
       Your instance name will be used to identify this specific instance.
     </StepDescription>
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index cc583d1e..500fc417 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 { 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 }) => (
             <Flex justifyBetween>
               <FlexItem>
                 <Flex alignCenter>
-                  <FlexItem>
-                    <Margin right="2">{icon}</Margin>
-                  </FlexItem>
+                  <Medium>
+                    <FlexItem>
+                      <Margin right="2">{icon}</Margin>
+                    </FlexItem>
+                  </Medium>
                   <FlexItem>
                     <H3 bold>{children}</H3>
                   </FlexItem>
                   {/* improve this */}
-                  {optional ? (
-                    <Fragment>
-                      <FlexItem>
-                        <Margin horizontal="1">
-                          <Divider vertical />
-                        </Margin>
-                      </FlexItem>
-                      <FlexItem>
-                        <P optional>Optional</P>
-                      </FlexItem>
-                    </Fragment>
-                  ) : null}
+                  <Medium>
+                    {optional ? (
+                      <Fragment>
+                        <FlexItem>
+                          <Margin horizontal="1">
+                            <Divider vertical />
+                          </Margin>
+                        </FlexItem>
+                        <FlexItem>
+                          <P optional>Optional</P>
+                        </FlexItem>
+                      </Fragment>
+                    ) : null}
+                  </Medium>
                 </Flex>
               </FlexItem>
               <FlexItem alignCenter>