fix(my-joy-beta): small fixes

bundle/index.js

@@ -1,4 +1,4 @@
-'use strict';
+
 
 const Brule = require('brule');
 const Hapi = require('hapi');

packages/icons/src/dot.js

@@ -2,8 +2,8 @@ import remcalc from 'remcalc';
 import styled from 'styled-components';
 
 export default styled.span`
-  width: ${remcalc(6)};
+  width: ${props => props.size || remcalc(6)};
-  height: ${remcalc(6)};
+  height: ${props => props.size || remcalc(6)};
   border-radius: 50%;
   background-color: ${props => props.theme[props.color]};
   display: inline-block;

packages/my-joy-beta/.eslintrc

@@ -4,10 +4,7 @@
     "no-console": 0,
     "new-cap": 0,
     "camelcase": 1,
-    // temp
+    "jsx-a11y/href-no-hash": 0,
-    "no-undef": 1,
+    "no-negated-condition": 0
-    "no-debugger": 1,
-    "no-negated-condition": 0,
-    "jsx-a11y/href-no-hash": 0
   }
 }

packages/my-joy-beta/.gitignore

@@ -14,5 +14,10 @@
 .env
 npm-debug.log*
 yarn-debug.log*
+
 yarn-error.log*
 
+## Image Snapshots Diff
+
+**/__diff_output__
+

packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap

@@ -4554,7 +4554,11 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin-top: 1.125rem;
 }
 
-.c29 {
+.c28 {
+  margin-bottom: 0.75rem;
+}
+
+.c30 {
   margin-top: 0.1875rem;
 }
 
@@ -4743,7 +4747,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
-.c28 {
+.c29 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5093,7 +5097,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5116,57 +5120,57 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   outline: 0;
 }
 
-.c30::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c30:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c30:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled {
+.c31:disabled {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -5569,6 +5573,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                     >
                       <div
                         className="c20"
+                      >
+                        <div
+                          className="c28"
                         >
                           <div
                             className="baseline-jVaZNU kXgQxt c6"
@@ -5577,16 +5584,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                             style={undefined}
                           >
                             <label
-                            className="c28"
+                              className="c29"
                               htmlFor="x"
                             >
                               ID
                             </label>
                             <div
-                            className="c29"
+                              className="c30"
                             >
                               <input
-                              className="c30"
+                                className="c31"
                                 disabled={false}
                                 id="x"
                                 onBlur={null}
@@ -5595,6 +5602,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                             </div>
                           </div>
                         </div>
+                      </div>
                       <div
                         className="c20"
                       >
@@ -5605,16 +5613,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                           style={undefined}
                         >
                           <label
-                            className="c28"
+                            className="c29"
                             htmlFor="y"
                           >
                             Subnet
                           </label>
                           <div
-                            className="c29"
+                            className="c30"
                           >
                             <input
-                              className="c30"
+                              className="c31"
                               disabled={false}
                               id="y"
                               onBlur={null}
@@ -5633,16 +5641,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                           style={undefined}
                         >
                           <label
-                            className="c28"
+                            className="c29"
                             htmlFor="z"
                           >
                             IP range
                           </label>
                           <div
-                            className="c29"
+                            className="c30"
                           >
                             <input
-                              className="c30"
+                              className="c31"
                               disabled={false}
                               id="z"
                               onBlur={null}

packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap

@@ -5,6 +5,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
+.c18 {
+  margin-top: 0.75rem;
+}
+
 .c3 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
@@ -14,7 +18,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c22 {
+.c23 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -27,30 +31,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c22::-moz-focus-inner,
+.c23::-moz-focus-inner,
-.c22[type='button']::-moz-focus-inner,
+.c23[type='button']::-moz-focus-inner,
-.c22[type='reset']::-moz-focus-inner,
+.c23[type='reset']::-moz-focus-inner,
-.c22[type='submit']::-moz-focus-inner {
+.c23[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c22:-moz-focusring,
+.c23:-moz-focusring,
-.c22[type='button']:-moz-focusring,
+.c23[type='button']:-moz-focusring,
-.c22[type='reset']:-moz-focusring,
+.c23[type='reset']:-moz-focusring,
-.c22[type='submit']:-moz-focusring {
+.c23[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c22 + button {
+.c23 + button {
   margin-left: 0.375rem;
 }
 
-.c21 {
+.c22 {
   display: inline-block;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -94,50 +98,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
+.c21:active,
-.c20:active:hover,
+.c21:active:hover,
-.c20:active:focus {
+.c21:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c21:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c20:active,
+.c21:active,
-.c20:active:hover,
+.c21:active:hover,
-.c20:active:focus {
+.c21:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -182,50 +186,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
+.c24:active,
-.c23:active:hover,
+.c24:active:hover,
-.c23:active:focus {
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23:active,
+.c24:active,
-.c23:active:hover,
+.c24:active:hover,
-.c23:active:focus {
+.c24:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -282,73 +286,73 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c25:focus {
+.c26:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
+.c26:active,
-.c25:active:hover,
+.c26:active:hover,
-.c25:active:focus {
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c25:active,
+.c26:active,
-.c25:active:hover,
+.c26:active:hover,
-.c25:active:focus {
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25:focus {
+.c26:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:hover {
+.c26:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:active,
+.c26:active,
-.c25:active:hover,
+.c26:active:hover,
-.c25:active:focus {
+.c26:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c25 svg + span {
+.c26 svg + span {
   margin-left: 0.75rem;
 }
 
-.c25 svg {
+.c26 svg {
   max-height: 1.125rem;
 }
 
@@ -379,7 +383,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: none;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -398,7 +402,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -408,7 +412,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -793,7 +797,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -802,7 +806,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -811,7 +815,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c20 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -820,7 +824,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     display: none;
   }
 }
@@ -940,9 +944,12 @@ exports[`renders <AddForm /> without throwing 1`] = `
         >
           <div
             className="c19"
