diff --git a/consoles/my-joy-images/src/components/summary.js b/consoles/my-joy-images/src/components/summary.js
index 448ad799..3f659d77 100644
--- a/consoles/my-joy-images/src/components/summary.js
+++ b/consoles/my-joy-images/src/components/summary.js
@@ -6,6 +6,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import titleCase from 'title-case';
import remcalc from 'remcalc';
+import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import {
Card,
@@ -37,7 +38,7 @@ const VerticalDivider = styled.div`
align-self: flex-end;
margin: 0 ${remcalc(18)};
- @media (max-width: ${remcalc(767)}) {
+ @media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none;
}
`;
diff --git a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
index f86182a6..16944213 100644
--- a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
@@ -36,7 +36,7 @@ exports[`renders
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
}
.c4 {
@@ -113,10 +113,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index 917ca89f..90a13f9c 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -94,7 +94,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -483,14 +482,14 @@ exports[`renders without throwing 1`] = `
margin: 0 0.1875rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@@ -812,7 +811,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -1201,14 +1199,14 @@ exports[`renders without throwing 1`] = `
margin: 0 0.1875rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@@ -1530,7 +1528,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -1919,14 +1916,14 @@ exports[`renders without throwing 1`] = `
margin: 0 0.1875rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@@ -2248,7 +2245,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -2637,14 +2633,14 @@ exports[`renders without throwing 1`] = `
margin: 0 0.1875rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@@ -2966,7 +2962,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -3355,14 +3350,14 @@ exports[`renders without throwing 1`] = `
margin: 0 0.1875rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@@ -3684,7 +3679,6 @@ exports[`renders {children} without throwing 1`] =
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -4073,14 +4067,14 @@ exports[`renders {children} without throwing 1`] =
margin: 0 0.1875rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@@ -4452,7 +4446,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -4679,14 +4672,14 @@ exports[`renders without throwing 1`] = `
height: 3rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c14 {
width: 8.125rem;
display: table-cell;
@@ -4980,7 +4973,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -5207,14 +5199,14 @@ exports[`renders without throwing 1`] = `
height: 3rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c14 {
width: 8.125rem;
display: table-cell;
@@ -5510,7 +5502,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -5737,14 +5728,14 @@ exports[`renders without throwing 1`] = `
height: 3rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c13 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c14 {
width: 8.125rem;
display: table-cell;
@@ -6027,7 +6018,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -6252,14 +6242,14 @@ exports[`renders without throwing 1`] = `
display: block;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c16 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c17 {
width: 8.125rem;
display: table-cell;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index c3fd585d..ef7a5794 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -75,7 +75,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -360,7 +359,7 @@ Array [
border-bottom-width: 0.0625rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
@@ -976,7 +975,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -1150,7 +1148,7 @@ exports[`renders without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c9 {
width: 10rem;
display: table-cell;
@@ -1371,7 +1369,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -1545,7 +1542,7 @@ exports[`renders without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c9 {
width: 10rem;
display: table-cell;
@@ -1625,7 +1622,7 @@ exports[`renders without throwing 1`] = `
name="td"
selected={undefined}
>
- 5 months
+ 6 months
| without throwing 1`] = `
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -1509,7 +1509,7 @@ exports[`renders without throwing 1`] = `
>
without throwing 1`] = `
without throwing 1`] = `
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -3121,7 +3121,7 @@ exports[`renders without throwing 1`] = `
>
without throwing 1`] = `
without throwing 2`] = `
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -5048,7 +5048,7 @@ exports[`renders without throwing 2`] = `
>
without throwing 2`] = `
without throwi
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -7261,7 +7261,7 @@ exports[`renders without throwi
>
without throwi
without throwing 1`] = `
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -8967,7 +8967,7 @@ exports[`renders without throwing 1`] = `
>
without throwing 1`] = `
without throwing 2`] = `
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -10656,7 +10656,7 @@ exports[`renders without throwing 2`] = `
>
without throwing 2`] = `
without throwing 3`] = `
}
}
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@@ -12507,7 +12507,7 @@ exports[`renders without throwing 3`] = `
>
without throwing 3`] = `
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -633,10 +633,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -954,7 +968,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1206,10 +1220,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1566,7 +1594,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -2152,10 +2180,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -3169,7 +3211,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3278,10 +3320,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -3574,7 +3630,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3916,10 +3972,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -4361,7 +4431,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -5044,10 +5114,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -6197,7 +6281,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -6664,10 +6748,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -7141,7 +7239,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -7616,10 +7714,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -8045,7 +8157,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -8297,10 +8409,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index ca712401..90c16d44 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -189,7 +189,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -256,7 +256,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -412,10 +411,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1019,7 +1032,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1086,7 +1099,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -1242,10 +1254,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1911,7 +1937,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1978,7 +2004,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -2134,10 +2159,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -2741,7 +2780,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -2808,7 +2847,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -2964,10 +3002,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -3586,7 +3638,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3630,10 +3682,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -3851,7 +3917,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3895,10 +3961,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -4171,7 +4251,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -4275,7 +4355,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -4431,10 +4510,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -5070,7 +5163,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -5174,7 +5267,6 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -5330,10 +5422,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -5923,7 +6029,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -5960,7 +6066,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -6107,10 +6212,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -6359,7 +6478,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -6396,7 +6515,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -6543,10 +6661,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -6897,7 +7029,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -6975,7 +7107,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -7174,10 +7305,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -7728,7 +7873,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -7765,7 +7910,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -7912,10 +8056,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -8164,7 +8322,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -8201,7 +8359,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -8348,10 +8505,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -8702,7 +8873,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -8780,7 +8951,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -8979,10 +9149,24 @@ Array [
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 5b705666..dbea2bca 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -156,7 +156,7 @@ exports[`renders
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -267,7 +267,6 @@ exports[`renders
without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -682,21 +681,35 @@ exports[`renders
without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
@@ -1094,7 +1107,7 @@ exports[`renders
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1242,7 +1255,6 @@ exports[`renders
without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -1657,21 +1669,35 @@ exports[`renders
without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (min-width:37.4375rem) {
.c32 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c33 {
width: 8.125rem;
display: table-cell;
@@ -2127,7 +2153,7 @@ exports[`renders
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -2228,7 +2254,6 @@ exports[`renders
without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -2838,35 +2863,49 @@ exports[`renders
without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@@ -4235,14 +4274,14 @@ exports[`renders
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
.c51 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
}
.c3 {
@@ -4412,7 +4451,6 @@ exports[`renders
without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -5058,42 +5096,70 @@ exports[`renders
without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (max-width:37.4375rem) {
.c51 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c51 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c51 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@@ -5681,7 +5747,7 @@ exports[`renders
without throwing 1`] = `
>
without throwing 1`] = `
>
without throwing 1`] = `
without throwing 1`] = `
>
without throwing 1`] = `
without throwing 1`] = `
>
without throwing 1`] = `
>
without throwing 1`] = `
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
.c51 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
}
.c3 {
@@ -6984,7 +7050,6 @@ exports[`renders
without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -7630,42 +7695,70 @@ exports[`renders
without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (max-width:37.4375rem) {
.c51 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c51 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c51 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@@ -8253,7 +8346,7 @@ exports[`renders
without throwing 1`] = `
>
without throwing 1`] = `
>
without throwing 1`] = `
without throwing 1`] = `
>
without throwing 1`] = `
without throwing 1`] = `
>
without throwing 1`] = `
>
without throwing 1`] = `
without throwing
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
.c51 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
}
.c3 {
@@ -9751,7 +9844,6 @@ exports[`renders
without throwing
height: 1.125rem;
box-sizing: border-box;
top: 0;
- right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@@ -10397,42 +10489,70 @@ exports[`renders
without throwing
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (max-width:37.4375rem) {
.c51 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c51 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c51 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@@ -11020,7 +11140,7 @@ exports[`renders
without throwing
>
without throwing
>
without throwing
without throwing
>
without throwing
without throwing
>
without throwing
>
without throwing
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -11710,10 +11830,24 @@ exports[`renders
without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 4d98dd3f..7f599c54 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -162,7 +162,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -323,10 +323,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -942,7 +956,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1447,10 +1461,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1921,7 +1949,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -2119,10 +2147,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -2475,7 +2517,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -2638,10 +2680,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -3469,7 +3525,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3989,10 +4045,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index 5f183a05..c85186f8 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -57,7 +57,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -172,10 +172,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -580,7 +594,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -669,10 +683,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -845,7 +873,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -897,10 +925,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1063,7 +1105,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1415,10 +1457,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 966eab49..811f29c3 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -71,7 +71,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@@ -114,10 +114,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -233,7 +247,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@@ -276,10 +290,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -344,7 +372,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -403,10 +431,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -512,7 +554,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@@ -592,10 +634,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -732,7 +788,7 @@ exports[`renders without throwi
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@@ -775,10 +831,24 @@ exports[`renders without throwi
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1515,7 +1585,7 @@ exports[`renders without throwi
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1860,14 +1930,28 @@ exports[`renders without throwi
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media (max-width:37.4375rem) {
.c19 {
display: none;
}
@@ -2134,7 +2218,7 @@ exports[`renders without throwi
>
without throwi
without throwi
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3828,14 +3912,28 @@ exports[`renders without throwi
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
}
-@media (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
+ }
+}
+
+@media (max-width:37.4375rem) {
.c19 {
display: none;
}
@@ -4102,7 +4200,7 @@ exports[`renders without throwi
>
without throwi
without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -336,10 +336,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -959,7 +973,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -1429,10 +1443,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -1876,7 +1904,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -2050,10 +2078,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -2695,7 +2737,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -3176,10 +3218,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -4106,7 +4162,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -4587,10 +4643,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -5071,7 +5141,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -5245,10 +5315,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -5557,7 +5641,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -5720,10 +5804,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -5993,7 +6091,7 @@ exports[`renders without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@@ -6188,10 +6286,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c0 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c0 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c0 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index b0eb8528..e5386bb2 100644
--- a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -64,7 +64,7 @@ exports[`renders without throwing 1`] = `
.c4 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
}
.c10 {
@@ -138,10 +138,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c4 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c4 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c4 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
@@ -302,7 +316,7 @@ exports[`renders without throwing 1`] = `
.c4 {
box-sizing: border-box;
width: 100%;
- max-width: 62.5rem;
+ max-width: 78.75rem;
}
.c10 {
@@ -376,10 +390,24 @@ exports[`renders without throwing 1`] = `
}
}
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
.c4 {
- padding-left: 0.375rem;
- padding-right: 0.375rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+ .c4 {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+ .c4 {
+ padding-left: 4.375rem;
+ padding-right: 4.375rem;
}
}
diff --git a/consoles/my-joy-navigation/src/components/header.js b/consoles/my-joy-navigation/src/components/header.js
index e3a9c973..2fc957c3 100644
--- a/consoles/my-joy-navigation/src/components/header.js
+++ b/consoles/my-joy-navigation/src/components/header.js
@@ -4,7 +4,7 @@ import emotion from 'preact-emotion';
import remcalc from 'remcalc';
import outy from 'outy';
-import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
+import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
export const Item = emotion('div')`
order: 0;
diff --git a/packages/instance-steps/src/image/components.js b/packages/instance-steps/src/image/components.js
index 8d3d1881..4f6f4863 100644
--- a/packages/instance-steps/src/image/components.js
+++ b/packages/instance-steps/src/image/components.js
@@ -13,15 +13,22 @@ import * as Assets from 'joyent-logo-assets';
import {
H3,
P,
- FormGroup,
+ FormGroup as BaseFormGroup,
SectionList as BaseSectionList,
SectionListItem,
SectionListAnchor,
H4 as BaseH4,
Select,
- Card as BaseCard
+ Card as BaseCard,
+ StyledBreakpoints as breakpoints
} from 'joyent-ui-toolkit';
+const imageColSize = {
+ small: 6,
+ medium: 4,
+ large: 3
+};
+
const Version = styled(Select)`
min-width: 100%;
width: ${remcalc(144)};
@@ -40,6 +47,11 @@ const SectionList = styled(BaseSectionList)`
const Card = styled(BaseCard)`
border-bottom: 0;
+ width: 100%;
+`;
+
+const FormGroup = styled(BaseFormGroup)`
+ width: 100%;
`;
const H4 = styled(BaseH4)`
@@ -79,7 +91,7 @@ const Image = ({ onClick, active, ...image }) => {
const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
return (
-
+
props.theme.greyDark};
+ font-size: ${remcalc(13)};
+ height: auto;
+ padding: 0;
+ `};
+`;
+
+const TableTd = styled(BaseTableTd)`
+ @media only screen and (min-width: ${remcalc(
+ breakpoints.medium.lower
+ )}) and (max-width: ${remcalc(700)}) {
+ &:not(:first-child) {
+ width: auto;
+ }
+ padding: 0 ${remcalc(3)};
+ }
+
+ ${is('smallScreen')`
+ border: none;
+ font-size: ${remcalc(15)};
+ height: auto;
+ padding: ${remcalc(4)} 0;
+ `};
+`;
+
+const FormItem = styled('form')`
+ border: 1px solid ${props => props.theme.grey};
+ border-radius: 4px;
+
+ ${is('selected')`
+ border-color: ${props => props.theme.primary};
+ background-color: rgba(59,70,204,0.05);
+ `};
+`;
+
+const PackageSpecs = styled('div')`
+ border-top: 1px solid ${props => props.theme.grey};
+
+ ${is('selected')`
+ border-color: ${props => props.theme.primary};
+ `};
+`;
+
export const Filters = ({ onResetFilters }) => (
@@ -129,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
);
+export const MobilePackage = ({
+ selected = false,
+ id,
+ name,
+ group,
+ memory,
+ price,
+ vcpus,
+ disk,
+ ssd,
+ hasVms,
+ sortBy,
+ onRowClick
+}) => (
+
+ onRowClick(id)}>
+
+
+
+
+ {GroupIcons[group]}
+
+
+
+ {`${name} `}
+ {ssd && SSD}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RAM
+
+
+
+
+ Disk
+
+
+ {hasVms && (
+
+
+ vCPU
+
+
+ )}
+
+
+ $/hour
+
+
+
+
+
+ onRowClick(id)}>
+
+ {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+
+ {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+ {hasVms && (
+
+ {vcpus}
+
+ )}
+
+ {fourDecimals(price)}
+
+
+
+
+
+
+
+);
export const Package = ({
selected = false,
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index 52b17b2d..320c0f86 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -23,10 +23,19 @@ import Step, {
import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
-import { Filters, Packages, Package, Overview } from './components';
+import {
+ Filters,
+ Packages,
+ Package,
+ MobilePackage,
+ Overview
+} from './components';
import getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json';
import { Forms, Values } from '../constants';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
@@ -84,16 +93,9 @@ const PackageComponent = ({
) : (
-
+
{packages.map(({ id, ...pkg }) => (
-
))}
-
+
+
+
+ {packages.map(({ id, ...pkg }) => (
+
+ ))}
+
+