fix(my-joyent): improve design fidelity

packages/my-joyent/src/assets/cloud.svg

@@ -0,0 +1,18 @@
+<svg width="176" height="60" viewBox="0 0 176 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>joyent-cloud-1</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-13555 -35663)">
+<g id="joyent-cloud-1">
+<g id="Layer 2">
+<g id="Layer 1">
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="translate(13555 35663)" fill="#D8D8D8"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 175.67 60C 175.46 57.1838 174.521 54.4703 172.946 52.1246C 171.371 49.7789 169.213 47.8813 166.684 46.6172C 164.155 45.3531 161.34 44.7657 158.516 44.9125C 155.691 45.0592 152.953 45.9351 150.569 47.4545C 151.756 42.3105 151.879 36.9785 150.928 31.7856C 149.978 26.5927 147.975 21.6484 145.042 17.2561C 142.11 12.8637 138.309 9.11598 133.874 6.24275C 129.438 3.36953 124.462 1.43141 119.249 0.547318C 114.037 -0.336776 108.698 -0.148206 103.561 1.10146C 98.4245 2.35112 93.5975 4.63553 89.3766 7.81452C 85.1557 10.9935 81.6298 15.0001 79.0153 19.5883C 76.4008 24.1766 74.7528 29.2499 74.1725 34.4969C 70.6998 30.679 66.1574 27.9922 61.1354 26.7853C 56.1135 25.5785 50.844 25.9074 46.0118 27.7294C 41.1795 29.5514 37.0076 32.7822 34.0382 37.0021C 31.0688 41.2221 29.4391 46.2361 29.3608 51.3928C 27.36 48.7427 24.5977 46.7643 21.4422 45.7215C 18.2866 44.6787 14.8877 44.6209 11.6984 45.5558C 8.50906 46.4908 5.68092 48.374 3.5909 50.9546C 1.50088 53.5352 0.248256 56.6905 0 60L 175.67 60Z"/>
+</defs>
+</svg>

packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Package /> without throwing 1`] = `
+.c4 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c5 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+  min-height: 11.5625rem;
+  min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c3 {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: #808080;
+  -webkit-flex-basis: 0;
+  -ms-flex-basis: 0;
+  flex-basis: 0;
+  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-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-grow: 0;
+  -ms-flex-grow: 0;
+  flex-grow: 0;
+  margin-bottom: 0.5rem;
+}
+
+.c6 {
+  font-weight: normal;
+}
+
+.c0 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 {
+  margin-bottom: 18px;
+}
+
+<div
+  className="c0 c1"
+  name="card"
+>
+  <test-file-mock
+    alt="Cloud"
+    className="c2"
+    width="175"
+  />
+  <div
+    className="c3 c4"
+    name="card-title"
+  >
+    <span
+      className="c5"
+    >
+      There are no packages that meet your criteria
+    </span>
+  </div>
+  <div
+    className="c6 c3 c4"
+    name="card-title"
+  >
+    <span
+      className="c5"
+    >
+      Please adjust the filters to see some packages here
+    </span>
+  </div>
+</div>
+`;

packages/my-joyent/src/components/empty/__tests__/index.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import Empty from '../';
+
+it('renders <Package /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Empty />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/my-joyent/src/components/empty/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import { Card, CardTitle } from 'joyent-ui-toolkit';
+
+import Cloud from '../../assets/cloud.svg';
+
+const Title = styled(CardTitle)`
+  font-weight: 600;
+  font-size: ${remcalc(15)};
+  color: #808080;
+  flex-basis: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 0;
+  margin-bottom: ${remcalc(8)};
+`;
+
+const SubTitle = styled(Title)`
+  font-weight: normal;
+`;
+
+const CardStyled = styled(Card)`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+`;
+
+const StyledCloud = styled(Cloud)`
+  /* Prettier Comment */
+  margin-bottom: 18px;
+`;
+
+const Empty = () => (
+  <CardStyled transparent>
+    <StyledCloud width="175" alt="Cloud" />
+    <Title>There are no packages that meet your criteria</Title>
+    <SubTitle>Please adjust the filters to see some packages here</SubTitle>
+  </CardStyled>
+);
+
+export default Empty;

packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Filters /> without throwing 1`] = `
-.c12 {
+.c6 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -49,47 +49,47 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: 600;
 }
 
-.c12::-moz-focus-inner,
+.c6::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
+.c6[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
+.c6[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.c6[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c12:-moz-focusring,
+.c6:-moz-focusring,
-.c12[type='button']:-moz-focusring,
+.c6[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
+.c6[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c6[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c12:focus {
+.c6:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c12:hover {
+.c6:hover {
   border: solid 0.0625rem;
 }
 
-.c12:active,
+.c6:active,
-.c12:active:hover,
+.c6:active:hover,
-.c12:active:focus {
+.c6:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c12[disabled] {
+.c6[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c12 + button {
+.c6 + button {
   margin-left: 1.25rem;
 }
 
-.c13 {
+.c7 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -136,47 +136,66 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: 600;
 }
 
-.c13::-moz-focus-inner,
+.c7::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c7[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
+.c7:-moz-focusring,
-.c13[type='button']:-moz-focusring,
+.c7[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c7[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c13:hover {
+.c7:hover {
   border: solid 0.0625rem;
 }
 
-.c13:active,
+.c7:active,
-.c13:active:hover,
+.c7:active:hover,
-.c13:active:focus {
+.c7:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c13[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c13 + button {
+.c7 + button {
   margin-left: 1.25rem;
 }
 
-.c1 {
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  margin-bottom: 0.375rem;
+}
+
+.c10 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
@@ -187,25 +206,23 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c7 {
+.c14 {
-  font-weight: 600;
+  font-size: 0.8125rem;
-  font-size: 0.625rem;
-  color: #464646;
   position: absolute;
   top: 0.875rem;
   right: auto;
+  color: #464646;
 }
 
-.c9 {
+.c16 {
-  font-weight: 600;
+  font-size: 0.8125rem;
-  font-size: 0.625rem;
-  color: #464646;
   position: absolute;
   top: 0.875rem;
   right: 1px;
+  color: #464646;
 }
 
-.c8 {
+.c15 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -225,17 +242,17 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-top: 0.125rem;
 }
 
-.c8::active {
+.c15::active {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
 }
 
-.c8::focus {
+.c15::focus {
   box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
 }
 
-.c10 {
+.c17 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -255,17 +272,17 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-top: 0.125rem;
 }
 
-.c10::active {
+.c17::active {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
 }
 
-.c10::focus {
+.c17::focus {
   box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
 }
 
-.c5 {
+.c12 {
   background: #D8D8D8;
   cursor: pointer;
   display: block;
@@ -273,40 +290,40 @@ exports[`renders <Filters /> without throwing 1`] = `
   position: relative;
 }
 
