fix(my-joy-beta): show top border on <Empty /> when not in list

This commit is contained in:
Sérgio Ramos 2018-02-26 13:47:37 +00:00 committed by Sérgio Ramos
parent 486fd8664f
commit de5e7e9663
6 changed files with 18 additions and 9 deletions

View File

@ -2,6 +2,8 @@ import React from 'react';
import styled from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { isNot } from 'styled-is';
import remcalc from 'remcalc';
import { H3, Card } from 'joyent-ui-toolkit';
import { NoPackages } from 'joyent-logo-assets';
@ -12,12 +14,15 @@ const NoPackagesTitle = styled(H3)`
`;
const FullWidthCard = styled(Card)`
width: calc(100% - 2px);
border-top: none;
width: calc(100% - ${remcalc(2)});
${isNot('borderTop')`
border-top: none;
`};
`;
export default ({ children }) => (
<FullWidthCard>
export default ({ children, ...rest }) => (
<FullWidthCard {...rest}>
<Padding all={6}>
<Flex alignCenter justifyCenter column>
<Margin bottom={2}>

View File

@ -184,6 +184,6 @@ export default ({
: null}
</TableTbody>
</Table>
{!snapshots.length ? <Empty>You have no Snapshots</Empty> : null}
{!snapshots.length ? <Empty borderTop>You have no Snapshots</Empty> : null}
</Fragment>
);

View File

@ -95,7 +95,9 @@ const Firewall = ({
!defaultRules.length &&
!tagRules.length ? (
<Margin top={4}>
<Empty>Sorry, but we werent able to find any firewall rules.</Empty>
<Empty borderTop>
Sorry, but we werent able to find any firewall rules.
</Empty>
</Margin>
) : null}
{!loading && expanded && enabled && defaultRules.length ? (

View File

@ -112,7 +112,9 @@ export const Firewall = ({
</ReduxForm>
{!loading && !defaultRules.length && !tagRules.length ? (
<Margin top={5}>
<Empty>Sorry, but we werent able to find any firewall rules.</Empty>
<Empty borderTop>
Sorry, but we werent able to find any firewall rules.
</Empty>
</Margin>
) : null}
{!loading && enabled && defaultRules.length ? (

View File

@ -131,7 +131,7 @@ export const List = ({
!loading && !_instances.length ? (
<Empty>
{filter
? 'You have no Images that match your query'
? 'You have no Instances that match your query'
: `You haven't created any instances yet, but they're really easy to set up.
Click above to get going.`}
</Empty>

View File

@ -39,7 +39,7 @@ export const UserScript = ({ metadata, loading = false, error = null }) => (
<Editor defaultValue={metadata.value} readOnly />
) : null}
{!loading && !error && !metadata ? (
<Empty>No User Script defined</Empty>
<Empty borderTop>No User Script defined</Empty>
) : null}
</ViewContainer>
);