feat(instances): remove icon and optional from card headers on xs

This commit is contained in:
Fábio Moreira 2018-05-23 16:27:57 +01:00
parent 7e8bf570b8
commit f356ee267c
2 changed files with 24 additions and 16 deletions

View File

@ -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>

View File

@ -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>