diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png index b27fdeed..20a93c68 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-1-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-1-snap.png index b907d2e3..5c997d49 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-1-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-2-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-2-snap.png index 06e13d30..b907d2e3 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-2-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-2-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-3-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-3-snap.png index b907d2e3..06e13d30 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-3-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-3-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-4-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-4-snap.png index 06e13d30..b907d2e3 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-4-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-4-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png index 0058f68a..06e13d30 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png index f0a23cfc..0058f68a 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-packages-name-stuff-image-name-stuff-2-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-packages-name-stuff-image-name-stuff-2-snap.png index d89f84c5..1802e255 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-packages-name-stuff-image-name-stuff-2-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-packages-name-stuff-image-name-stuff-2-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/image.js b/packages/my-joy-beta/src/components/create-instance/image.js index 7819adc6..a50ca7ab 100644 --- a/packages/my-joy-beta/src/components/create-instance/image.js +++ b/packages/my-joy-beta/src/components/create-instance/image.js @@ -7,19 +7,24 @@ import Flex from 'styled-flex-component'; import pascalCase from 'pascal-case'; import titleCase from 'title-case'; import remcalc from 'remcalc'; +import format from 'date-fns/format'; + +import * as Assets from 'joyent-logo-assets'; import { H3, P, FormGroup, FormLabel, - Toggle, + SectionList, + SectionListItem, + SectionListAnchor, + Anchor, H4, Select, Card } from 'joyent-ui-toolkit'; -import * as Assets from 'joyent-logo-assets'; const Version = styled(Select)` min-width: 100%; @@ -82,17 +87,21 @@ const Image = ({ onClick, active, ...image }) => { ); }; -export const ImageType = () => ( -
- - - - Infrastructure Container - Hardware Virtual Machine - - - -
+export const ImageType = ({ setImageType, vms }) => ( + + + + setImageType(false)}> + Hardware virtual machine + + + + setImageType(true)}> + Infrastructure container + + + + ); export default ({ images = [], onSelectLatest }) => ( diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png index d2e4fdea..87bf4404 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png index 55d52b09..5c7c5bd9 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png index cd796828..17d02076 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-1-snap.png index 86f6ff8b..2b221a6e 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-2-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-2-snap.png index 1c26755e..c806aa3d 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-2-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-2-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png index 1a23b56f..19ff40c3 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-provisioning-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-provisioning-1-snap.png index 1179b362..8aeaf21c 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-provisioning-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-provisioning-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-1-snap.png index 078d3dc4..8f07b6de 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-2-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-2-snap.png new file mode 100644 index 00000000..7a193472 Binary files /dev/null and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-2-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-stopped-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-stopped-1-snap.png index dfd2c7f9..ff84f0ca 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-stopped-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-stopped-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap index dba2fa33..a0320450 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap @@ -233,19 +233,11 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 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; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } .c17:focus { @@ -292,14 +284,6 @@ exports[`renders without throwing 1`] = ` border-color: rgb(216,216,216); } -.c17 svg + span { - margin-left: 0.75rem; -} - -.c17 svg { - max-height: 1.125rem; -} - .c21 { box-sizing: border-box; display: inline-block; @@ -347,7 +331,7 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -609,7 +593,7 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -1427,7 +1411,6 @@ exports[`renders without throwing 1`] = ` @@ -2063,7 +2046,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c25 { +.c26 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -2073,7 +2056,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c30 { +.c31 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -2092,7 +2075,7 @@ exports[`renders without throwing 1`] = ` margin-top: 0.375rem; } -.c28 { +.c29 { margin-top: 1.5rem; margin-bottom: 1.875rem; } @@ -2153,7 +2136,7 @@ exports[`renders without throwing 1`] = ` text-decoration: none; } -.c34 { +.c35 { cursor: pointer; } @@ -2208,19 +2191,11 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 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; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } .c17:focus { @@ -2267,14 +2242,6 @@ exports[`renders without throwing 1`] = ` border-color: rgb(216,216,216); } -.c17 svg + span { - margin-left: 0.75rem; -} - -.c17 svg { - max-height: 1.125rem; -} - .c21 { box-sizing: border-box; display: inline-block; @@ -2322,7 +2289,7 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -2575,6 +2542,11 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); + padding: 0.625rem 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; @@ -2583,7 +2555,6 @@ exports[`renders without throwing 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; } .c24:focus { @@ -2638,7 +2609,7 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } -.c26 { +.c25 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -2680,15 +2651,6 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - color: rgb(210,67,58); - -webkit-text-fill-color: currentcolor; - background-color: rgb(255,255,255); - border-color: rgb(210,67,58); - 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; @@ -2697,10 +2659,10 @@ exports[`renders without throwing 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - float: right; + font-weight: 500; } -.c26:focus { +.c25:focus { outline: 0; -webkit-text-decoration: none; text-decoration: none; @@ -2708,66 +2670,47 @@ exports[`renders without throwing 1`] = ` border-color: rgb(45,56,132); } -.c26:hover { +.c25:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c26:active, -.c26:active:hover, -.c26:active:focus { +.c25:active, +.c25:active:hover, +.c25:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c26[disabled] { +.c25[disabled] { cursor: not-allowed; pointer-events: none; } -.c26:focus { +.c25:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c26:hover { +.c25:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c26:active, -.c26:active:hover, -.c26:active:focus { +.c25:active, +.c25:active:hover, +.c25:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c26:focus { - color: rgb(205,37,27); - background-color: rgb(255,255,255); - border-color: rgb(205,37,27); -} - -.c26:hover { - color: rgb(205,37,27); - background-color: rgb(255,255,255); - border-color: rgb(205,37,27); -} - -.c26:active, -.c26:active:hover, -.c26:active:focus { - background-color: rgba(210,67,58,0.1); - border-color: rgb(205,37,27); -} - -.c26 svg + span { +.c25 svg + span { margin-left: 0.75rem; } -.c26 svg { +.c25 svg { max-height: 1.125rem; } @@ -2817,6 +2760,11 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(210,67,58); + padding: 0.625rem 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; @@ -2825,7 +2773,6 @@ exports[`renders without throwing 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; float: right; } @@ -2900,6 +2847,135 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } +.c28 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-weight: 500; + float: right; +} + +.c28:focus { + outline: 0; + -webkit-text-decoration: none; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c28:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c28:active, +.c28:active:hover, +.c28:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c28[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c28:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c28:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c28:active, +.c28:active:hover, +.c28:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c28:focus { + color: rgb(205,37,27); + background-color: rgb(255,255,255); + border-color: rgb(205,37,27); +} + +.c28:hover { + color: rgb(205,37,27); + background-color: rgb(255,255,255); + border-color: rgb(205,37,27); +} + +.c28:active, +.c28:active:hover, +.c28:active:focus { + background-color: rgba(210,67,58,0.1); + border-color: rgb(205,37,27); +} + +.c28 svg + span { + margin-left: 0.75rem; +} + +.c28 svg { + max-height: 1.125rem; +} + .c10 { font-size: 0.9375rem; line-height: 1.125rem; @@ -2911,7 +2987,7 @@ exports[`renders without throwing 1`] = ` margin-bottom: 0.1875rem; } -.c31 { +.c32 { font-size: 0.9375rem; line-height: 1.125rem; font-style: normal; @@ -2947,7 +3023,7 @@ exports[`renders without throwing 1`] = ` margin-top: 1.5rem; } -.c29 { +.c30 { background-color: rgb(216,216,216); margin: 0; height: 0.0625rem; @@ -3029,7 +3105,7 @@ exports[`renders without throwing 1`] = ` margin-bottom: 0.4375rem; } -.c33 { +.c34 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -3052,62 +3128,62 @@ exports[`renders without throwing 1`] = ` min-width: 100%; } -.c33:focus { +.c34:focus { border-color: rgb(59,70,204); outline: 0; } -.c33::-webkit-input-placeholder { +.c34::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c33::-moz-placeholder { +.c34::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c33:-ms-input-placeholder { +.c34:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c33:invalid { +.c34:invalid { box-shadow: none; } -.c33:disabled { +.c34:disabled { background-color: rgb(250,250,250); color: rgb(216,216,216); cursor: not-allowed; } -.c33:disabled::-webkit-input-placeholder { +.c34:disabled::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c33:disabled::-moz-placeholder { +.c34:disabled::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c33:disabled:-ms-input-placeholder { +.c34:disabled:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c33:disabled { +.c34:disabled { color: rgba(73,73,73,1); } -.c33:disabled::-webkit-input-placeholder { +.c34:disabled::-webkit-input-placeholder { color: rgba(73,73,73,1); } -.c33:disabled::-moz-placeholder { +.c34:disabled::-moz-placeholder { color: rgba(73,73,73,1); } -.c33:disabled:-ms-input-placeholder { +.c34:disabled:-ms-input-placeholder { color: rgba(73,73,73,1); } -.c32 { +.c33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3119,16 +3195,16 @@ exports[`renders without throwing 1`] = ` align-items: center; } -.c32 input { +.c33 input { padding-right: 1.875rem; } -.c32 div { +.c33 div { position: relative; left: -1.625rem; } -.c35 { +.c36 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3141,11 +3217,11 @@ exports[`renders without throwing 1`] = ` margin-bottom: 0rem; } -.c35 input { +.c36 input { padding-right: 1.875rem; } -.c35 div { +.c36 div { position: relative; left: -1.625rem; } @@ -3248,7 +3324,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c25 { + .c26 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; @@ -3257,7 +3333,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c30 { + .c31 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -3266,7 +3342,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:64em) { - .c30 { + .c31 { -webkit-flex-basis: 58.333333333333336%; -ms-flex-preferred-size: 58.333333333333336%; flex-basis: 58.333333333333336%; @@ -3409,7 +3485,6 @@ exports[`renders without throwing 1`] = ` @@ -3504,7 +3579,7 @@ exports[`renders without throwing 1`] = ` query="only screen and (max-width: 47.9375rem)" > diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__image_snapshots__/menu-ui-js-menu-links-1-snap.png b/packages/my-joy-beta/src/components/navigation/__tests__/__image_snapshots__/menu-ui-js-menu-links-1-snap.png index 973514b1..563c23b1 100644 Binary files a/packages/my-joy-beta/src/components/navigation/__tests__/__image_snapshots__/menu-ui-js-menu-links-1-snap.png and b/packages/my-joy-beta/src/components/navigation/__tests__/__image_snapshots__/menu-ui-js-menu-links-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap index d59ee6c1..45201a63 100644 --- a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap +++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap @@ -49,7 +49,7 @@ exports[`renders without throwing 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - padding: 0 0.375rem; + padding: 0 0.75rem; padding-bottom: 1rem; position: relative; } @@ -72,16 +72,15 @@ exports[`renders without throwing 1`] = ` .c2 { background: rgb(250,250,250); list-style-type: none; - padding: 0.8125rem 0.75rem; + padding: 0.8125rem 0rem; margin: 1.125rem 0 0 0; - min-width: 100%; max-height: 50px; overflow-x: scroll; box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; position: relative; } diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png index 3e09e343..b118c666 100644 Binary files a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png and b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/create-instance/image.js b/packages/my-joy-beta/src/containers/create-instance/image.js index a0a03a8f..e619a87f 100644 --- a/packages/my-joy-beta/src/containers/create-instance/image.js +++ b/packages/my-joy-beta/src/containers/create-instance/image.js @@ -42,7 +42,8 @@ const ImageContainer = ({ loading, images, vms, - step + step, + setImageType }) => queryImage ? ( @@ -72,14 +73,6 @@ const ImageContainer = ({ ) : null} - - {props => (loading || !expanded ? null : )} - ) : expanded ? ( - i.isVm === vms)} - onSelectLatest={handleSelectLatest} - /> + + + i.isVm === vms)} + onSelectLatest={handleSelectLatest} + /> + ) : image.id ? ( - ) : null - } + ) : null} {expanded ? ( @@ -124,8 +119,8 @@ export default compose( connect( ({ form, values }, ownProps) => { const proceeded = get(values, 'create-instance-image-proceeded', false); - const vms = get(form, 'create-instance-vms.values.vms', false); const image = get(form, 'create-instance-image.values.image', null); + const vms = get(values, 'vms', false); return { ...ownProps, @@ -145,6 +140,9 @@ export default compose( handleSelectLatest: ({ versions }) => { const id = versions[0].id; return dispatch(change('create-instance-image', 'image', id)); + }, + setImageType: value => { + return dispatch(set({ name: 'vms', value })); } }) ), diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png index ea7aae90..703efb24 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png index eabce65a..fc9bdfe1 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-1-snap.png index f1241b8c..64e70629 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-error-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-error-1-snap.png index 9cf4dc70..aa2668a2 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-error-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-error-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-1-snap.png index b1f78a3d..6932437a 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png index 297ad04e..6eba8678 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png index 1ea1b1e9..6bd013ba 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-2-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-2-snap.png new file mode 100644 index 00000000..54f42777 Binary files /dev/null and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-2-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png index 27b91f39..b3a96b54 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png index cfecb095..82d6c1ba 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png index 4757b1c8..77e5836b 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png index 67186def..d3135852 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png index b6ff9231..d6bc2ea3 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png index 217b0c57..b9b097b9 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png index 217b0c57..a141971c 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png index 217b0c57..b9b097b9 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png index 02e5831f..a48ec846 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png index 99bbcb21..7747c718 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-2-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-2-snap.png index 8edf35f6..f5bfcd91 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-2-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-2-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-3-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-3-snap.png index c25500cc..c2f3ab66 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-3-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-3-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png index b199fe57..51e332ce 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png index c9aacde0..112c2871 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png differ 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 61a01821..8988c67f 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 @@ -289,7 +289,7 @@ exports[`renders without throwing 1`] = ` background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -815,7 +815,7 @@ exports[`renders without throwing 1`] = ` >
without throwing 1`] = ` background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -2172,7 +2172,7 @@ exports[`renders without throwing 1`] = ` >
without throwing 1`] = ` background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -3579,7 +3579,7 @@ exports[`renders without throwing 1`] = ` >
without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -4577,7 +4577,7 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -4939,7 +4939,7 @@ exports[`renders without throwing 1`] = ` background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -5685,7 +5685,7 @@ exports[`renders without throwing 1`] = ` >
without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -7003,7 +7003,7 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -7365,7 +7365,7 @@ exports[`renders without throwing 1`] = ` background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -8111,7 +8111,7 @@ exports[`renders without throwing 1`] = ` >
without throwing color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -9429,7 +9429,7 @@ exports[`renders without throwing color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -9725,7 +9725,7 @@ exports[`renders without throwing -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -10004,7 +10004,7 @@ exports[`renders without throwing background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -10750,7 +10750,7 @@ exports[`renders without throwing >
without throwing 1`] = ` margin-left: 0.375rem; } -.c15 { +.c16 { fill: rgb(59,70,204); stroke: rgb(59,70,204); -webkit-animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite; } -.c16 { +.c17 { fill: rgb(59,70,204); stroke: rgb(59,70,204); -webkit-animation: iCqDak 1.5s ease-out 0s infinite; @@ -11584,7 +11584,7 @@ exports[`renders without throwing 1`] = ` animation-delay: 0.5s; } -.c17 { +.c18 { fill: rgb(59,70,204); stroke: rgb(59,70,204); -webkit-animation: iCqDak 1.5s ease-out 0s infinite; @@ -11593,7 +11593,7 @@ exports[`renders without throwing 1`] = ` animation-delay: 1s; } -.c18 { +.c19 { color: rgba(73,73,73,1); line-height: 1.5rem; font-size: 0.9375rem; @@ -11609,7 +11609,7 @@ exports[`renders without throwing 1`] = ` margin-left: 0.375rem; } -.c14 { +.c15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -11778,7 +11778,7 @@ exports[`renders without throwing 1`] = ` background-color: rgb(216,216,216); margin: 0; background-color: transparent; - height: 1.875rem; + height: 1.5rem; } .c9 { @@ -11795,6 +11795,13 @@ exports[`renders without throwing 1`] = ` height: 1.25rem; } +.c14 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 1.875rem; +} + .c3 { display: -webkit-box; display: -webkit-flex; @@ -11956,7 +11963,7 @@ exports[`renders without throwing 1`] = ` >
without throwing 1`] = ` />
without throwing 1`] = ` />

Loading...

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 a81f349d..4981ddad 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 @@ -982,7 +982,7 @@ exports[`renders without throwi margin-top: 0.375rem; } -.c29 { +.c30 { margin-top: 1.5rem; margin-bottom: 1.875rem; } @@ -1043,7 +1043,7 @@ exports[`renders without throwi text-decoration: none; } -.c35 { +.c36 { cursor: pointer; } @@ -1098,19 +1098,11 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 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; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } .c18:focus { @@ -1157,14 +1149,6 @@ exports[`renders without throwi border-color: rgb(216,216,216); } -.c18 svg + span { - margin-left: 0.75rem; -} - -.c18 svg { - max-height: 1.125rem; -} - .c22 { box-sizing: border-box; display: inline-block; @@ -1212,7 +1196,7 @@ exports[`renders without throwi color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -1465,6 +1449,11 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); + padding: 0.625rem 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; @@ -1473,7 +1462,6 @@ exports[`renders without throwi -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; } .c25:focus { @@ -1528,7 +1516,7 @@ exports[`renders without throwi max-height: 1.125rem; } -.c27 { +.c26 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -1570,15 +1558,6 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - color: rgb(210,67,58); - -webkit-text-fill-color: currentcolor; - background-color: rgb(255,255,255); - border-color: rgb(210,67,58); - 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; @@ -1587,10 +1566,10 @@ exports[`renders without throwi -webkit-box-align: center; -ms-flex-align: center; align-items: center; - float: right; + font-weight: 500; } -.c27:focus { +.c26:focus { outline: 0; -webkit-text-decoration: none; text-decoration: none; @@ -1598,66 +1577,47 @@ exports[`renders without throwi border-color: rgb(45,56,132); } -.c27:hover { +.c26:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c27:active, -.c27:active:hover, -.c27:active:focus { +.c26:active, +.c26:active:hover, +.c26:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c27[disabled] { +.c26[disabled] { cursor: not-allowed; pointer-events: none; } -.c27:focus { +.c26:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c27:hover { +.c26:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c27:active, -.c27:active:hover, -.c27:active:focus { +.c26:active, +.c26:active:hover, +.c26:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c27:focus { - color: rgb(205,37,27); - background-color: rgb(255,255,255); - border-color: rgb(205,37,27); -} - -.c27:hover { - color: rgb(205,37,27); - background-color: rgb(255,255,255); - border-color: rgb(205,37,27); -} - -.c27:active, -.c27:active:hover, -.c27:active:focus { - background-color: rgba(210,67,58,0.1); - border-color: rgb(205,37,27); -} - -.c27 svg + span { +.c26 svg + span { margin-left: 0.75rem; } -.c27 svg { +.c26 svg { max-height: 1.125rem; } @@ -1707,6 +1667,11 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(210,67,58); + padding: 0.625rem 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; @@ -1715,7 +1680,6 @@ exports[`renders without throwi -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; float: right; } @@ -1790,6 +1754,135 @@ exports[`renders without throwi max-height: 1.125rem; } +.c29 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-weight: 500; + float: right; +} + +.c29:focus { + outline: 0; + -webkit-text-decoration: none; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c29:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c29:active, +.c29:active:hover, +.c29:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c29[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c29:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c29:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c29:active, +.c29:active:hover, +.c29:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c29:focus { + color: rgb(205,37,27); + background-color: rgb(255,255,255); + border-color: rgb(205,37,27); +} + +.c29:hover { + color: rgb(205,37,27); + background-color: rgb(255,255,255); + border-color: rgb(205,37,27); +} + +.c29:active, +.c29:active:hover, +.c29:active:focus { + background-color: rgba(210,67,58,0.1); + border-color: rgb(205,37,27); +} + +.c29 svg + span { + margin-left: 0.75rem; +} + +.c29 svg { + max-height: 1.125rem; +} + .c11 { font-size: 0.9375rem; line-height: 1.125rem; @@ -1801,7 +1894,7 @@ exports[`renders without throwi margin-bottom: 0.1875rem; } -.c32 { +.c33 { font-size: 0.9375rem; line-height: 1.125rem; font-style: normal; @@ -1912,7 +2005,7 @@ exports[`renders without throwi display: block; } -.c26 { +.c27 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -1922,7 +2015,7 @@ exports[`renders without throwi display: block; } -.c31 { +.c32 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -1953,7 +2046,7 @@ exports[`renders without throwi margin-top: 1.5rem; } -.c30 { +.c31 { background-color: rgb(216,216,216); margin: 0; height: 0.0625rem; @@ -2035,7 +2128,7 @@ exports[`renders without throwi margin-bottom: 0.4375rem; } -.c34 { +.c35 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -2058,62 +2151,62 @@ exports[`renders without throwi min-width: 100%; } -.c34:focus { +.c35:focus { border-color: rgb(59,70,204); outline: 0; } -.c34::-webkit-input-placeholder { +.c35::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c34::-moz-placeholder { +.c35::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c34:-ms-input-placeholder { +.c35:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c34:invalid { +.c35:invalid { box-shadow: none; } -.c34:disabled { +.c35:disabled { background-color: rgb(250,250,250); color: rgb(216,216,216); cursor: not-allowed; } -.c34:disabled::-webkit-input-placeholder { +.c35:disabled::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c34:disabled::-moz-placeholder { +.c35:disabled::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c34:disabled:-ms-input-placeholder { +.c35:disabled:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c34:disabled { +.c35:disabled { color: rgba(73,73,73,1); } -.c34:disabled::-webkit-input-placeholder { +.c35:disabled::-webkit-input-placeholder { color: rgba(73,73,73,1); } -.c34:disabled::-moz-placeholder { +.c35:disabled::-moz-placeholder { color: rgba(73,73,73,1); } -.c34:disabled:-ms-input-placeholder { +.c35:disabled:-ms-input-placeholder { color: rgba(73,73,73,1); } -.c33 { +.c34 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2125,16 +2218,16 @@ exports[`renders without throwi align-items: center; } -.c33 input { +.c34 input { padding-right: 1.875rem; } -.c33 div { +.c34 div { position: relative; left: -1.625rem; } -.c36 { +.c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2147,11 +2240,11 @@ exports[`renders without throwi margin-bottom: 0rem; } -.c36 input { +.c37 input { padding-right: 1.875rem; } -.c36 div { +.c37 div { position: relative; left: -1.625rem; } @@ -2279,7 +2372,7 @@ exports[`renders without throwi } @media only screen and (min-width:0em) { - .c26 { + .c27 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; @@ -2288,7 +2381,7 @@ exports[`renders without throwi } @media only screen and (min-width:0em) { - .c31 { + .c32 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -2297,7 +2390,7 @@ exports[`renders without throwi } @media only screen and (min-width:64em) { - .c31 { + .c32 { -webkit-flex-basis: 58.333333333333336%; -ms-flex-preferred-size: 58.333333333333336%; flex-basis: 58.333333333333336%; @@ -2443,7 +2536,6 @@ exports[`renders without throwi @@ -2538,7 +2630,7 @@ exports[`renders without throwi query="only screen and (max-width: 47.9375rem)" >
@@ -2784,19 +2876,19 @@ exports[`renders without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi margin-top: 0.375rem; } -.c29 { +.c30 { margin-top: 1.5rem; margin-bottom: 1.875rem; } @@ -3318,7 +3410,7 @@ exports[`renders without throwi text-decoration: none; } -.c35 { +.c36 { cursor: pointer; } @@ -3373,19 +3465,11 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 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; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } .c18:focus { @@ -3432,14 +3516,6 @@ exports[`renders without throwi border-color: rgb(216,216,216); } -.c18 svg + span { - margin-left: 0.75rem; -} - -.c18 svg { - max-height: 1.125rem; -} - .c22 { box-sizing: border-box; display: inline-block; @@ -3487,7 +3563,7 @@ exports[`renders without throwi color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; + padding: 0.625rem 1.125rem; font-size: 0.8125rem; min-width: 0rem; min-height: 0rem; @@ -3740,6 +3816,11 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); + padding: 0.625rem 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; @@ -3748,7 +3829,6 @@ exports[`renders without throwi -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; } .c25:focus { @@ -3803,7 +3883,7 @@ exports[`renders without throwi max-height: 1.125rem; } -.c27 { +.c26 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -3845,15 +3925,6 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); - color: rgb(210,67,58); - -webkit-text-fill-color: currentcolor; - background-color: rgb(255,255,255); - border-color: rgb(210,67,58); - 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; @@ -3862,10 +3933,10 @@ exports[`renders without throwi -webkit-box-align: center; -ms-flex-align: center; align-items: center; - float: right; + font-weight: 500; } -.c27:focus { +.c26:focus { outline: 0; -webkit-text-decoration: none; text-decoration: none; @@ -3873,66 +3944,47 @@ exports[`renders without throwi border-color: rgb(45,56,132); } -.c27:hover { +.c26:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c27:active, -.c27:active:hover, -.c27:active:focus { +.c26:active, +.c26:active:hover, +.c26:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c27[disabled] { +.c26[disabled] { cursor: not-allowed; pointer-events: none; } -.c27:focus { +.c26:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c27:hover { +.c26:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c27:active, -.c27:active:hover, -.c27:active:focus { +.c26:active, +.c26:active:hover, +.c26:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c27:focus { - color: rgb(205,37,27); - background-color: rgb(255,255,255); - border-color: rgb(205,37,27); -} - -.c27:hover { - color: rgb(205,37,27); - background-color: rgb(255,255,255); - border-color: rgb(205,37,27); -} - -.c27:active, -.c27:active:hover, -.c27:active:focus { - background-color: rgba(210,67,58,0.1); - border-color: rgb(205,37,27); -} - -.c27 svg + span { +.c26 svg + span { margin-left: 0.75rem; } -.c27 svg { +.c26 svg { max-height: 1.125rem; } @@ -3982,6 +4034,11 @@ exports[`renders without throwi -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(210,67,58); + padding: 0.625rem 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; @@ -3990,7 +4047,6 @@ exports[`renders without throwi -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; float: right; } @@ -4065,6 +4121,135 @@ exports[`renders without throwi max-height: 1.125rem; } +.c29 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-weight: 500; + float: right; +} + +.c29:focus { + outline: 0; + -webkit-text-decoration: none; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c29:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c29:active, +.c29:active:hover, +.c29:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c29[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c29:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c29:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c29:active, +.c29:active:hover, +.c29:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c29:focus { + color: rgb(205,37,27); + background-color: rgb(255,255,255); + border-color: rgb(205,37,27); +} + +.c29:hover { + color: rgb(205,37,27); + background-color: rgb(255,255,255); + border-color: rgb(205,37,27); +} + +.c29:active, +.c29:active:hover, +.c29:active:focus { + background-color: rgba(210,67,58,0.1); + border-color: rgb(205,37,27); +} + +.c29 svg + span { + margin-left: 0.75rem; +} + +.c29 svg { + max-height: 1.125rem; +} + .c11 { font-size: 0.9375rem; line-height: 1.125rem; @@ -4076,7 +4261,7 @@ exports[`renders without throwi margin-bottom: 0.1875rem; } -.c32 { +.c33 { font-size: 0.9375rem; line-height: 1.125rem; font-style: normal; @@ -4187,7 +4372,7 @@ exports[`renders without throwi display: block; } -.c26 { +.c27 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -4197,7 +4382,7 @@ exports[`renders without throwi display: block; } -.c31 { +.c32 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -4228,7 +4413,7 @@ exports[`renders without throwi margin-top: 1.5rem; } -.c30 { +.c31 { background-color: rgb(216,216,216); margin: 0; height: 0.0625rem; @@ -4310,7 +4495,7 @@ exports[`renders without throwi margin-bottom: 0.4375rem; } -.c34 { +.c35 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -4333,62 +4518,62 @@ exports[`renders without throwi min-width: 100%; } -.c34:focus { +.c35:focus { border-color: rgb(59,70,204); outline: 0; } -.c34::-webkit-input-placeholder { +.c35::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c34::-moz-placeholder { +.c35::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c34:-ms-input-placeholder { +.c35:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c34:invalid { +.c35:invalid { box-shadow: none; } -.c34:disabled { +.c35:disabled { background-color: rgb(250,250,250); color: rgb(216,216,216); cursor: not-allowed; } -.c34:disabled::-webkit-input-placeholder { +.c35:disabled::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c34:disabled::-moz-placeholder { +.c35:disabled::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c34:disabled:-ms-input-placeholder { +.c35:disabled:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c34:disabled { +.c35:disabled { color: rgba(73,73,73,1); } -.c34:disabled::-webkit-input-placeholder { +.c35:disabled::-webkit-input-placeholder { color: rgba(73,73,73,1); } -.c34:disabled::-moz-placeholder { +.c35:disabled::-moz-placeholder { color: rgba(73,73,73,1); } -.c34:disabled:-ms-input-placeholder { +.c35:disabled:-ms-input-placeholder { color: rgba(73,73,73,1); } -.c33 { +.c34 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4400,16 +4585,16 @@ exports[`renders without throwi align-items: center; } -.c33 input { +.c34 input { padding-right: 1.875rem; } -.c33 div { +.c34 div { position: relative; left: -1.625rem; } -.c36 { +.c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4422,11 +4607,11 @@ exports[`renders without throwi margin-bottom: 0rem; } -.c36 input { +.c37 input { padding-right: 1.875rem; } -.c36 div { +.c37 div { position: relative; left: -1.625rem; } @@ -4554,7 +4739,7 @@ exports[`renders without throwi } @media only screen and (min-width:0em) { - .c26 { + .c27 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; @@ -4563,7 +4748,7 @@ exports[`renders without throwi } @media only screen and (min-width:0em) { - .c31 { + .c32 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -4572,7 +4757,7 @@ exports[`renders without throwi } @media only screen and (min-width:64em) { - .c31 { + .c32 { -webkit-flex-basis: 58.333333333333336%; -ms-flex-preferred-size: 58.333333333333336%; flex-basis: 58.333333333333336%; @@ -4718,7 +4903,6 @@ exports[`renders without throwi @@ -4813,7 +4997,7 @@ exports[`renders without throwi query="only screen and (max-width: 47.9375rem)" >
@@ -5059,19 +5243,19 @@ exports[`renders without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > without throwi className="c1" >
without throwi tag={false} > - + {props => ( without throwing 1`] = ` .c0 { margin-right: auto; margin-left: auto; - padding-right: 1.875rem; - padding-left: 1.875rem; box-sizing: border-box; width: 100%; - padding-left: 0; - padding-right: 0; + max-width: 62.5rem; } -.c1 { +.c2 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -31,7 +28,7 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.c2 { +.c3 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -41,7 +38,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c4 { +.c5 { color: rgba(73,73,73,1); font-weight: 600; line-height: 1.5rem; @@ -51,24 +48,28 @@ exports[`renders without throwing 1`] = ` margin: 0.75rem 0; } -.c4 + p, -.c4 + small, -.c4 + h1, -.c4 + h2, -.c4 + label, -.c4 + h3, -.c4 + h4, -.c4 + h5, -.c4 + div, -.c4 + span { +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { margin-top: 0.75rem; } -.c5 { +.c1 { + margin-top: 1.5rem; +} + +.c6 { margin: 0.1875rem 0.625rem; } -.c3 { +.c4 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -79,12 +80,43 @@ exports[`renders without throwing 1`] = ` align-items: center; } -.c3:last-child svg { +.c4:first-child a { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:last-child svg { display: none; } +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 56rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 59rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + @media only screen and (min-width:0em) { - .c2 { + .c3 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -97,38 +129,42 @@ exports[`renders without throwing 1`] = ` >
-

- Instances -

- + Instances + + - - + viewBox="0 0 9.6 6" + width="9.6" + xmlns="http://www.w3.org/2000/svg" + > + + +
@@ -139,15 +175,12 @@ exports[`renders without throwing 1`] = ` .c0 { margin-right: auto; margin-left: auto; - padding-right: 1.875rem; - padding-left: 1.875rem; box-sizing: border-box; width: 100%; - padding-left: 0; - padding-right: 0; + max-width: 62.5rem; } -.c1 { +.c2 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -166,7 +199,7 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.c2 { +.c3 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -176,7 +209,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c4 { +.c5 { color: rgba(73,73,73,1); font-weight: 600; line-height: 1.5rem; @@ -186,24 +219,28 @@ exports[`renders without throwing 1`] = ` margin: 0.75rem 0; } -.c4 + p, -.c4 + small, -.c4 + h1, -.c4 + h2, -.c4 + label, -.c4 + h3, -.c4 + h4, -.c4 + h5, -.c4 + div, -.c4 + span { +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { margin-top: 0.75rem; } -.c5 { +.c1 { + margin-top: 1.5rem; +} + +.c6 { margin: 0.1875rem 0.625rem; } -.c3 { +.c4 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -214,12 +251,43 @@ exports[`renders without throwing 1`] = ` align-items: center; } -.c3:last-child svg { +.c4:first-child a { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:last-child svg { display: none; } +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 56rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 59rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + @media only screen and (min-width:0em) { - .c2 { + .c3 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -232,66 +300,70 @@ exports[`renders without throwing 1`] = ` >
-

- Instances -

- + Instances + + - - -
-
-

+ + +

+
- name - - + name + + - - + viewBox="0 0 9.6 6" + width="9.6" + xmlns="http://www.w3.org/2000/svg" + > + + +
diff --git a/packages/my-joy-beta/src/server-error.js b/packages/my-joy-beta/src/server-error.js index 87f98143..eefdad80 100644 --- a/packages/my-joy-beta/src/server-error.js +++ b/packages/my-joy-beta/src/server-error.js @@ -16,7 +16,7 @@ import Breadcrumb from '@containers/navigation/breadcrumb'; export const Route = () => ( - + Ooops! 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 b844f4c4..2ccef1a2 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,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Breadcrumb Default Breadcrumb 1`] = ` -.c4 { +.c5 { color: rgba(73,73,73,1); font-weight: 600; line-height: 1.5rem; @@ -11,24 +11,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` margin: 0.75rem 0; } -.c4 + p, -.c4 + small, -.c4 + h1, -.c4 + h2, -.c4 + label, -.c4 + h3, -.c4 + h4, -.c4 + h5, -.c4 + div, -.c4 + span { +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { margin-top: 0.75rem; } -.c5 { +.c6 { margin: 0.1875rem 0.625rem; } -.c3 { +.c4 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -39,22 +39,25 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` align-items: center; } -.c3:last-child svg { +.c4:first-child a { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:last-child svg { display: none; } .c0 { margin-right: auto; margin-left: auto; - padding-right: 1.875rem; - padding-left: 1.875rem; box-sizing: border-box; width: 100%; - padding-left: 0; - padding-right: 0; + max-width: 62.5rem; } -.c1 { +.c2 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -73,7 +76,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` margin-left: -0.625rem; } -.c2 { +.c3 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -83,8 +86,37 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` display: block; } +.c1 { + margin-top: 1.5rem; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 56rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 59rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + @media only screen and (min-width:0em) { - .c2 { + .c3 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -97,122 +129,126 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` >
-

- Home -

- + Home + + - - -
-
-

+ + +

+
- Warp Records Blog - - + Warp Records Blog + + - - -
-
-

+ + +

+
- Services - - + Services + + - - -
-
-

+ + +

+
- Nginx - - + Nginx + + - - + viewBox="0 0 9.6 6" + width="9.6" + xmlns="http://www.w3.org/2000/svg" + > + + +
@@ -258,6 +294,12 @@ exports[`Breadcrumb Default Item 1`] = ` align-items: center; } +.c0:first-child a { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + .c0:last-child svg { display: none; } diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js index 0489e061..73d5bbba 100644 --- a/packages/ui-toolkit/src/breadcrumb/index.js +++ b/packages/ui-toolkit/src/breadcrumb/index.js @@ -1,5 +1,6 @@ import React from 'react'; import { Row, Col } from 'joyent-react-styled-flexboxgrid'; +import { Margin } from 'styled-components-spacing'; import Container from '../layout/view-container'; @@ -7,10 +8,12 @@ import Container from '../layout/view-container'; * @example ./usage.md */ export default ({ children, ...rest }) => ( - - - {children} - + + + + {children} + + ); diff --git a/packages/ui-toolkit/src/breadcrumb/item.js b/packages/ui-toolkit/src/breadcrumb/item.js index 3932f1c0..98f27a8c 100644 --- a/packages/ui-toolkit/src/breadcrumb/item.js +++ b/packages/ui-toolkit/src/breadcrumb/item.js @@ -18,6 +18,13 @@ const Container = styled.div` display: inline-flex; align-items: center; + &:first-child { + a { + color: inherit; + text-decoration: none; + } + } + &:last-child { svg { display: none; @@ -28,13 +35,9 @@ const Container = styled.div` const BaseLink = styled(({ component, children, ...rest }) => React.createElement(component, rest, children) )` - text-decoration: none; cursor: pointer; font-weight: ${props => props.theme.font.weight.normal}; - - &:visited { - color: inherit; - } + color: ${props => props.theme.primary}; `; export default withTheme(({ children, component, theme, ...rest }) => { diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index f34ccf14..9da67ff4 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -228,7 +228,7 @@ const Button = styled(BaseButton)` `}; ${is('small')` - padding: ${remcalc(9)} ${remcalc(18)}; + padding: ${remcalc(10)} ${remcalc(18)}; font-size: ${remcalc(13)}; min-width: ${remcalc(0)}; min-height: ${remcalc(0)}; diff --git a/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap b/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap index f5b8797a..c18f9873 100644 --- a/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap +++ b/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap @@ -23,7 +23,7 @@ exports[`SectionList Anchor 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - padding: 0 0.375rem; + padding: 0 0.75rem; padding-bottom: 1rem; position: relative; } @@ -73,7 +73,7 @@ exports[`SectionList Anchor 2`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - padding: 0 0.375rem; + padding: 0 0.75rem; padding-bottom: 1rem; position: relative; font-weight: 600; @@ -147,7 +147,7 @@ exports[`SectionList Item 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - padding: 0 0.375rem; + padding: 0 0.75rem; padding-bottom: 1rem; position: relative; } @@ -213,7 +213,7 @@ exports[`SectionList SectionList 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - padding: 0 0.375rem; + padding: 0 0.75rem; padding-bottom: 1rem; position: relative; font-weight: 600; @@ -250,7 +250,7 @@ exports[`SectionList SectionList 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - padding: 0 0.375rem; + padding: 0 0.75rem; padding-bottom: 1rem; position: relative; } @@ -273,16 +273,15 @@ exports[`SectionList SectionList 1`] = ` .c0 { background: rgb(250,250,250); list-style-type: none; - padding: 0.8125rem 0.75rem; + padding: 0.8125rem 0rem; margin: 1.125rem 0 0 0; - min-width: 100%; max-height: 50px; overflow-x: scroll; box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; position: relative; } diff --git a/packages/ui-toolkit/src/section-list/index.js b/packages/ui-toolkit/src/section-list/index.js index 5a864a4c..05efbf13 100644 --- a/packages/ui-toolkit/src/section-list/index.js +++ b/packages/ui-toolkit/src/section-list/index.js @@ -7,13 +7,12 @@ import Baseline from '../baseline'; const UnorderedList = styled.ul` background: ${props => props.theme.disabled}; list-style-type: none; - padding: ${remcalc(13)} ${remcalc(12)}; + padding: ${remcalc(13)} ${remcalc(0)}; margin: ${remcalc(18)} 0 0 0; - min-width: 100%; max-height: 50px; overflow-x: scroll; box-sizing: border-box; - display: flex; + display: inline-flex; position: relative; &:after { diff --git a/packages/ui-toolkit/src/section-list/item.js b/packages/ui-toolkit/src/section-list/item.js index c7042c3e..2442337a 100644 --- a/packages/ui-toolkit/src/section-list/item.js +++ b/packages/ui-toolkit/src/section-list/item.js @@ -30,7 +30,7 @@ export const Anchor = Baseline(styled(BaseAnchor)` color: ${props => props.theme.secondary}; text-decoration: none; cursor: pointer; - padding: 0 ${remcalc(6)}; + padding: 0 ${remcalc(12)}; padding-bottom: ${remcalc(16)}; position: relative;