-.c6 {
+.c13 {
   background: #364ACD;
   height: 100%;
   position: absolute;
 }
 
-.c4 {
+.c11 {
   position: relative;
   min-height: 0.625rem;
 }
 
-.c3 {
+.c9 {
   margin-bottom: 0.625rem;
   margin-top: 0.75rem;
 }
 
-.c2 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c2 > div {
+.c8 > div {
   -webkit-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
 }
 
-.c2 > div:not(:last-child) {
+.c8 > div:not(:last-child) {
   margin-right: 2.25rem;
 }
 
-.c11 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -316,47 +333,107 @@ exports[`renders <Filters /> without throwing 1`] = `
   -ms-flex-pack: justify;
   justify-content: space-between;
   width: 100%;
-  margin-top: 2.25rem;
+  margin-bottom: 1.125rem;
 }
 
 .c0 {
   width: 100%;
 }
 
+.c1 {
+  line-height: 24px;
+  font-size: 21px;
+  margin-bottom: 1.125rem;
+}
+
+.c3 {
+  margin-bottom: 0.5rem;
+}
+
 <section
   className="c0"
 >
   <label
-    className="c1"
+    className="c1 c2"
-    htmlFor=""
   >
-    Choose a package
+    Choose package
+  </label>
+  <label
+    className="c3 c4"
+  >
+    Filter by package type
   </label>
   <section
+    className="c5"
+  >
+    <div>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Compute Optimized
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        General Purpose
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Memory Optimized
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Storage Optimized
+      </button>
+    </div>
+    <button
+      className="c7"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Reset Filters
+    </button>
+  </section>
+  <label
     className="c2"
+  >
+    Filter by package feature
+  </label>
+  <section
+    className="c8"
   >
     <div>
       <label
-        className="c3 c1"
+        className="c9 c10"
         htmlFor=""
       >
         GB RAM
       </label>
       <div
         aria-disabled={false}
-        className="c4"
+        className="c11"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c5"
+          className="c12"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c6"
+            className="c13"
             style={
               Object {
                 "left": "0%",
@@ -366,7 +443,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c7"
+              className="c14"
               type="min"
             >
               0.256
@@ -377,7 +454,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={50.688}
               aria-valuemin={0.256}
               aria-valuenow={0.256}
-              className="c8"
+              className="c15"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -395,7 +472,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c9"
+              className="c16"
               type="max"
             >
               50.688
@@ -406,7 +483,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={50.688}
               aria-valuemin={0.256}
               aria-valuenow={50.688}
-              className="c10"
+              className="c17"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -427,26 +504,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c3 c1"
+        className="c9 c10"
         htmlFor=""
       >
         vCPUs
       </label>
       <div
         aria-disabled={false}
-        className="c4"
+        className="c11"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c5"
+          className="c12"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c6"
+            className="c13"
             style={
               Object {
                 "left": "0%",
@@ -456,7 +533,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c7"
+              className="c14"
               type="min"
             >
               0.25
@@ -467,7 +544,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={3.25}
               aria-valuemin={0.25}
               aria-valuenow={0.25}
-              className="c8"
+              className="c15"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -485,7 +562,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c9"
+              className="c16"
               type="max"
             >
               3.25
@@ -496,7 +573,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={3.25}
               aria-valuemin={0.25}
               aria-valuenow={3.25}
-              className="c10"
+              className="c17"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -517,26 +594,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c3 c1"
+        className="c9 c10"
         htmlFor=""
       >
         TB Disk
       </label>
       <div
         aria-disabled={false}
-        className="c4"
+        className="c11"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c5"
+          className="c12"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c6"
+            className="c13"
             style={
               Object {
                 "left": "0%",
@@ -546,7 +623,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c7"
+              className="c14"
               type="min"
             >
               0.01
@@ -557,7 +634,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={107.26}
               aria-valuemin={0.01}
               aria-valuenow={0.01}
-              className="c8"
+              className="c15"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -575,7 +652,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c9"
+              className="c16"
               type="max"
             >
               107.26
@@ -586,7 +663,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={107.26}
               aria-valuemin={0.01}
               aria-valuenow={107.26}
-              className="c10"
+              className="c17"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -607,26 +684,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c3 c1"
+        className="c9 c10"
         htmlFor=""
       >
         $/hr
       </label>
       <div
         aria-disabled={false}
-        className="c4"
+        className="c11"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c5"
+          className="c12"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c6"
+            className="c13"
             style={
               Object {
                 "left": "0%",
@@ -636,7 +713,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c7"
+              className="c14"
               type="min"
             >
               0.016
@@ -647,7 +724,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={0.525}
               aria-valuemin={0.016}
               aria-valuenow={0.016}
-              className="c8"
+              className="c15"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -665,7 +742,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c9"
+              className="c16"
               type="max"
             >
               0.525
@@ -676,7 +753,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={0.525}
               aria-valuemin={0.016}
               aria-valuenow={0.525}
-              className="c10"
+              className="c17"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -696,46 +773,5 @@ exports[`renders <Filters /> without throwing 1`] = `
       </div>
     </div>
   </section>
-  <section
-    className="c11"
-  >
-    <div>
-      <button
-        className="c12"
-        onClick={[Function]}
-        selected={false}
-      >
-        Compute Optimized
-      </button>
-      <button
-        className="c12"
-        onClick={[Function]}
-        selected={false}
-      >
-        General Purpose
-      </button>
-      <button
-        className="c12"
-        onClick={[Function]}
-        selected={false}
-      >
-        Memory Optimized
-      </button>
-      <button
-        className="c12"
-        onClick={[Function]}
-        selected={false}
-      >
-        Storage Optimized
-      </button>
-    </div>
-    <button
-      className="c13"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Reset Filters
-    </button>
-  </section>
 </section>
 `;

packages/my-joyent/src/components/filters/filters.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import isEqual from 'lodash.isequal';
-import { FormLabel, Button } from 'joyent-ui-toolkit';
+import { Label, Button } from 'joyent-ui-toolkit';
 import { default as defaultState } from '@state/state';
 
 import Sliders from '@components/sliders';
@@ -11,7 +11,7 @@ const GroupWrapper = styled.section`
   display: flex;
   justify-content: space-between;
   width: 100%;
-  margin-top: ${remcalc(36)};
+  margin-bottom: ${remcalc(18)};
 `;
 
 const Wrapper = styled.section`
@@ -19,6 +19,17 @@ const Wrapper = styled.section`
   width: 100%;
 `;
 
+const Title = styled(Label)`
+  line-height: 24px;
+  font-size: 21px;
+  margin-bottom: ${remcalc(18)};
+`;
+
+const Subtitle = styled(Label)`
+  /* Comment for prettier */
+  margin-bottom: ${remcalc(8)};
+`;
+
 class Filters extends Component {
   constructor(props) {
     super(props);
@@ -47,22 +58,15 @@ class Filters extends Component {
       cpuSliderChange,
       diskSliderChange,
       costSliderChange,
-      groupChange
+      groupChange,
+      packages
     } = this.props;
 
     const { reset } = this.state;
-
     return (
       <Wrapper>
-        <FormLabel>Choose a package</FormLabel>
+        <Title>Choose package</Title>
-        <Sliders
+        <Subtitle marginBottom="1">Filter by package type</Subtitle>
-          reset={reset}
-          filters={filters}
-          ramSliderChange={ramSliderChange}
-          cpuSliderChange={cpuSliderChange}
-          diskSliderChange={diskSliderChange}
-          costSliderChange={costSliderChange}
-        />
         <GroupWrapper>
           <div>
             {filters.groups
@@ -88,6 +92,16 @@ class Filters extends Component {
             Reset Filters
           </Button>
         </GroupWrapper>
+        <Label>Filter by package feature</Label>
+        <Sliders
+          greyed={packages === 0}
+          reset={reset}
+          filters={filters}
+          ramSliderChange={ramSliderChange}
+          cpuSliderChange={cpuSliderChange}
+          diskSliderChange={diskSliderChange}
+          costSliderChange={costSliderChange}
+        />
       </Wrapper>
     );
   }

packages/my-joyent/src/components/home/home.js

@@ -15,7 +15,7 @@ import {
 const Main = styled.main`
   /* Prettier stahp */
   margin-bottom: 40px;
-`
+`;
 
 class Home extends Component {
   constructor(props) {
@@ -56,7 +56,7 @@ class Home extends Component {
 
   render() {
     const { showMessage } = this.state;
-    const { filters, onFilterReset } = this.props;
+    const { filters, onFilterReset, packages } = this.props;
     const _msg = showMessage ? (
       <Message
         title="Choosing deployement data center"
@@ -78,6 +78,7 @@ class Home extends Component {
         <Row>{_msg}</Row>
         <Row>
           <Filters
+            packages={packages}
             filters={filters}
             filterReset={onFilterReset}
             groupChange={group => this.changeGroup(group)}

packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap

@@ -175,7 +175,7 @@ exports[`renders <Package /> without throwing 1`] = `
   font-size: 0.8125rem;
   font-weight: 500;
   text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
+  color: #bdbdbd;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
 }

packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap

@@ -184,7 +184,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   font-size: 0.8125rem;
   font-weight: 500;
   text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
+  color: #bdbdbd;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
 }

packages/my-joyent/src/components/packages/list.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Col } from 'react-styled-flexboxgrid';
 
 import Package from '@components/package';
+import Empty from '@components/empty';
 
 const ListStyled = styled.section`
   display: flex;
@@ -50,7 +51,9 @@ class Packages extends Component {
             </Col>
           ))
         ) : ( 
-          'There are no packages that meet your criteria'
+          <Col xs={12}>
+              <Empty />
+            </Col>
         )}
       </ListStyled>
     );

packages/my-joyent/src/components/sliders/index.js

@@ -21,10 +21,12 @@ const Sliders = ({
   cpuSliderChange,
   diskSliderChange,
   costSliderChange,
-  reset
+  reset,
+  greyed
 }) => (
     <FilterWrapper key={reset}>
       <Slider
+        greyed={greyed}
         minValue={ram.min}
         maxValue={ram.max}
         step={0.256}
@@ -34,6 +36,7 @@ const Sliders = ({
         GB RAM
       </Slider>
       <Slider
+        greyed={greyed}
         minValue={cpu.min}
         maxValue={cpu.max}
         step={0.25}
@@ -43,6 +46,7 @@ const Sliders = ({
         vCPUs
       </Slider>
       <Slider
+        greyed={greyed}
         minValue={disk.min}
         maxValue={disk.max}
         step={0.01}
@@ -52,6 +56,7 @@ const Sliders = ({
         TB Disk
       </Slider>
       <Slider
+        greyed={greyed}
         minValue={cost.min}
         maxValue={cost.max}
         step={0.02}

packages/my-joyent/src/containers/home/index.js

@@ -14,7 +14,8 @@ const HomeHOC = (props) => (
 
 const mapStateToProps = state => {
   return {
-    filters: state.app.filters
+    filters: state.app.filters,
+    packages: state.app.packages.length
   };
 };
 

packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap

@@ -184,7 +184,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   font-size: 0.8125rem;
   font-weight: 500;
   text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
+  color: #bdbdbd;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
 }

packages/ui-toolkit/src/card/footer.js

@@ -3,6 +3,7 @@ import is from 'styled-is';
 import styled from 'styled-components';
 import Baseline from '../baseline';
 import typography from '../typography';
+import theme from '../theme';
 import remcalc from 'remcalc';
 import PropTypes from 'prop-types';
 import Title from './title';
@@ -26,7 +27,7 @@ const Span = styled.span`
   font-weight: 500;
   text-transform: uppercase;
 
-  color: rgba(73, 73, 73, 0.5);
+  color: ${theme.greyLight};
   transition: all 300ms ease;
 
   ${is('selected')`

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

@@ -59,16 +59,17 @@ Slider.propTypes = {
   disabled: PropTypes.bool,
   draggableTrack: PropTypes.bool,
   onChangeStart: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  greyed: PropTypes.bool,
 };
 
 Slider.defaultProps = {
   onChangeComplete: () => {},
   onChange: () => {},
   formatLabel: value =>
-            (value.toString().split('.')[1] || []).length > 3
+    (value.toString().split('.')[1] || []).length > 3
-              ? Math.round(value).toFixed(3)
+      ? Math.round(value).toFixed(3)
-              : value,
+      : value,
   onChangeStart: () => {},
   step: 1
 };

packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx

@@ -642,6 +642,7 @@ export default class InputRange extends Component {
           classNames={this.props.classNames}
           formatLabel={this.props.formatLabel}
           key={key}
+          greyed={this.props.greyed}
           maxValue={maxValue}
           minValue={minValue}
           onSliderDrag={this.handleSliderDrag}

packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx

@@ -6,12 +6,11 @@ import remcalc from 'remcalc';
 import theme from '../../../theme';
 
 const Span = styled.span`
-  font-weight: 600;
+  font-size: ${remcalc(13)};
-  font-size: ${remcalc(10)};
-  color: ${theme.secondary};
   position: absolute;
   top: ${remcalc(14)};
   right: ${props => (props.type === 'max' ? '1px' : 'auto')};
+  color: ${props => (props.greyed ? theme.greyLight : theme.secondary)};
 `;
 
 /**
@@ -26,7 +25,11 @@ export default function Label(props) {
     ? props.formatLabel(props.children, props.type)
     : props.children;
 
-  return <Span type={props.type}>{labelValue}</Span>;
+  return (
+    <Span greyed={props.greyed} type={props.type}>
+      {labelValue}
+    </Span>
+  );
 }
 
 /**
@@ -40,5 +43,6 @@ Label.propTypes = {
   children: PropTypes.node.isRequired,
   classNames: PropTypes.objectOf(PropTypes.string),
   formatLabel: PropTypes.func,
-  type: PropTypes.string
+  type: PropTypes.string,
+  greyed: PropTypes.bool
 };

packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx

@@ -289,7 +289,7 @@ export default class Slider extends Component {
           this.node = node;
         }}
       >
-        <Label formatLabel={props.formatLabel} type={props.type}>
+        <Label greyed={props.greyed} formatLabel={props.formatLabel} type={props.type}>
           {props.value}
         </Label>
         <SliderStyled