without throwing 1`] = `
Sorry, but we weren’t able to find any firewall rules.
@@ -4920,6 +5044,7 @@ Array [
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -5268,6 +5393,7 @@ Array [
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -5657,6 +5783,7 @@ Array [
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -6508,6 +6635,7 @@ Array [
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -6856,6 +6984,7 @@ Array [
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -7245,6 +7374,7 @@ Array [
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 568b691f..61a01821 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -229,6 +229,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -478,7 +479,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -1263,7 +1264,7 @@ exports[`renders
without throwing 1`] = `
margin-top: 0.1875rem;
}
-.c42 {
+.c43 {
margin-bottom: 0.75rem;
}
@@ -1271,7 +1272,7 @@ exports[`renders
without throwing 1`] = `
margin-bottom: 1.5rem;
}
-.c40 {
+.c41 {
padding: 2.25rem;
}
@@ -1308,7 +1309,7 @@ exports[`renders
without throwing 1`] = `
margin-left: 0.375rem;
}
-.c28 {
+.c29 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -1318,78 +1319,78 @@ exports[`renders
without throwing 1`] = `
display: none;
}
-.c28[type='checkbox'],
-.c28[type='radio'] {
+.c29[type='checkbox'],
+.c29[type='radio'] {
box-sizing: border-box;
padding: 0;
}
-.c28[type='number']::-webkit-inner-spin-button,
-.c28[type='number']::-webkit-outer-spin-button {
+.c29[type='number']::-webkit-inner-spin-button,
+.c29[type='number']::-webkit-outer-spin-button {
height: auto;
}
-.c28[type='search'] {
+.c29[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
-.c28[type='search']::-webkit-search-cancel-button,
-.c28[type='search']::-webkit-search-decoration {
+.c29[type='search']::-webkit-search-cancel-button,
+.c29[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
-.c28::-webkit-file-upload-button {
+.c29::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
-.c28:checked + label::after {
+.c29:checked + label::after {
opacity: 1;
}
-.c28:selected + label::after {
+.c29:selected + label::after {
opacity: 1;
}
-.c28:checked + label {
+.c29:checked + label {
border-color: rgb(59,70,204);
}
-.c28:selected + label {
+.c29:selected + label {
border-color: rgb(59,70,204);
}
-.c28:disabled + label {
+.c29:disabled + label {
background-color: rgb(249,249,249);
cursor: not-allowed;
}
-.c23 {
+.c24 {
padding: 0rem;
padding-left: 0.75rem;
}
-.c25 {
+.c26 {
padding-top: 0.25rem;
}
-.c31 {
+.c32 {
margin-bottom: 0.125rem;
margin-left: 0.5625rem;
}
-.c35 {
+.c36 {
padding: 0rem;
}
-.c19 {
+.c20 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@@ -1500,6 +1501,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -1534,7 +1536,17 @@ exports[`renders
without throwing 1`] = `
margin-left: -0.625rem;
}
-.c44 {
+.c15 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ display: block;
+}
+
+.c45 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
@@ -1542,20 +1554,20 @@ exports[`renders
without throwing 1`] = `
margin: 0;
}
-.c44 + p,
-.c44 + small,
-.c44 + h1,
-.c44 + h2,
-.c44 + label,
-.c44 + h3,
-.c44 + h4,
-.c44 + h5,
-.c44 + div,
-.c44 + span {
+.c45 + p,
+.c45 + small,
+.c45 + h1,
+.c45 + h2,
+.c45 + label,
+.c45 + h3,
+.c45 + h4,
+.c45 + h5,
+.c45 + div,
+.c45 + span {
margin-top: 1.5rem;
}
-.c18 {
+.c19 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -1608,7 +1620,7 @@ exports[`renders
without throwing 1`] = `
justify-content: space-between;
}
-.c41 {
+.c42 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1639,7 +1651,7 @@ exports[`renders
without throwing 1`] = `
align-items: center;
}
-.c15 {
+.c16 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1652,7 +1664,30 @@ exports[`renders
without throwing 1`] = `
width: 100%;
}
-.c16 {
+.c16:before,
+.c16:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.c16:before {
+ top: -0.4375rem;
+ right: 1.0625rem;
+ border-width: 0 0.34375rem 0.4375rem 0.34375rem;
+ border-color: transparent transparent rgb(216,216,216) transparent;
+}
+
+.c16:after {
+ top: -0.375rem;
+ right: 1.125rem;
+ border-width: 0 0.28125rem 0.375rem 0.28125rem;
+ border-color: transparent transparent rgb(255,255,255) transparent;
+}
+
+.c17 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
@@ -1661,11 +1696,11 @@ exports[`renders
without throwing 1`] = `
background-color: rgb(210,67,58);
}
-.c17 {
+.c18 {
padding: 1.125rem 1.125rem;
}
-.c39 {
+.c40 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@@ -1687,7 +1722,7 @@ exports[`renders
without throwing 1`] = `
border-color: rgb(216,216,216);
}
-.c29 {
+.c30 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
@@ -1705,7 +1740,7 @@ exports[`renders
without throwing 1`] = `
height: 1.125rem;
}
-.c29::after {
+.c30::after {
opacity: 0;
content: '';
position: absolute;
@@ -1722,7 +1757,7 @@ exports[`renders
without throwing 1`] = `
transform: rotate(-45deg);
}
-.c27 {
+.c28 {
display: inline-block;
vertical-align: text-bottom;
width: 1.125rem;
@@ -1731,7 +1766,7 @@ exports[`renders
without throwing 1`] = `
cursor: pointer;
}
-.c26 {
+.c27 {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
@@ -1743,7 +1778,7 @@ exports[`renders
without throwing 1`] = `
align-items: center;
}
-.c26 label {
+.c27 label {
font-weight: 400;
}
@@ -1783,7 +1818,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -1839,7 +1874,7 @@ exports[`renders
without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
-.c20 {
+.c21 {
overflow: hidden;
border-spacing: 0;
border-collapse: separate;
@@ -1848,24 +1883,24 @@ exports[`renders
without throwing 1`] = `
max-width: 100%;
}
-.c21 {
+.c22 {
width: 100%;
background: rgb(250,250,250);
}
-.c21 th:first-child {
+.c22 th:first-child {
border-top-left-radius: 0.25rem;
}
-.c21 th:last-child {
+.c22 th:last-child {
border-top-right-radius: 0.25rem;
}
-.c37 {
+.c38 {
width: 100%;
}
-.c24 {
+.c25 {
border-width: 0.0625rem;
border-style: solid;
border-color: rgb(216,216,216);
@@ -1884,15 +1919,15 @@ exports[`renders
without throwing 1`] = `
border-bottom-width: 0;
}
-.c24:not(:first-child) {
+.c25:not(:first-child) {
border-left-width: 0;
}
-.c24:not(:last-child) {
+.c25:not(:last-child) {
border-right-width: 0;
}
-.c30 {
+.c31 {
border-width: 0.0625rem;
border-style: solid;
border-color: rgb(216,216,216);
@@ -1916,43 +1951,11 @@ exports[`renders
without throwing 1`] = `
font-weight: bold;
}
-.c30:not(:first-child) {
+.c31:not(:first-child) {
border-left-width: 0;
}
-.c30:not(:last-child) {
- border-right-width: 0;
-}
-
-.c32 {
- border-width: 0.0625rem;
- border-style: solid;
- border-color: rgb(216,216,216);
- border-spacing: 0;
- white-space: nowrap;
- box-sizing: border-box;
- padding: 0 1.5rem;
- height: 3.75rem;
- width: 9.375rem;
- display: table-cell;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- vertical-align: middle;
- text-align: left;
- height: 2.625rem;
- color: rgb(189,189,189);
- font-weight: 500;
- border-bottom-width: 0;
-}
-
-.c32:not(:first-child) {
- border-left-width: 0;
-}
-
-.c32:not(:last-child) {
+.c31:not(:last-child) {
border-right-width: 0;
}
@@ -1965,8 +1968,8 @@ exports[`renders
without throwing 1`] = `
box-sizing: border-box;
padding: 0 1.5rem;
height: 3.75rem;
- width: 0rem;
- display: none;
+ width: 9.375rem;
+ display: table-cell;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
@@ -2020,7 +2023,39 @@ exports[`renders
without throwing 1`] = `
border-right-width: 0;
}
-.c36 {
+.c35 {
+ border-width: 0.0625rem;
+ border-style: solid;
+ border-color: rgb(216,216,216);
+ border-spacing: 0;
+ white-space: nowrap;
+ box-sizing: border-box;
+ padding: 0 1.5rem;
+ height: 3.75rem;
+ width: 0rem;
+ display: none;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ vertical-align: middle;
+ text-align: left;
+ height: 2.625rem;
+ color: rgb(189,189,189);
+ font-weight: 500;
+ border-bottom-width: 0;
+}
+
+.c35:not(:first-child) {
+ border-left-width: 0;
+}
+
+.c35:not(:last-child) {
+ border-right-width: 0;
+}
+
+.c37 {
border-width: 0.0625rem;
border-style: solid;
border-color: rgb(216,216,216);
@@ -2037,15 +2072,15 @@ exports[`renders
without throwing 1`] = `
border-bottom-width: 0;
}
-.c36:not(:first-child) {
+.c37:not(:first-child) {
border-left-width: 0;
}
-.c36:not(:last-child) {
+.c37:not(:last-child) {
border-right-width: 0;
}
-.c22 {
+.c23 {
display: table-row;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
@@ -2057,20 +2092,20 @@ exports[`renders
without throwing 1`] = `
box-shadow: none;
}
-.c22:last-child {
+.c23:last-child {
box-shadow: none;
}
-.c22:last-child td {
+.c23:last-child td {
border-bottom-width: 0.0625rem;
}
-.c43 {
+.c44 {
color: rgb(151,151,151);
text-align: center;
}
-.c38 {
+.c39 {
width: calc(100% - 2px);
border-top: none;
}
@@ -2100,15 +2135,33 @@ exports[`renders
without throwing 1`] = `
}
}
+@media only screen and (min-width:48em) {
+ .c15 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c15 {
+ -webkit-flex-basis: 58.333333333333336%;
+ -ms-flex-preferred-size: 58.333333333333336%;
+ flex-basis: 58.333333333333336%;
+ max-width: 58.333333333333336%;
+ }
+}
+
@media only screen and (min-width:47.9375rem) {
- .c33 {
+ .c34 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
- .c34 {
+ .c35 {
width: 8.125rem;
display: table-cell;
}
@@ -2181,60 +2234,68 @@ exports[`renders
without throwing 1`] = `
className="c14"
>
-
-
- Ooops!
-
-
- An error occurred while loading your instances
-
+
+
+
+ Ooops!
+
+
+ An error occurred while loading your instances
+
+
+
without throwing 1`] = `
You haven't created any instances yet, but they're really easy to set up.
Click above to get going.
@@ -2826,6 +2887,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -3039,7 +3101,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -4257,6 +4319,8 @@ exports[`renders
without throwing 1`] = `
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -4516,6 +4580,8 @@ exports[`renders
without throwing 1`] = `
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -4773,6 +4839,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -5079,7 +5146,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -6678,6 +6745,8 @@ exports[`renders
without throwing 1`] = `
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -6937,6 +7006,8 @@ exports[`renders
without throwing 1`] = `
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -7194,6 +7265,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -7500,7 +7572,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -9099,6 +9171,8 @@ exports[`renders
without throwing
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -9358,6 +9432,8 @@ exports[`renders
without throwing
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -9652,6 +9728,8 @@ exports[`renders
without throwing
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -9826,6 +9904,7 @@ exports[`renders
without throwing
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -10132,7 +10211,7 @@ exports[`renders
without throwing
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -11660,6 +11739,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -11775,7 +11855,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index e63a33e3..879e81fb 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -144,6 +144,7 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -293,7 +294,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -938,6 +939,7 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -952,8 +954,10 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
float: right;
font-size: 0.8125rem;
+ margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@@ -1392,7 +1396,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -1453,7 +1457,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 6rem;
min-height: 6rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -1940,7 +1944,7 @@ exports[`renders without throwing 1`] = `
margin-left: 0.375rem;
}
-.c21 {
+.c22 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@@ -2051,6 +2055,7 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -2085,7 +2090,17 @@ exports[`renders without throwing 1`] = `
margin-left: -0.625rem;
}
-.c22 {
+.c17 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ display: block;
+}
+
+.c23 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
@@ -2093,20 +2108,20 @@ exports[`renders without throwing 1`] = `
margin: 0;
}
-.c22 + p,
-.c22 + small,
-.c22 + h1,
-.c22 + h2,
-.c22 + label,
-.c22 + h3,
-.c22 + h4,
-.c22 + h5,
-.c22 + div,
-.c22 + span {
+.c23 + p,
+.c23 + small,
+.c23 + h1,
+.c23 + h2,
+.c23 + label,
+.c23 + h3,
+.c23 + h4,
+.c23 + h5,
+.c23 + div,
+.c23 + span {
margin-top: 1.5rem;
}
-.c20 {
+.c21 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -2172,7 +2187,7 @@ exports[`renders without throwing 1`] = `
justify-content: space-between;
}
-.c17 {
+.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -2185,7 +2200,30 @@ exports[`renders without throwing 1`] = `
width: 100%;
}
-.c18 {
+.c18:before,
+.c18:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.c18:before {
+ top: -0.4375rem;
+ right: 1.0625rem;
+ border-width: 0 0.34375rem 0.4375rem 0.34375rem;
+ border-color: transparent transparent rgb(216,216,216) transparent;
+}
+
+.c18:after {
+ top: -0.375rem;
+ right: 1.125rem;
+ border-width: 0 0.28125rem 0.375rem 0.28125rem;
+ border-color: transparent transparent rgb(255,255,255) transparent;
+}
+
+.c19 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
@@ -2194,7 +2232,7 @@ exports[`renders without throwing 1`] = `
background-color: rgb(210,67,58);
}
-.c19 {
+.c20 {
padding: 1.125rem 1.125rem;
}
@@ -2234,7 +2272,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -2315,6 +2353,24 @@ exports[`renders without throwing 1`] = `
}
}
+@media only screen and (min-width:48em) {
+ .c17 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c17 {
+ -webkit-flex-basis: 58.333333333333336%;
+ -ms-flex-preferred-size: 58.333333333333336%;
+ flex-basis: 58.333333333333336%;
+ max-width: 58.333333333333336%;
+ }
+}
+
@@ -2390,24 +2446,32 @@ exports[`renders
without throwing 1`] = `
className="c16"
>
-
-
- Ooops!
-
-
- An error occurred while loading your metadata
-
+
+
+
+ Ooops!
+
+
+ An error occurred while loading your metadata
+
+
+
@@ -2415,7 +2479,7 @@ exports[`renders
without throwing 1`] = `
className="c16"
>
0
key:value pair
@@ -2656,6 +2720,7 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -2771,7 +2836,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -3654,6 +3719,7 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -3668,8 +3734,10 @@ exports[`renders without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
float: right;
font-size: 0.8125rem;
+ margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@@ -4099,7 +4167,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -4160,7 +4228,7 @@ exports[`renders without throwing 1`] = `
width: 18.75rem;
height: 6rem;
min-height: 6rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index d5153aed..6ed5c584 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -177,7 +177,7 @@ exports[`renders without throwing 1`] = `
margin: 0;
}
-.c12 {
+.c13 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@@ -224,6 +224,16 @@ exports[`renders without throwing 1`] = `
display: block;
}
+.c8 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ display: block;
+}
+
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
@@ -245,7 +255,7 @@ exports[`renders without throwing 1`] = `
margin-top: 1.5rem;
}
-.c11 {
+.c12 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -253,7 +263,7 @@ exports[`renders without throwing 1`] = `
margin: 0;
}
-.c8 {
+.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -266,7 +276,30 @@ exports[`renders without throwing 1`] = `
width: 100%;
}
-.c9 {
+.c9:before,
+.c9:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.c9:before {
+ top: -0.4375rem;
+ right: 1.0625rem;
+ border-width: 0 0.34375rem 0.4375rem 0.34375rem;
+ border-color: transparent transparent rgb(216,216,216) transparent;
+}
+
+.c9:after {
+ top: -0.375rem;
+ right: 1.125rem;
+ border-width: 0 0.28125rem 0.375rem 0.28125rem;
+ border-color: transparent transparent rgb(255,255,255) transparent;
+}
+
+.c10 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
@@ -275,7 +308,7 @@ exports[`renders without throwing 1`] = `
background-color: rgb(210,67,58);
}
-.c10 {
+.c11 {
padding: 1.125rem 1.125rem;
}
@@ -322,6 +355,24 @@ exports[`renders without throwing 1`] = `
}
}
+@media only screen and (min-width:48em) {
+ .c8 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c8 {
+ -webkit-flex-basis: 58.333333333333336%;
+ -ms-flex-preferred-size: 58.333333333333336%;
+ flex-basis: 58.333333333333336%;
+ max-width: 58.333333333333336%;
+ }
+}
+
@@ -362,24 +413,32 @@ exports[`renders
without throwing 1`] = `
className="c7"
>
-
-
- Ooops!
-
-
- An error occurred while loading your networks
-
+
+
+
+ Ooops!
+
+
+ An error occurred while loading your networks
+
+
+
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 8fbd89cc..a81f349d 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -540,7 +540,7 @@ exports[`renders
without throwing 1`] = `
margin-left: 0.375rem;
}
-.c10 {
+.c12 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@@ -607,7 +607,36 @@ exports[`renders
without throwing 1`] = `
align-items: center;
}
-.c9 {
+.c6 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 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.625rem;
+ margin-left: -0.625rem;
+}
+
+.c7 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ display: block;
+}
+
+.c11 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -615,7 +644,7 @@ exports[`renders
without throwing 1`] = `
margin: 0;
}
-.c6 {
+.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -628,7 +657,30 @@ exports[`renders
without throwing 1`] = `
width: 100%;
}
-.c7 {
+.c8:before,
+.c8:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.c8:before {
+ top: -0.4375rem;
+ right: 1.0625rem;
+ border-width: 0 0.34375rem 0.4375rem 0.34375rem;
+ border-color: transparent transparent rgb(216,216,216) transparent;
+}
+
+.c8:after {
+ top: -0.375rem;
+ right: 1.125rem;
+ border-width: 0 0.28125rem 0.375rem 0.28125rem;
+ border-color: transparent transparent rgb(255,255,255) transparent;
+}
+
+.c9 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
@@ -637,7 +689,7 @@ exports[`renders
without throwing 1`] = `
background-color: rgb(210,67,58);
}
-.c8 {
+.c10 {
padding: 1.125rem 1.125rem;
}
@@ -666,6 +718,24 @@ exports[`renders
without throwing 1`] = `
}
}
+@media only screen and (min-width:48em) {
+ .c7 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c7 {
+ -webkit-flex-basis: 58.333333333333336%;
+ -ms-flex-preferred-size: 58.333333333333336%;
+ flex-basis: 58.333333333333336%;
+ max-width: 58.333333333333336%;
+ }
+}
+
@@ -709,20 +779,28 @@ exports[`renders
without throwing 1`] = `
>
-
-
- Ooops!
-
-
- some mutation error
-
+
+
+
+ Ooops!
+
+
+ some mutation error
+
+
+
@@ -1023,6 +1101,8 @@ exports[`renders
without throwi
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -1135,6 +1215,8 @@ exports[`renders
without throwi
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -1495,6 +1577,8 @@ exports[`renders
without throwi
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -1714,6 +1798,7 @@ exports[`renders
without throwi
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
}
.c32 {
@@ -1724,6 +1809,7 @@ exports[`renders
without throwi
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -1954,7 +2040,7 @@ exports[`renders
without throwi
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -3290,6 +3376,8 @@ exports[`renders
without throwi
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -3402,6 +3490,8 @@ exports[`renders
without throwi
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -3762,6 +3852,8 @@ exports[`renders
without throwi
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
+ min-height: 0rem;
+ height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -3981,6 +4073,7 @@ exports[`renders
without throwi
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
}
.c32 {
@@ -3991,6 +4084,7 @@ exports[`renders
without throwi
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -4221,7 +4315,7 @@ exports[`renders
without throwi
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 22f2c425..9506c5e2 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -145,6 +145,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -294,7 +295,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -942,6 +943,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -956,8 +958,10 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
float: right;
font-size: 0.8125rem;
+ margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@@ -1459,7 +1463,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -2039,6 +2043,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -2188,7 +2193,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -2858,6 +2863,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -2872,8 +2878,10 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
float: right;
font-size: 0.8125rem;
+ margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@@ -3356,7 +3364,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -4390,6 +4398,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -4404,8 +4413,10 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
float: right;
font-size: 0.8125rem;
+ margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@@ -4888,7 +4899,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -5513,6 +5524,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -5662,7 +5674,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -6053,6 +6065,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -6168,7 +6181,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@@ -6515,6 +6528,7 @@ exports[`renders
without throwing 1`] = `
display: block;
color: rgb(70,70,70);
text-align: left;
+ margin-bottom: 0.1875rem;
margin-right: 0.75rem;
font-weight: 600;
white-space: pre;
@@ -6664,7 +6678,7 @@ exports[`renders
without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
- padding: 0.8125rem 1.125rem;
+ padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
diff --git a/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-1-snap.png b/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-1-snap.png
index 59b49944..67a797fb 100644
Binary files a/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-1-snap.png and b/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-1-snap.png differ
diff --git a/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-match-1-snap.png b/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-match-1-snap.png
index b598f285..791726c3 100644
Binary files a/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-match-1-snap.png and b/packages/my-joy-beta/src/containers/navigation/__tests__/__image_snapshots__/breadcrumb-ui-js-breadcrumb-match-1-snap.png differ
diff --git a/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index 3fe0976d..18d20f70 100644
--- a/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -10,18 +10,9 @@ exports[`renders
without throwing 1`] = `
width: 100%;
padding-left: 0;
padding-right: 0;
- border-bottom: 0.0625rem solid rgb(216,216,216);
}
.c1 {
- margin-right: auto;
- margin-left: auto;
- box-sizing: border-box;
- width: 100%;
- max-width: 62.5rem;
-}
-
-.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -40,7 +31,7 @@ exports[`renders
without throwing 1`] = `
margin-left: -0.625rem;
}
-.c3 {
+.c2 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -50,34 +41,34 @@ exports[`renders
without throwing 1`] = `
display: block;
}
-.c5 {
+.c4 {
color: rgba(73,73,73,1);
- font-weight: normal;
- line-height: 1.875rem;
- font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
margin: 0;
- color: rgb(59,70,204);
+ font-weight: normal;
margin: 0.75rem 0;
}
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
- margin-top: 1.5rem;
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+ margin-top: 0.75rem;
}
-.c6 {
+.c5 {
margin: 0.1875rem 0.625rem;
}
-.c4 {
+.c3 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -88,33 +79,12 @@ exports[`renders
without throwing 1`] = `
align-items: center;
}
-@media only screen and (min-width:48em) {
- .c1 {
- width: 46rem;
- }
-}
-
-@media only screen and (min-width:64em) {
- .c1 {
- width: 56rem;
- }
-}
-
-@media only screen and (min-width:75em) {
- .c1 {
- width: 59rem;
- }
-}
-
-@media only screen and (max-width:47.9375rem) {
- .c1 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
- }
+.c3:last-child svg {
+ display: none;
}
@media only screen and (min-width:0em) {
- .c3 {
+ .c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@@ -127,42 +97,38 @@ exports[`renders
without throwing 1`] = `
>
-
-
- Instances
-
-
+ }
+ viewBox="0 0 9.6 6"
+ width="9.6"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+
+
@@ -179,18 +145,9 @@ exports[`renders
without throwing 1`] = `
width: 100%;
padding-left: 0;
padding-right: 0;
- border-bottom: 0.0625rem solid rgb(216,216,216);
}
.c1 {
- margin-right: auto;
- margin-left: auto;
- box-sizing: border-box;
- width: 100%;
- max-width: 62.5rem;
-}
-
-.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -209,7 +166,7 @@ exports[`renders
without throwing 1`] = `
margin-left: -0.625rem;
}
-.c3 {
+.c2 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -219,34 +176,34 @@ exports[`renders
without throwing 1`] = `
display: block;
}
-.c5 {
+.c4 {
color: rgba(73,73,73,1);
- font-weight: normal;
- line-height: 1.875rem;
- font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
margin: 0;
- color: rgb(59,70,204);
+ font-weight: normal;
margin: 0.75rem 0;
}
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
- margin-top: 1.5rem;
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+ margin-top: 0.75rem;
}
-.c6 {
+.c5 {
margin: 0.1875rem 0.625rem;
}
-.c4 {
+.c3 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -257,33 +214,12 @@ exports[`renders
without throwing 1`] = `
align-items: center;
}
-@media only screen and (min-width:48em) {
- .c1 {
- width: 46rem;
- }
-}
-
-@media only screen and (min-width:64em) {
- .c1 {
- width: 56rem;
- }
-}
-
-@media only screen and (min-width:75em) {
- .c1 {
- width: 59rem;
- }
-}
-
-@media only screen and (max-width:47.9375rem) {
- .c1 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
- }
+.c3:last-child svg {
+ display: none;
}
@media only screen and (min-width:0em) {
- .c3 {
+ .c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@@ -296,70 +232,66 @@ exports[`renders
without throwing 1`] = `
>
-
-
- Instances
-
-
-
+
+ }
+ viewBox="0 0 9.6 6"
+ width="9.6"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+
+
diff --git a/packages/ui-toolkit/.eslintrc b/packages/ui-toolkit/.eslintrc
index 54492a1a..740ed1f2 100644
--- a/packages/ui-toolkit/.eslintrc
+++ b/packages/ui-toolkit/.eslintrc
@@ -3,6 +3,7 @@
"rules": {
"no-console": 1,
"new-cap": 0,
- "jsx-a11y/href-no-hash": 0
+ "jsx-a11y/href-no-hash": 0,
+ "no-negated-condition": 0
}
}
diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index 90e080dc..eec627f2 100644
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@@ -45,6 +45,7 @@
"unitcalc": "^1.2.3"
},
"devDependencies": {
+ "apr-for-each": "^3.0.3",
"babel-cli": "^6.26.0",
"babel-preset-joyent-portal": "^7.0.1",
"classnames": "^2.2.5",
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
index d3146825..b844f4c4 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
@@ -1,34 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb Default Breadcrumb 1`] = `
-.c5 {
+.c4 {
color: rgba(73,73,73,1);
- font-weight: normal;
- line-height: 1.875rem;
- font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
margin: 0;
- color: rgb(59,70,204);
+ font-weight: normal;
margin: 0.75rem 0;
}
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
- margin-top: 1.5rem;
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+ margin-top: 0.75rem;
}
-.c6 {
+.c5 {
margin: 0.1875rem 0.625rem;
}
-.c4 {
+.c3 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -39,6 +39,10 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
align-items: center;
}
+.c3:last-child svg {
+ display: none;
+}
+
.c0 {
margin-right: auto;
margin-left: auto;
@@ -48,18 +52,9 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
width: 100%;
padding-left: 0;
padding-right: 0;
- border-bottom: 0.0625rem solid rgb(216,216,216);
}
.c1 {
- margin-right: auto;
- margin-left: auto;
- box-sizing: border-box;
- width: 100%;
- max-width: 62.5rem;
-}
-
-.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -78,7 +73,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
margin-left: -0.625rem;
}
-.c3 {
+.c2 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -88,33 +83,8 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
display: block;
}
-@media only screen and (min-width:48em) {
- .c1 {
- width: 46rem;
- }
-}
-
-@media only screen and (min-width:64em) {
- .c1 {
- width: 56rem;
- }
-}
-
-@media only screen and (min-width:75em) {
- .c1 {
- width: 59rem;
- }
-}
-
-@media only screen and (max-width:47.9375rem) {
- .c1 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
- }
-}
-
@media only screen and (min-width:0em) {
- .c3 {
+ .c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@@ -127,126 +97,122 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
>
-
-
+
+
-
- Warp Records Blog
-
-
-
+
+
-
- Services
-
-
-
+
+ }
+ viewBox="0 0 9.6 6"
+ width="9.6"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+
+
@@ -256,11 +222,11 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
exports[`Breadcrumb Default Item 1`] = `
.c1 {
color: rgba(73,73,73,1);
- font-weight: normal;
- line-height: 1.875rem;
- font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
margin: 0;
- color: rgb(59,70,204);
+ font-weight: normal;
margin: 0.75rem 0;
}
@@ -274,7 +240,7 @@ exports[`Breadcrumb Default Item 1`] = `
.c1 + h5,
.c1 + div,
.c1 + span {
- margin-top: 1.5rem;
+ margin-top: 0.75rem;
}
.c2 {
@@ -292,15 +258,19 @@ exports[`Breadcrumb Default Item 1`] = `
align-items: center;
}
+.c0:last-child svg {
+ display: none;
+}
+
-
Home
-
+
`;
exports[`Message Message Error 1`] = `
-.c3 {
+.c0 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 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.625rem;
+ margin-left: -0.625rem;
+}
+
+.c1 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ display: block;
+}
+
+.c5 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -92,7 +199,7 @@ exports[`Message Message Error 1`] = `
margin: 0;
}
-.c0 {
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -105,7 +212,30 @@ exports[`Message Message Error 1`] = `
width: 100%;
}
-.c1 {
+.c2:before,
+.c2:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.c2:before {
+ top: -0.4375rem;
+ right: 1.0625rem;
+ border-width: 0 0.34375rem 0.4375rem 0.34375rem;
+ border-color: transparent transparent rgb(216,216,216) transparent;
+}
+
+.c2:after {
+ top: -0.375rem;
+ right: 1.125rem;
+ border-width: 0 0.28125rem 0.375rem 0.28125rem;
+ border-color: transparent transparent rgb(255,255,255) transparent;
+}
+
+.c3 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
@@ -114,11 +244,11 @@ exports[`Message Message Error 1`] = `
background-color: rgb(210,67,58);
}
-.c2 {
+.c4 {
padding: 1.125rem 1.125rem;
}
-.c4 {
+.c6 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@@ -127,31 +257,86 @@ exports[`Message Message Error 1`] = `
font-size: 0.8125rem;
}
+@media only screen and (min-width:48em) {
+ .c1 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c1 {
+ -webkit-flex-basis: 58.333333333333336%;
+ -ms-flex-preferred-size: 58.333333333333336%;
+ flex-basis: 58.333333333333336%;
+ max-width: 58.333333333333336%;
+ }
+}
+
-
-
- Choosing deployment data center
-
-
- Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
-
+
+
+
+ Choosing deployment data center
+
+
+ Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+
+
+
`;
exports[`Message Message Warning 1`] = `
-.c3 {
+.c0 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 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.625rem;
+ margin-left: -0.625rem;
+}
+
+.c1 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ display: block;
+}
+
+.c5 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -159,7 +344,7 @@ exports[`Message Message Warning 1`] = `
margin: 0;
}
-.c0 {
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -172,7 +357,30 @@ exports[`Message Message Warning 1`] = `
width: 100%;
}
-.c1 {
+.c2:before,
+.c2:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.c2:before {
+ top: -0.4375rem;
+ right: 1.0625rem;
+ border-width: 0 0.34375rem 0.4375rem 0.34375rem;
+ border-color: transparent transparent rgb(216,216,216) transparent;
+}
+
+.c2:after {
+ top: -0.375rem;
+ right: 1.125rem;
+ border-width: 0 0.28125rem 0.375rem 0.28125rem;
+ border-color: transparent transparent rgb(255,255,255) transparent;
+}
+
+.c3 {
border-radius: 0.1875rem 0 0 0.1875rem;
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
min-width: 0.75rem;
@@ -181,11 +389,11 @@ exports[`Message Message Warning 1`] = `
background-color: rgb(227,130,0);
}
-.c2 {
+.c4 {
padding: 1.125rem 1.125rem;
}
-.c4 {
+.c6 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@@ -194,25 +402,51 @@ exports[`Message Message Warning 1`] = `
font-size: 0.8125rem;
}
+@media only screen and (min-width:48em) {
+ .c1 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c1 {
+ -webkit-flex-basis: 58.333333333333336%;
+ -ms-flex-preferred-size: 58.333333333333336%;
+ flex-basis: 58.333333333333336%;
+ max-width: 58.333333333333336%;
+ }
+}
+