+          >
+            <div
+              className="c20"
             >
               <button
-              className="c20 c21 c22"
+                className="c21 c22 c23"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -953,7 +960,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-              className="c23 c21 c22"
+                className="c24 c22 c23"
                 disabled={true}
                 href=""
                 type="submit"
@@ -964,10 +971,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-            className="c24"
+              className="c25"
             >
               <button
-              className="c25 c21 c22"
+                className="c26 c22 c23"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1001,6 +1008,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 
@@ -1009,6 +1017,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
+.c18 {
+  margin-top: 0.75rem;
+}
+
 .c3 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
@@ -1018,7 +1030,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c22 {
+.c23 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1031,30 +1043,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c22::-moz-focus-inner,
+.c23::-moz-focus-inner,
-.c22[type='button']::-moz-focus-inner,
+.c23[type='button']::-moz-focus-inner,
-.c22[type='reset']::-moz-focus-inner,
+.c23[type='reset']::-moz-focus-inner,
-.c22[type='submit']::-moz-focus-inner {
+.c23[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c22:-moz-focusring,
+.c23:-moz-focusring,
-.c22[type='button']:-moz-focusring,
+.c23[type='button']:-moz-focusring,
-.c22[type='reset']:-moz-focusring,
+.c23[type='reset']:-moz-focusring,
-.c22[type='submit']:-moz-focusring {
+.c23[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c22 + button {
+.c23 + button {
   margin-left: 0.375rem;
 }
 
-.c21 {
+.c22 {
   display: inline-block;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1098,50 +1110,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
+.c21:active,
-.c20:active:hover,
+.c21:active:hover,
-.c20:active:focus {
+.c21:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c21:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c20:active,
+.c21:active,
-.c20:active:hover,
+.c21:active:hover,
-.c20:active:focus {
+.c21:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1186,50 +1198,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
+.c24:active,
-.c23:active:hover,
+.c24:active:hover,
-.c23:active:focus {
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23:active,
+.c24:active,
-.c23:active:hover,
+.c24:active:hover,
-.c23:active:focus {
+.c24:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1286,73 +1298,73 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c25:focus {
+.c26:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
+.c26:active,
-.c25:active:hover,
+.c26:active:hover,
-.c25:active:focus {
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c25:active,
+.c26:active,
-.c25:active:hover,
+.c26:active:hover,
-.c25:active:focus {
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25:focus {
+.c26:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:hover {
+.c26:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:active,
+.c26:active,
-.c25:active:hover,
+.c26:active:hover,
-.c25:active:focus {
+.c26:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c25 svg + span {
+.c26 svg + span {
   margin-left: 0.75rem;
 }
 
-.c25 svg {
+.c26 svg {
   max-height: 1.125rem;
 }
 
@@ -1383,7 +1395,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: none;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1402,7 +1414,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1412,7 +1424,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1787,7 +1799,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1796,7 +1808,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1805,7 +1817,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c20 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1814,7 +1826,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1954,9 +1966,12 @@ exports[`renders <EditForm /> without throwing 1`] = `
         >
           <div
             className="c19"
+          >
+            <div
+              className="c20"
             >
               <button
-              className="c20 c21 c22"
+                className="c21 c22 c23"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1967,7 +1982,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-              className="c23 c21 c22"
+                className="c24 c22 c23"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1978,10 +1993,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-            className="c24"
+              className="c25"
             >
               <button
-              className="c25 c21 c22"
+                className="c26 c22 c23"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2015,6 +2030,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 

packages/my-joy-beta/src/components/__tests__/firewall.spec.js

@@ -1,14 +1,9 @@
-import React, { Fragment } from 'react';
+/* eslint-disable camelcase */
+import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import {
+import { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
-  Rules,
-  TagRules,
-  DefaultRules,
-  ToggleFirewallForm,
-  ToggleInactiveForm
-} from '../firewall';
 
 import Theme from '@mocks/theme';
 

packages/my-joy-beta/src/components/__tests__/firewall.ui.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+/* eslint-disable camelcase */
+import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';
 

packages/my-joy-beta/src/components/__tests__/network.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

packages/my-joy-beta/src/components/__tests__/network.ui.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';

packages/my-joy-beta/src/components/cns.js

@@ -34,8 +34,8 @@ export const Header = () => (
     <H3>Hostnames</H3>
     <Padding bottom={2}>
       <P>
-        Default hostnames are automatically generated from both the instance
+        Default hostnames are automatically generated from both the instance name and any attached
-        name and any attached networks.
+        networks.
       </P>
     </Padding>
   </Fragment>
@@ -46,7 +46,7 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
     <Margin bottom={4} top={4}>
       <FormGroup name="cns-enabled">
         <Flex alignCenter>
-          <FormLabel>Disabled CNS</FormLabel>
+          <FormLabel disabled={submitting}>Disabled CNS</FormLabel>
           <Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
             Enabled CNS
           </Toggle>
@@ -66,20 +66,15 @@ export const HostnamesHeader = () => (
     <H3>CNS service hostnames</H3>
     <Padding bottom={3}>
       <P>
-        CNS service hostnames are created by attaching a CNS service name to one
+        CNS service hostnames are created by attaching a CNS service name to one or more instances.
-        or more instances. You can serve multiple instances under the same
+        You can serve multiple instances under the same hostname by assigning them to a matching CNS
-        hostname by assigning them to a matching CNS service name.
+        service name.
       </P>
     </Padding>
   </Margin>
 );
 
-export const AddServiceForm = ({
+export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
-  handleSubmit,
-  submitting,
-  disabled,
-  pristine
-}) => (
   <form onSubmit={handleSubmit}>
     <Flex alignEnd>
       <FlexItem>
@@ -97,12 +92,7 @@ export const AddServiceForm = ({
       </FlexItem>
       <FlexItem>
         <Margin left={2}>
-          <Button
+          <Button type="submit" disabled={disabled || pristine} loading={submitting} inline>
-            type="submit"
-            disabled={disabled || pristine}
-            loading={submitting}
-            inline
-          >
             Add
           </Button>
           <Divider height={remcalc(4)} transparent />
@@ -120,15 +110,11 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
           <SmallBordered bold noMargin>
             {network && service
               ? 'Network CNS service'
-              : network
+              : network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '}
-                ? 'Network'
-                : service ? 'CNS service' : 'Instance name'}{' '}
             hostname{values.length === 1 ? '' : 's'}
           </SmallBordered>
           <FlexItem>
-            <Margin right={1}>
+            <Margin right={1}>{hostname.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
-              {hostname.public ? <PublicIcon /> : <PrivateIcon />}
-            </Margin>
           </FlexItem>
           <FlexItem>
             <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
@@ -137,10 +123,7 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
         {values.map((value, i) => (
           <Margin
             top={0.5}
-            bottom={
+            bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
-              values.length !== 1 && values.length !== i + 1 ? '1' : undefined
-            }
-          >
             <Input onBlur={null} disabled monospace fluid value={value} />
           </Margin>
         ))}
@@ -178,9 +161,7 @@ const CnsHostnames = ({
                 active
                 key={value}
                 value={value}
-                onRemoveClick={
+                onRemoveClick={onRemoveService && (() => onRemoveService(value))}
-                  onRemoveService && (() => onRemoveService(value))
-                }
               />
             ))}
           </TagList>
@@ -198,24 +179,16 @@ const CnsHostnames = ({
   </Fragment>
 );
 
-export default ({
+export default ({ hostnames = [], services = [], onRemoveService, children = null }) => (
-  hostnames = [],
-  services = [],
-  onRemoveService,
-  children = null
-}) => (
   <Card>
     <Padding all={4} bottom={0}>
-      <DefaultHostnames
+      <DefaultHostnames hostnames={hostnames.filter(({ service }) => !service)} />
-        hostnames={hostnames.filter(({ service }) => !service)}
-      />
       <Divider height={remcalc(1)} />
       <Margin top={4}>
         <CnsHostnames
           services={services}
           hostnames={hostnames.filter(({ service }) => service)}
-          onRemoveService={onRemoveService}
+          onRemoveService={onRemoveService}>
-        >
           {children}
         </CnsHostnames>
       </Margin>

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -86,7 +86,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -112,7 +112,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -138,7 +138,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -772,7 +772,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -798,7 +798,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -824,7 +824,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -1238,15 +1238,15 @@ exports[`renders <Package /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages expanded /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1282,7 +1282,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1290,20 +1290,20 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
+.c13 + p,
-.c12 + small,
+.c13 + small,
-.c12 + h1,
+.c13 + h1,
-.c12 + h2,
+.c13 + h2,
-.c12 + label,
+.c13 + label,
-.c12 + h3,
+.c13 + h3,
-.c12 + h4,
+.c13 + h4,
-.c12 + h5,
+.c13 + h5,
-.c12 + div,
+.c13 + div,
-.c12 + span {
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1439,10 +1439,14 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -1533,25 +1537,26 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
-  >
-    <div
-      className="c8"
   >
     <div
       className="c9"
     >
       <div
         className="c10"
+      >
+        <div
+          className="c11"
         >
           <img
+            alt="Sad Animal"
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>
@@ -1562,15 +1567,15 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages isVmSelected /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1606,7 +1611,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1614,20 +1619,20 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
+.c13 + p,
-.c12 + small,
+.c13 + small,
-.c12 + h1,
+.c13 + h1,
-.c12 + h2,
+.c13 + h2,
-.c12 + label,
+.c13 + label,
-.c12 + h3,
+.c13 + h3,
-.c12 + h4,
+.c13 + h4,
-.c12 + h5,
+.c13 + h5,
-.c12 + div,
+.c13 + div,
-.c12 + span {
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1763,10 +1768,14 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -1857,25 +1866,26 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
-  >
-    <div
-      className="c8"
   >
     <div
       className="c9"
     >
       <div
         className="c10"
+      >
+        <div
+          className="c11"
         >
           <img
+            alt="Sad Animal"
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>
@@ -1886,15 +1896,15 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages loading /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1930,7 +1940,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1938,20 +1948,20 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
+.c13 + p,
-.c12 + small,
+.c13 + small,
-.c12 + h1,
+.c13 + h1,
-.c12 + h2,
+.c13 + h2,
-.c12 + label,
+.c13 + label,
-.c12 + h3,
+.c13 + h3,
-.c12 + h4,
+.c13 + h4,
-.c12 + h5,
+.c13 + h5,
-.c12 + div,
+.c13 + div,
-.c12 + span {
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2087,10 +2097,14 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -2181,25 +2195,26 @@ exports[`renders <Packages loading /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
-  >
-    <div
-      className="c8"
   >
     <div
       className="c9"
     >
       <div
         className="c10"
+      >
+        <div
+          className="c11"
         >
           <img
+            alt="Sad Animal"
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>
@@ -2422,15 +2437,15 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
 `;
 
 exports[`renders <Packages pristine={false} /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2466,7 +2481,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2474,20 +2489,20 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
+.c13 + p,
-.c12 + small,
+.c13 + small,
-.c12 + h1,
+.c13 + h1,
-.c12 + h2,
+.c13 + h2,
-.c12 + label,
+.c13 + label,
-.c12 + h3,
+.c13 + h3,
-.c12 + h4,
+.c13 + h4,
-.c12 + h5,
+.c13 + h5,
-.c12 + div,
+.c13 + div,
-.c12 + span {
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2623,10 +2638,14 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -2717,25 +2736,26 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
-  >
-    <div
-      className="c8"
   >
     <div
       className="c9"
     >
       <div
         className="c10"
+      >
+        <div
+          className="c11"
         >
           <img
+            alt="Sad Animal"
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>

packages/my-joy-beta/src/components/create-instance/network.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import React from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
@@ -71,14 +72,10 @@ export const Collapsed = ({ name, fabric, ...network }) => (
                     <FlexItem>
                       <Flex alignCenter>
                         <FlexItem>
-                          <Margin right={1}>
+                          <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
-                            {fabric ? <FabricIcon /> : <DataCenterIcon />}
-                          </Margin>
                         </FlexItem>
                         <FlexItem>
-                          <P>
+                          <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
-                            {fabric ? 'Fabric network' : 'Data center network'}
-                          </P>
                         </FlexItem>
                       </Flex>
                     </FlexItem>
@@ -146,14 +143,10 @@ export const Expanded = ({
                   <FlexItem>
                     <Flex alignCenter>
                       <FlexItem>
-                        <Margin right={1}>
+                        <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
-                          {fabric ? <FabricIcon /> : <DataCenterIcon />}
-                        </Margin>
                       </FlexItem>
                       <FlexItem>
-                        <P>
+                        <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
-                          {fabric ? 'Fabric network' : 'Data center network'}
-                        </P>
                       </FlexItem>
                     </Flex>
                   </FlexItem>
@@ -162,11 +155,7 @@ export const Expanded = ({
               {fabric ? (
                 <Margin top={3}>
                   <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
-                    <CardHeader
+                    <CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
-                      secondary={false}
-                      transparent={false}
-                      onClick={onInfoClick}
-                    >
                       <CardHeaderMeta>
                         <Padding left={3} right={3}>
                           <P>Network information</P>
@@ -185,11 +174,7 @@ export const Expanded = ({
                                 <Margin bottom={3}>
                                   <Flex alignCenter>
                                     <Margin right={1}>
-                                      <DotIcon
+                                      <DotIcon size={remcalc(12)} color="green" />
-                                        width={remcalc(12)}
-                                        height={remcalc(12)}
-                                        color="green"
-                                      />
                                     </Margin>
                                     <Small bold noMargin>
                                       Outbound internet access enabled
@@ -201,28 +186,16 @@ export const Expanded = ({
                             <FlexItem>
                               <FormGroup name="id">
                                 <FormLabel>ID</FormLabel>
-                                <Margin top={0.5}>
+                                <Margin top={0.5} bottom={2}>
-                                  <Input
+                                  <Input onBlur={null} big monospace type="text" value={id} />
-                                    onBlur={null}
-                                    big
-                                    monospace
-                                    type="text"
-                                    value={id}
-                                  />
                                 </Margin>
                               </FormGroup>
                             </FlexItem>
                             <FlexItem>
                               <FormGroup name="subnet">
                                 <FormLabel>Subnet</FormLabel>
-                                <Margin top={0.5}>
+                                <Margin top={0.5} bottom={2}>
-                                  <Input
+                                  <Input onBlur={null} big monospace type="text" value={subnet} />
-                                    onBlur={null}
-                                    big
-                                    monospace
-                                    type="text"
-                                    value={subnet}
-                                  />
                                 </Margin>
                               </FormGroup>
                             </FlexItem>

packages/my-joy-beta/src/components/empty.js

@@ -10,15 +10,19 @@ const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
 `;
 
+const FullWidthCard = styled(Card)`
+  width: 100%;
+`
+
 export default ({ children }) => (
-  <Card>
+  <FullWidthCard>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <img src={NoPackagesImage} />
+          <img src={NoPackagesImage} alt="Sad Animal"/>
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>
     </Padding>
-  </Card>
+  </FullWidthCard>
 );

packages/my-joy-beta/src/components/firewall.js

@@ -1,35 +1,26 @@
+/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 
-import {
+import { H3, FormGroup, FormLabel, Toggle, TagList, P, Strong, Card } from 'joyent-ui-toolkit';
-  H3,
-  FormGroup,
-  FormLabel,
-  Toggle,
-  TagList,
-  P,
-  Strong,
-  Card
-} from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
 
-const capitalizeFirstLetter = string =>
+const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
-  string.charAt(0).toUpperCase() + string.slice(1);
 
 const Wildcards = {
   vmall: 'All VMs in DC',
   any: 'Any'
 };
 
-const parsePartial = (p, index) => {
+const parsePartial = (p, index, style) => {
   if (p[0] === 'wildcard') {
     return (
       <Margin key={index} top={0.5} bottom={0.5}>
-        <P>{Wildcards[p[1]]}</P>
+        <P style={style}>{Wildcards[p[1]]}</P>
       </Margin>
     );
   }
@@ -41,7 +32,7 @@ const parsePartial = (p, index) => {
     return (
       <Margin left={0.5}>
         <TagList>
-          <Tag norMargin key={index} name={name} value={value} />
+          <Tag style={style} norMargin key={index} name={name} value={value} />
         </TagList>
       </Margin>
     );
@@ -51,9 +42,12 @@ const parsePartial = (p, index) => {
 const Rule = ({ enabled, rule_obj }) => {
   const { action, protocol } = rule_obj;
 
-  const froms = rule_obj.from.map(parsePartial);
+  const style = {
-  const tos = rule_obj.to.map(parsePartial);
+    color: !enabled ? '#D8D8D8' : null
+  };
 
+  const froms = rule_obj.from.map((p, index) => parsePartial(p, index, style));
+  const tos = rule_obj.to.map((p, index) => parsePartial(p, index, style));
   return (
     <Card disabled={!enabled}>
       <Padding left={3} right={3} top={1.5} bottom={1.5}>
@@ -62,7 +56,7 @@ const Rule = ({ enabled, rule_obj }) => {
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <Strong>From: </Strong>
+                  <Strong style={style}>From: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>{froms}</Flex>
@@ -72,7 +66,7 @@ const Rule = ({ enabled, rule_obj }) => {
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <Strong>To: </Strong>
+                  <Strong style={style}>To: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>{tos}</Flex>
@@ -82,12 +76,12 @@ const Rule = ({ enabled, rule_obj }) => {
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <Strong>Protocol: </Strong>
+                  <Strong style={style}>Protocol: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
                 <Margin top={0.5} bottom={0.5}>
-                  <P>{protocol.name}</P>
+                  <P style={style}>{protocol.name}</P>
                 </Margin>
               </Flex>
             </Flex>
@@ -96,12 +90,12 @@ const Rule = ({ enabled, rule_obj }) => {
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <Strong>Ports: </Strong>
+                  <Strong style={style}>Ports: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
                 <Margin top={0.5} bottom={0.5}>
-                  <P>{protocol.targets.join(';')}</P>
+                  <P style={style}>{protocol.targets.join(';')}</P>
                 </Margin>
               </Flex>
             </Flex>
@@ -110,12 +104,12 @@ const Rule = ({ enabled, rule_obj }) => {
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <Strong>Action: </Strong>
+                  <Strong style={style}>Action: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
                 <Margin top={0.5} bottom={0.5}>
-                  <P>{capitalizeFirstLetter(action)}</P>
+                  <P style={style}>{capitalizeFirstLetter(action)}</P>
                 </Margin>
               </Flex>
             </Flex>