From de5e7e96630067f818aff75cdbfe9a19a082fcf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Mon, 26 Feb 2018 13:47:37 +0000
Subject: [PATCH] fix(my-joy-beta): show top border on <Empty /> when not in
 list

---
 packages/my-joy-beta/src/components/empty.js        | 13 +++++++++----
 .../src/components/instances/snapshots.js           |  2 +-
 .../src/containers/create-instance/firewall.js      |  4 +++-
 .../src/containers/instances/firewall.js            |  4 +++-
 .../my-joy-beta/src/containers/instances/list.js    |  2 +-
 .../src/containers/instances/user-script.js         |  2 +-
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/my-joy-beta/src/components/empty.js b/packages/my-joy-beta/src/components/empty.js
index c3d9f8f6..c91ef68a 100644
--- a/packages/my-joy-beta/src/components/empty.js
+++ b/packages/my-joy-beta/src/components/empty.js
@@ -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}>
diff --git a/packages/my-joy-beta/src/components/instances/snapshots.js b/packages/my-joy-beta/src/components/instances/snapshots.js
index b8aaaa70..239e24c4 100644
--- a/packages/my-joy-beta/src/components/instances/snapshots.js
+++ b/packages/my-joy-beta/src/components/instances/snapshots.js
@@ -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>
 );
diff --git a/packages/my-joy-beta/src/containers/create-instance/firewall.js b/packages/my-joy-beta/src/containers/create-instance/firewall.js
index 07605edd..649b1754 100644
--- a/packages/my-joy-beta/src/containers/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js
@@ -95,7 +95,9 @@ const Firewall = ({
     !defaultRules.length &&
     !tagRules.length ? (
       <Margin top={4}>
-        <Empty>Sorry, but we weren’t able to find any firewall rules.</Empty>
+        <Empty borderTop>
+          Sorry, but we weren’t able to find any firewall rules.
+        </Empty>
       </Margin>
     ) : null}
     {!loading && expanded && enabled && defaultRules.length ? (
diff --git a/packages/my-joy-beta/src/containers/instances/firewall.js b/packages/my-joy-beta/src/containers/instances/firewall.js
index bc6d93d8..0d4dea2f 100644
--- a/packages/my-joy-beta/src/containers/instances/firewall.js
+++ b/packages/my-joy-beta/src/containers/instances/firewall.js
@@ -112,7 +112,9 @@ export const Firewall = ({
     </ReduxForm>
     {!loading && !defaultRules.length && !tagRules.length ? (
       <Margin top={5}>
-        <Empty>Sorry, but we weren’t able to find any firewall rules.</Empty>
+        <Empty borderTop>
+          Sorry, but we weren’t able to find any firewall rules.
+        </Empty>
       </Margin>
     ) : null}
     {!loading && enabled && defaultRules.length ? (
diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js
index 1d737877..961bc16c 100644
--- a/packages/my-joy-beta/src/containers/instances/list.js
+++ b/packages/my-joy-beta/src/containers/instances/list.js
@@ -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>
diff --git a/packages/my-joy-beta/src/containers/instances/user-script.js b/packages/my-joy-beta/src/containers/instances/user-script.js
index 36f3582d..42f9c060 100644
--- a/packages/my-joy-beta/src/containers/instances/user-script.js
+++ b/packages/my-joy-beta/src/containers/instances/user-script.js
@@ -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>
 );