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

View File

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

View File

@ -95,7 +95,9 @@ const Firewall = ({
!defaultRules.length && !defaultRules.length &&
!tagRules.length ? ( !tagRules.length ? (
<Margin top={4}> <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> </Margin>
) : null} ) : null}
{!loading && expanded && enabled && defaultRules.length ? ( {!loading && expanded && enabled && defaultRules.length ? (

View File

@ -112,7 +112,9 @@ export const Firewall = ({
</ReduxForm> </ReduxForm>
{!loading && !defaultRules.length && !tagRules.length ? ( {!loading && !defaultRules.length && !tagRules.length ? (
<Margin top={5}> <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> </Margin>
) : null} ) : null}
{!loading && enabled && defaultRules.length ? ( {!loading && enabled && defaultRules.length ? (

View File

@ -131,7 +131,7 @@ export const List = ({
!loading && !_instances.length ? ( !loading && !_instances.length ? (
<Empty> <Empty>
{filter {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. : `You haven't created any instances yet, but they're really easy to set up.
Click above to get going.`} Click above to get going.`}
</Empty> </Empty>

View File

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