feat(instances): remove icon and optional from card headers on xs
This commit is contained in:
parent
7e8bf570b8
commit
f356ee267c
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user