feat(instances): Firewall empty state update, more QA

consoles/my-joy-images/src/components/empty.js

@@ -4,7 +4,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 
 import { H3, Card } from 'joyent-ui-toolkit';
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
@@ -20,7 +20,7 @@ export default ({ children }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -236,7 +236,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -338,7 +337,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -461,7 +459,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -580,7 +577,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -727,7 +723,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2304,7 +2299,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2406,7 +2400,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2529,7 +2522,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2648,7 +2640,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2749,7 +2740,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2846,7 +2836,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2971,7 +2960,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4765,7 +4753,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4867,7 +4854,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4990,7 +4976,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5109,7 +5094,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5210,7 +5194,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5307,7 +5290,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5432,7 +5414,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7267,7 +7248,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7369,7 +7349,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7492,7 +7471,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7611,7 +7589,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7758,7 +7735,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9371,7 +9347,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9473,7 +9448,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9596,7 +9570,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9715,7 +9688,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9816,7 +9788,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9913,7 +9884,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -10038,7 +10008,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11594,7 +11563,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11696,7 +11664,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11819,7 +11786,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11938,7 +11904,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -12039,7 +12004,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -12136,7 +12100,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -12261,7 +12224,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -13817,7 +13779,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -13919,7 +13880,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -14042,7 +14002,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -14161,7 +14120,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -14308,7 +14266,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -89,7 +89,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -384,7 +383,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -679,7 +677,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -996,7 +993,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1291,7 +1287,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1586,7 +1581,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1881,7 +1875,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

consoles/my-joy-instances/src/components/instances/summary.js

@@ -124,7 +124,7 @@ export const Meta = ({
                     loading={submitting}
                     inline
                   >
-                    Add
+                    Save
                   </Button>
                 </Margin>
               </Flex>

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -83,7 +83,6 @@ exports[`renders <List /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1022,7 +1021,6 @@ exports[`renders <List error /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2028,7 +2026,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3568,7 +3565,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3645,7 +3641,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3768,7 +3763,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3886,7 +3880,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4033,7 +4026,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6092,7 +6084,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6169,7 +6160,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6292,7 +6282,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6410,7 +6399,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6557,7 +6545,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8616,7 +8603,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8693,7 +8679,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8816,7 +8801,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8934,7 +8918,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9081,7 +9064,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9223,7 +9205,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9324,7 +9305,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11308,7 +11288,6 @@ exports[`renders <List loading /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap

@@ -227,227 +227,289 @@ exports[`renders <Networks /> without throwing 1`] = `
           className="c12"
         >
           <svg
-            height={60}
-            viewBox="0 0 79 60"
-            width={79}
+            height={109}
+            viewBox="0 0 119.34 109.47"
+            width={119}
             xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink"
           >
-            <title>
-              Guilty_Salamander
-            </title>
-            <desc>
-              Created using Figma
-            </desc>
-            <use
-              fill="#FAA427"
-              transform="translate(23.8 22)"
-              xlinkHref="#a"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(27.3 25.5)"
-              xlinkHref="#b"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(4.8 32.1)"
-              xlinkHref="#c"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(12.2 31.8)"
-              xlinkHref="#d"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(54.4 31.9)"
-              xlinkHref="#e"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(54.4 32)"
-              xlinkHref="#f"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(15.8 26.8)"
-              xlinkHref="#g"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(5)"
-              xlinkHref="#h"
-            />
-            <use
-              fill="#FAFBFC"
-              transform="rotate(-15.13 41.037 5.45)"
-              xlinkHref="#i"
-            />
-            <use
-              fill="#412B13"
-              transform="rotate(-15.13 67.273 -24.78)"
-              xlinkHref="#j"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(2.2 8)"
-              xlinkHref="#k"
-            />
-            <use
-              fill="#FAFBFC"
-              transform="rotate(-74.87 40.46 -20.511)"
-              xlinkHref="#l"
-            />
-            <use
-              fill="#412B13"
-              transform="rotate(-74.87 41.364 -22.098)"
-              xlinkHref="#m"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(52.1 8)"
-              xlinkHref="#n"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(31.5 34.3)"
-              xlinkHref="#o"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(14.3)"
-              xlinkHref="#p"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(30.9 18.9)"
-              xlinkHref="#q"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(37.6 18.9)"
-              xlinkHref="#r"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(27.4 53.9)"
-              xlinkHref="#s"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(39.1 53.9)"
-              xlinkHref="#t"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(27.4 53.9)"
-              xlinkHref="#u"
-            />
-            <use
-              fill="#342013"
-              transform="translate(28.6 26.2)"
-              xlinkHref="#v"
-            />
-            <use
-              fill="#FFF"
-              transform="translate(32.6 28.7)"
-              xlinkHref="#w"
-            />
             <defs>
-              <path
-                d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                id="a"
-              />
-              <path
-                d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                id="b"
-              />
-              <path
-                d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                id="c"
-              />
-              <path
-                d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                id="d"
-              />
-              <path
-                d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                id="e"
-              />
-              <path
-                d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                id="f"
-              />
-              <path
-                d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                id="g"
-              />
-              <path
-                d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                id="h"
-              />
-              <path
-                d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                id="i"
-              />
-              <path
-                d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                id="j"
-              />
-              <path
-                d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                id="k"
-              />
-              <path
-                d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                id="l"
-              />
-              <path
-                d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                id="m"
-              />
-              <path
-                d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                id="n"
-              />
-              <path
-                d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                id="o"
-              />
-              <path
-                d="M0 0l22.258 18.498L44.516 0H0z"
-                id="p"
-              />
-              <path
-                d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                id="q"
-              />
-              <path
-                d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                id="r"
-              />
-              <path
-                d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                id="s"
-              />
-              <path
-                d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                id="t"
-              />
-              <path
-                d="M31.328 0H0v1.474h31.328V0z"
-                id="u"
-              />
-              <path
-                d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                id="v"
-              />
-              <path
-                d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                id="w"
+              <style
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                  }
+                }
               />
+              <radialGradient
+                cx="208.79"
+                cy="99.06"
+                gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient"
+                r="57.13"
+              >
+                <stop
+                  offset="0.05"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.1"
+                  stopColor="#415f72"
+                />
+                <stop
+                  offset="0.13"
+                  stopColor="#3a5769"
+                />
+                <stop
+                  offset="0.16"
+                  stopColor="#2e4959"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1d3543"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.26"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.32"
+                  stopColor="#274150"
+                />
+                <stop
+                  offset="0.39"
+                  stopColor="#365364"
+                />
+                <stop
+                  offset="0.43"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.49"
+                  stopColor="#3f5d6f"
+                />
+                <stop
+                  offset="0.56"
+                  stopColor="#324e5f"
+                />
+                <stop
+                  offset="0.65"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.66"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.9"
+                  stopColor="#2c4656"
+                />
+                <stop
+                  offset="0.95"
+                  stopColor="#436275"
+                />
+              </radialGradient>
+              <radialGradient
+                cx="59.15"
+                cy="56.86"
+                gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-2"
+                r="46.01"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.1"
+                  stopColor="#426073"
+                />
+                <stop
+                  offset="0.13"
+                  stopColor="#3c5a6c"
+                />
+                <stop
+                  offset="0.16"
+                  stopColor="#344f61"
+                />
+                <stop
+                  offset="0.18"
+                  stopColor="#274050"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.26"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.32"
+                  stopColor="#274150"
+                />
+                <stop
+                  offset="0.39"
+                  stopColor="#365364"
+                />
+                <stop
+                  offset="0.43"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.49"
+                  stopColor="#3f5d6f"
+                />
+                <stop
+                  offset="0.56"
+                  stopColor="#324e5f"
+                />
+                <stop
+                  offset="0.65"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.66"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.92"
+                  stopColor="#2c4656"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                />
+              </radialGradient>
+              <radialGradient
+                cx="-521.06"
+                cy="366.16"
+                gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-3"
+                r="32.44"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.02"
+                  stopColor="#436275"
+                  stopOpacity="0.97"
+                />
+                <stop
+                  offset="0.34"
+                  stopColor="#436275"
+                  stopOpacity="0.55"
+                />
+                <stop
+                  offset="0.62"
+                  stopColor="#436275"
+                  stopOpacity="0.25"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#436275"
+                  stopOpacity="0.07"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                  stopOpacity={0}
+                />
+              </radialGradient>
+              <radialGradient
+                cx="-136.43"
+                cy="140.9"
+                gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-4"
+                r="54.82"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.58"
+                  stopColor="#436275"
+                  stopOpacity="0.4"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                  stopOpacity={0}
+                />
+              </radialGradient>
             </defs>
+            <title>
+              Empty-state-illustration
+            </title>
+            <g
+              data-name="Layer 2"
+              id="Layer_2"
+            >
+              <g
+                data-name="Layer 1"
+                id="Layer_1-2"
+              >
+                <g
+                  className="cls-1"
+                >
+                  <path
+                    className="cls-2"
+                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                  />
+                </g>
+                <g
+                  className="cls-1"
+                >
+                  <path
+                    className="cls-3"
+                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                  />
+                </g>
+                <circle
+                  className="cls-4"
+                  cx="23.53"
+                  cy="73.77"
+                  r="11.93"
+                />
+                <circle
+                  className="cls-5"
+                  cx="23.53"
+                  cy="73.77"
+                  r="11.93"
+                />
+                <circle
+                  className="cls-6"
+                  cx="61.95"
+                  cy="55.24"
+                  r="34.25"
+                />
+                <circle
+                  className="cls-7"
+                  cx="61.95"
+                  cy="55.24"
+                  r="34.25"
+                />
+              </g>
+            </g>
           </svg>
         </div>
         <h3

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -952,7 +952,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1054,7 +1053,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1177,7 +1175,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1296,7 +1293,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1397,7 +1393,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1494,7 +1489,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1619,7 +1613,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3454,7 +3447,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3556,7 +3548,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3679,7 +3670,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3798,7 +3788,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3899,7 +3888,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3996,7 +3984,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4121,7 +4108,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

packages/icons/src/empty-state.js

@@ -0,0 +1,126 @@
+import React from 'react';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  colors = {},
+  ...rest
+}) => (
+  <svg
+    width={119}
+    height={109}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 119.34 109.47"
+  >
+    <defs>
+      <style
+        dangerouslySetInnerHTML={{
+          __html:
+            '.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}'
+        }}
+      />
+      <radialGradient
+        id="radial-gradient"
+        cx="208.79"
+        cy="99.06"
+        r="57.13"
+        gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.05" stopColor="#436275" />
+        <stop offset="0.1" stopColor="#415f72" />
+        <stop offset="0.13" stopColor="#3a5769" />
+        <stop offset="0.16" stopColor="#2e4959" />
+        <stop offset="0.19" stopColor="#1d3543" />
+        <stop offset="0.19" stopColor="#1b3240" />
+        <stop offset="0.26" stopColor="#1e3644" />
+        <stop offset="0.32" stopColor="#274150" />
+        <stop offset="0.39" stopColor="#365364" />
+        <stop offset="0.43" stopColor="#436275" />
+        <stop offset="0.49" stopColor="#3f5d6f" />
+        <stop offset="0.56" stopColor="#324e5f" />
+        <stop offset="0.65" stopColor="#1e3644" />
+        <stop offset="0.66" stopColor="#1b3240" />
+        <stop offset="0.85" stopColor="#1b3240" />
+        <stop offset="0.9" stopColor="#2c4656" />
+        <stop offset="0.95" stopColor="#436275" />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-2"
+        cx="59.15"
+        cy="56.86"
+        r="46.01"
+        gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.1" stopColor="#426073" />
+        <stop offset="0.13" stopColor="#3c5a6c" />
+        <stop offset="0.16" stopColor="#344f61" />
+        <stop offset="0.18" stopColor="#274050" />
+        <stop offset="0.19" stopColor="#1b3240" />
+        <stop offset="0.26" stopColor="#1e3644" />
+        <stop offset="0.32" stopColor="#274150" />
+        <stop offset="0.39" stopColor="#365364" />
+        <stop offset="0.43" stopColor="#436275" />
+        <stop offset="0.49" stopColor="#3f5d6f" />
+        <stop offset="0.56" stopColor="#324e5f" />
+        <stop offset="0.65" stopColor="#1e3644" />
+        <stop offset="0.66" stopColor="#1b3240" />
+        <stop offset="0.85" stopColor="#1b3240" />
+        <stop offset="0.92" stopColor="#2c4656" />
+        <stop offset={1} stopColor="#436275" />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-3"
+        cx="-521.06"
+        cy="366.16"
+        r="32.44"
+        gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.02" stopColor="#436275" stopOpacity="0.97" />
+        <stop offset="0.34" stopColor="#436275" stopOpacity="0.55" />
+        <stop offset="0.62" stopColor="#436275" stopOpacity="0.25" />
+        <stop offset="0.85" stopColor="#436275" stopOpacity="0.07" />
+        <stop offset={1} stopColor="#436275" stopOpacity={0} />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-4"
+        cx="-136.43"
+        cy="140.9"
+        r="54.82"
+        gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.58" stopColor="#436275" stopOpacity="0.4" />
+        <stop offset={1} stopColor="#436275" stopOpacity={0} />
+      </radialGradient>
+    </defs>
+    <title>Empty-state-illustration</title>
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g className="cls-1">
+          <path
+            className="cls-2"
+            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+          />
+        </g>
+        <g className="cls-1">
+          <path
+            className="cls-3"
+            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+          />
+        </g>
+        <circle className="cls-4" cx="23.53" cy="73.77" r="11.93" />
+        <circle className="cls-5" cx="23.53" cy="73.77" r="11.93" />
+        <circle className="cls-6" cx="61.95" cy="55.24" r="34.25" />
+        <circle className="cls-7" cx="61.95" cy="55.24" r="34.25" />
+      </g>
+    </g>
+  </svg>
+);

packages/icons/src/index.js

@@ -12,6 +12,7 @@ export { default as Delete } from './delete';
 export { default as Dot } from './dot';
 export { default as Duplicate } from './duplicate';
 export { default as Edit } from './edit';
+export { default as EmptyState } from './empty-state';
 export { default as Fabric } from './fabric';
 // export { default as Filter } from './filter';
 export { default as Firewall } from './firewall';

packages/instance-steps/src/firewall/index.js

@@ -5,6 +5,7 @@ import { compose, graphql } from 'react-apollo';
 import { Link } from 'react-router-dom';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
+import { change } from 'redux-form';
 import get from 'lodash.get';
 import forceArray from 'force-array';
 
@@ -39,6 +40,8 @@ const Firewall = ({
   tagRules = [],
   loading = false,
   enabled = false,
+  showInactiveRules = null,
+  showInactive = false,
   ...props
 }) => (
   <Step name="firewall" getValue={handleGetValue} {...props}>
@@ -98,6 +101,15 @@ const Firewall = ({
                       can potentially affect your instance
                     </P>
                   </Margin>
+                  <Margin top={2}>
+                    <Button
+                      secondary
+                      onClick={showInactiveRules}
+                      disabled={showInactive}
+                    >
+                      View Inactive Rules
+                    </Button>
+                  </Margin>
                 </Fragment>
               </Empty>
             </Margin>
@@ -142,7 +154,9 @@ const Firewall = ({
 export default compose(
   connect(({ form, values }, ownProps) => ({
     ...ownProps,
-    enabled: get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
+    enabled:
+      console.log(form, values) ||
+      get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
     showInactive: get(form, `${IC_FW_F_INACTIVE}.values.inactive`, false),
     tags: get(values, IC_TAG_V_TAGS, [])
   })),
@@ -184,5 +198,9 @@ export default compose(
         handleGetValue: () => ({ enabled, defaultRules, tagRules })
       };
     }
-  })
+  }),
+  connect(null, (dispatch, { ...args }) => ({
+    showInactiveRules: () =>
+      dispatch(change(IC_FW_F_INACTIVE, 'inactive', true))
+  }))
 )(Firewall);

packages/instance-steps/src/name/index.js

@@ -42,6 +42,10 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
   width: ${remcalc(16)};
 `;
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 const Name = ({
   initialValues,
   handleValidate,
@@ -79,7 +83,7 @@ const Name = ({
             keepDirtyOnReinitialize
           >
             {props => (
-              <form onSubmit={null}>
+              <Form onSubmit={null}>
                 <FormGroup name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
@@ -113,7 +117,7 @@ const Name = ({
                     Next
                   </Button>
                 </Margin>
-              </form>
+              </Form>
             )}
           </ReduxForm>
         </Margin>

packages/instance-steps/src/package/components.js

@@ -30,7 +30,7 @@ import {
   MemoryIcon
 } from 'joyent-ui-toolkit';
 
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const GroupIcons = {
   MEMORY: <MemoryIcon fill="#32ABCF" />,
@@ -304,7 +304,7 @@ export const Empty = ({ children, ...rest }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

packages/logos/assets/empty-state.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119.34 109.47"><defs><style>.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}</style><radialGradient id="radial-gradient" cx="208.79" cy="99.06" r="57.13" gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0.05" stop-color="#436275"/><stop offset="0.1" stop-color="#415f72"/><stop offset="0.13" stop-color="#3a5769"/><stop offset="0.16" stop-color="#2e4959"/><stop offset="0.19" stop-color="#1d3543"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.9" stop-color="#2c4656"/><stop offset="0.95" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-2" cx="59.15" cy="56.86" r="46.01" gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.1" stop-color="#426073"/><stop offset="0.13" stop-color="#3c5a6c"/><stop offset="0.16" stop-color="#344f61"/><stop offset="0.18" stop-color="#274050"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.92" stop-color="#2c4656"/><stop offset="1" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-3" cx="-521.06" cy="366.16" r="32.44" gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.02" stop-color="#436275" stop-opacity="0.97"/><stop offset="0.34" stop-color="#436275" stop-opacity="0.55"/><stop offset="0.62" stop-color="#436275" stop-opacity="0.25"/><stop offset="0.85" stop-color="#436275" stop-opacity="0.07"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient><radialGradient id="radial-gradient-4" cx="-136.43" cy="140.9" r="54.82" gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.58" stop-color="#436275" stop-opacity="0.4"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient></defs><title>Empty-state-illustration</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><path class="cls-2" d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"/></g><g class="cls-1"><path class="cls-3" d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"/></g><circle class="cls-4" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-5" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-6" cx="61.95" cy="55.24" r="34.25"/><circle class="cls-7" cx="61.95" cy="55.24" r="34.25"/></g></g></svg>

packages/resource-step/src/index.js

@@ -59,6 +59,7 @@ export const Header = ({ icon = null, children }) => (
                   <FlexItem alignCenter>
                     <Link
                       to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                      id={'expand-card-' + name}
                     >
                       <Flex alignCenter>
                         {expanded ? 'Save and Collase' : 'Expand'}

packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap

@@ -129,7 +129,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -453,7 +452,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap

@@ -246,21 +246,6 @@ Array [
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c18 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -1274,21 +1259,17 @@ Array [
                                     <ul
                                         className="c16"
                                     >
-                                        <div
+                                        <li
                                             className="c17"
-                                        >
-                                            <li
-                                                className="c18"
-                                                fill={null}
-                                                name="wat"
-                                                style={
-                                                    Object {
-                                                        "color": "#D8D8D8",
-                                                      }
-                                                }
-                                                value=""
-                                            />
-                                        </div>
+                                            fill={null}
+                                            name="wat"
+                                            style={
+                                                Object {
+                                                    "color": "#D8D8D8",
+                                                  }
+                                            }
+                                            value=""
+                                        />
                                     </ul>
                                 </div>
                             </div>
@@ -3169,7 +3150,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3220,21 +3201,6 @@ Array [
 }
 
 .c13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c14 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -3278,7 +3244,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c14 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -3373,28 +3339,24 @@ Array [
                                 <ul
                                     className="c12"
                                 >
-                                    <div
+                                    <li
                                         className="c13"
-                                    >
-                                        <li
-                                            className="c14"
-                                            fill={null}
-                                            name="wat"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                            value=""
-                                        />
-                                    </div>
+                                        fill={null}
+                                        name="wat"
+                                        style={
+                                            Object {
+                                                "color": "#D8D8D8",
+                                              }
+                                        }
+                                        value=""
+                                    />
                                 </ul>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3434,7 +3396,7 @@ Array [
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3474,7 +3436,7 @@ Array [
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3768,21 +3730,6 @@ Array [
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c18 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -4796,21 +4743,17 @@ Array [
                                     <ul
                                         className="c16"
                                     >
-                                        <div
+                                        <li
                                             className="c17"
-                                        >
-                                            <li
-                                                className="c18"
-                                                fill={null}
-                                                name="wat"
-                                                style={
-                                                    Object {
-                                                        "color": "#D8D8D8",
-                                                      }
-                                                }
-                                                value=""
-                                            />
-                                        </div>
+                                            fill={null}
+                                            name="wat"
+                                            style={
+                                                Object {
+                                                    "color": "#D8D8D8",
+                                                  }
+                                            }
+                                            value=""
+                                        />
                                     </ul>
                                 </div>
                             </div>

packages/resource-widgets/src/cns/index.js

@@ -9,7 +9,7 @@ import {
   P as BaseP,
   H3 as BaseH3,
   Divider,
-  TagList,
+  TagList as BaseTagList,
   Input,
   Toggle as BaseToggle,
   Small,
@@ -23,6 +23,10 @@ import {
   TagItem
 } from 'joyent-ui-toolkit';
 
+const TagList = styled(BaseTagList)`
+  margin-bottom: ${remcalc(-6)};
+`;
+
 const SmallBordered = styled(Small)`
   padding-right: ${remcalc(12)};
   margin-right: ${remcalc(12)};
@@ -201,16 +205,18 @@ const CnsHostnames = ({
         <Margin top={1}>
           <TagList>
             {services.map(value => (
-              <TagItem
-                active
-                fill={'rgba(66, 134, 244, 0.1)'}
-                key={value}
-                onRemoveClick={
-                  onRemoveService && (() => onRemoveService(value))
-                }
-              >
-                {value}
-              </TagItem>
+              <Margin right={1} bottom={1}>
+                <TagItem
+                  active
+                  fill={'rgba(66, 134, 244, 0.1)'}
+                  key={value}
+                  onRemoveClick={
+                    onRemoveService && (() => onRemoveService(value))
+                  }
+                >
+                  {value}
+                </TagItem>
+              </Margin>
             ))}
           </TagList>
         </Margin>

packages/resource-widgets/src/empty/index.js

@@ -6,7 +6,7 @@ import is, { isNot } from 'styled-is';
 import remcalc from 'remcalc';
 
 import { H3, Card } from 'joyent-ui-toolkit';
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
@@ -28,7 +28,7 @@ export default ({ children, ...rest }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -46,7 +46,6 @@ exports[`Button Default Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -155,7 +154,6 @@ exports[`Button Disabled Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -279,7 +277,6 @@ exports[`Button Error Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -411,7 +408,6 @@ exports[`Button Loading Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -537,7 +533,6 @@ exports[`Button Secondary Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

packages/ui-toolkit/src/button/index.js

@@ -87,7 +87,6 @@ const Button = styled(BaseButton)`
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   letter-spacing: normal;
   text-decoration: none;
 

packages/ui-toolkit/src/key-value/index.js

@@ -27,6 +27,10 @@ import { H4 } from '../text/headings';
 import Button from '../button';
 import Divider from '../divider';
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 const CollapsedKeyValue = styled.div`
   word-break: break-all;
   line-height: 1.5;
@@ -348,7 +352,7 @@ KeyValue.propTypes = {
 };
 
 export default withTheme(({ handleSubmit, ...rest }) => (
-  <form onSubmit={handleSubmit}>
+  <Form onSubmit={handleSubmit}>
     <KeyValue {...rest} />
-  </form>
+  </Form>
 ));

packages/ui-toolkit/src/tags/item.js

@@ -11,12 +11,6 @@ const CloseIcon = styled(Close)`
   `};
 `;
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-`;
-
 const Tag = styled.li`
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   box-sizing: border-box;
@@ -59,19 +53,15 @@ export default withTheme(
     iconFill = null,
     ...rest
   }) => (
-    <Container>
-      <Tag fill={fill} active={active} {...rest}>
-        {children}
-        {onRemoveClick ? (
-          <CloseIcon
-            fill={
-              iconFill ? iconFill : active ? theme.primaryActive : theme.text
-            }
-            disabled
-            onClick={onRemoveClick}
-          />
-        ) : null}
-      </Tag>
-    </Container>
+    <Tag fill={fill} active={active} {...rest}>
+      {children}
+      {onRemoveClick ? (
+        <CloseIcon
+          fill={iconFill ? iconFill : active ? theme.primaryActive : theme.text}
+          disabled
+          onClick={onRemoveClick}
+        />
+      ) : null}
+    </Tag>
   )
 );

packages/ui-toolkit/src/tags/list.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 export default styled.ul`
   margin: 0;