diff --git a/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap index 5342425b..28a03158 100644 --- a/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap +++ b/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap @@ -39,7 +39,7 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.c15 { +.c16 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -78,7 +78,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c16 { +.c17 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -88,7 +88,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c25 { +.c26 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -98,7 +98,7 @@ exports[`renders without throwing 1`] = ` display: block; } -.c30 { +.c31 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -113,11 +113,11 @@ exports[`renders without throwing 1`] = ` margin-bottom: 1.125rem; } -.c13 { +.c14 { margin-top: 0.375rem; } -.c28 { +.c29 { margin-top: 1.5rem; margin-bottom: 1.875rem; } @@ -126,18 +126,18 @@ exports[`renders without throwing 1`] = ` padding: 1.5rem; } -.c21 { +.c22 { padding-top: 0.1875rem; } -.c20 { +.c21 { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration-skip: objects; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; } -.c23 { +.c24 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -150,52 +150,52 @@ exports[`renders without throwing 1`] = ` min-width: 7.5rem; } -.c23::-moz-focus-inner, -.c23[type='button']::-moz-focus-inner, -.c23[type='reset']::-moz-focus-inner, -.c23[type='submit']::-moz-focus-inner { +.c24::-moz-focus-inner, +.c24[type='button']::-moz-focus-inner, +.c24[type='reset']::-moz-focus-inner, +.c24[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c23:-moz-focusring, -.c23[type='button']:-moz-focusring, -.c23[type='reset']:-moz-focusring, -.c23[type='submit']:-moz-focusring { +.c24:-moz-focusring, +.c24[type='button']:-moz-focusring, +.c24[type='reset']:-moz-focusring, +.c24[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c23 + button, -.c23 + a { +.c24 + button, +.c24 + a { margin-left: 0.375rem; } -.c19 { +.c20 { color: rgb(59,70,204); -webkit-text-fill-color: currentcolor; color: rgb(255,255,255); -webkit-text-fill-color: currentcolor; } -.c19:hover { +.c20:hover { -webkit-text-decoration: none; text-decoration: none; } -.c34 { +.c35 { cursor: pointer; } -.c18 { +.c19 { display: inline-block; } -.c18 + button, -.c18 + a { +.c19 + button, +.c19 + a { margin-left: 0.375rem; } -.c17 { +.c18 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -253,7 +253,7 @@ exports[`renders without throwing 1`] = ` font-weight: 500; } -.c17:focus { +.c18:focus { outline: 0; -webkit-text-decoration: none; text-decoration: none; @@ -261,51 +261,51 @@ exports[`renders without throwing 1`] = ` border-color: rgb(45,56,132); } -.c17:hover { +.c18:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c17:active, -.c17:active:hover, -.c17:active:focus { +.c18:active, +.c18:active:hover, +.c18:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c17[disabled] { +.c18[disabled] { cursor: not-allowed; pointer-events: none; } -.c17:focus { +.c18:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c17:hover { +.c18:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c17:active, -.c17:active:hover, -.c17:active:focus { +.c18:active, +.c18:active:hover, +.c18:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c17 svg + span { +.c18 svg + span { margin-left: 0.75rem; } -.c17 svg { +.c18 svg { max-height: 1.125rem; } -.c22 { +.c23 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -367,7 +367,7 @@ exports[`renders without throwing 1`] = ` align-items: center; } -.c22:focus { +.c23:focus { outline: 0; -webkit-text-decoration: none; text-decoration: none; @@ -375,68 +375,68 @@ exports[`renders without throwing 1`] = ` border-color: rgb(45,56,132); } -.c22:hover { +.c23:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c22:active, -.c22:active:hover, -.c22:active:focus { +.c23:active, +.c23:active:hover, +.c23:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c22[disabled] { +.c23[disabled] { cursor: not-allowed; pointer-events: none; } -.c22:focus { +.c23:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c22:hover { +.c23:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c22:active, -.c22:active:hover, -.c22:active:focus { +.c23:active, +.c23:active:hover, +.c23:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c22:focus { +.c23:focus { background-color: rgb(250,250,250); border-color: rgb(216,216,216); } -.c22:hover { +.c23:hover { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c22:active, -.c22:active:hover, -.c22:active:focus { +.c23:active, +.c23:active:hover, +.c23:active:focus { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c22 svg + span { +.c23 svg + span { margin-left: 0.75rem; } -.c22 svg { +.c23 svg { max-height: 1.125rem; } -.c24 { +.c25 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -494,7 +494,7 @@ exports[`renders without throwing 1`] = ` font-weight: 500; } -.c24:focus { +.c25:focus { outline: 0; -webkit-text-decoration: none; text-decoration: none; @@ -502,219 +502,64 @@ exports[`renders without throwing 1`] = ` border-color: rgb(45,56,132); } -.c24:hover { +.c25:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c24:active, -.c24:active:hover, -.c24: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); } -.c24[disabled] { +.c25[disabled] { cursor: not-allowed; pointer-events: none; } -.c24:focus { +.c25:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c24:hover { +.c25:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c24:active, -.c24:active:hover, -.c24:active:focus { +.c25:active, +.c25:active:hover, +.c25:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c24:focus { +.c25:focus { background-color: rgb(250,250,250); border-color: rgb(216,216,216); } -.c24:hover { +.c25:hover { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c24:active, -.c24:active:hover, -.c24:active:focus { +.c25:active, +.c25:active:hover, +.c25:active:focus { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c24 svg + span { +.c25 svg + span { margin-left: 0.75rem; } -.c24 svg { - max-height: 1.125rem; -} - -.c26 { - 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); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - 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; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - float: right; -} - -.c26:focus { - outline: 0; - -webkit-text-decoration: none; - text-decoration: none; - background-color: rgb(59,70,204); - border-color: rgb(45,56,132); -} - -.c26:hover { - background-color: rgb(72,83,217); - border: solid 0.0625rem rgb(45,56,132); -} - -.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); -} - -.c26[disabled] { - cursor: not-allowed; - pointer-events: none; -} - -.c26:focus { - background-color: rgb(255,255,255); - border-color: rgb(216,216,216); -} - -.c26:hover { - background-color: rgb(247,247,247); - border-color: rgb(216,216,216); -} - -.c26:active, -.c26:active:hover, -.c26: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:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c26:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c26:active, -.c26:active:hover, -.c26:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c26 svg + span { - margin-left: 0.75rem; -} - -.c26 svg { +.c25 svg { max-height: 1.125rem; } @@ -769,6 +614,11 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); 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; @@ -777,7 +627,6 @@ exports[`renders without throwing 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-weight: 500; float: right; } @@ -869,7 +718,158 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } -.c10 { +.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); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + 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:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c28:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c28:active, +.c28:active:hover, +.c28:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c28 svg + span { + margin-left: 0.75rem; +} + +.c28 svg { + max-height: 1.125rem; +} + +.c11 { font-size: 0.9375rem; line-height: 1.125rem; font-style: normal; @@ -880,7 +880,7 @@ exports[`renders without throwing 1`] = ` margin-bottom: 0.1875rem; } -.c31 { +.c32 { font-size: 0.9375rem; line-height: 1.125rem; font-style: normal; @@ -916,13 +916,13 @@ exports[`renders without throwing 1`] = ` margin-top: 1.5rem; } -.c29 { +.c30 { background-color: rgb(216,216,216); margin: 0; height: 0.0625rem; } -.c12 { +.c13 { width: 0.9375rem; height: 0.9375rem; border-radius: 50%; @@ -997,7 +997,7 @@ exports[`renders without throwing 1`] = ` margin-bottom: 0.4375rem; } -.c33 { +.c34 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -1021,62 +1021,62 @@ exports[`renders without throwing 1`] = ` text-overflow: ellipsis; } -.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); } -.c35 { +.c36 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -1099,62 +1099,62 @@ exports[`renders without throwing 1`] = ` min-width: 100%; } -.c35:focus { +.c36:focus { border-color: rgb(59,70,204); outline: 0; } -.c35::-webkit-input-placeholder { +.c36::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c35::-moz-placeholder { +.c36::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c35:-ms-input-placeholder { +.c36:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c35:invalid { +.c36:invalid { box-shadow: none; } -.c35:disabled { +.c36:disabled { background-color: rgb(250,250,250); color: rgb(216,216,216); cursor: not-allowed; } -.c35:disabled::-webkit-input-placeholder { +.c36:disabled::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c35:disabled::-moz-placeholder { +.c36:disabled::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c35:disabled:-ms-input-placeholder { +.c36:disabled:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c35:disabled { +.c36:disabled { color: rgba(73,73,73,1); } -.c35:disabled::-webkit-input-placeholder { +.c36:disabled::-webkit-input-placeholder { color: rgba(73,73,73,1); } -.c35:disabled::-moz-placeholder { +.c36:disabled::-moz-placeholder { color: rgba(73,73,73,1); } -.c35:disabled:-ms-input-placeholder { +.c36:disabled:-ms-input-placeholder { color: rgba(73,73,73,1); } -.c32 { +.c33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1166,20 +1166,26 @@ 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; } -.c14 { +.c15 { opacity: 0.5; padding-right: 0.1875rem; } +.c10 { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .c9 { -webkit-align-items: center; -webkit-box-align: center; @@ -1195,7 +1201,7 @@ exports[`renders without throwing 1`] = ` justify-content: flex-start; } -.c11 { +.c12 { width: 0.0625rem; background: rgb(216,216,216); height: 1.5rem; @@ -1219,7 +1225,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c15 { + .c16 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -1264,7 +1270,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c16 { + .c17 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; @@ -1273,7 +1279,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%; @@ -1282,7 +1288,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%; @@ -1291,7 +1297,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%; @@ -1306,7 +1312,7 @@ exports[`renders without throwing 1`] = ` } @media (max-width:47.9375rem) { - .c11 { + .c12 { display: none; } } @@ -1347,32 +1353,32 @@ exports[`renders without throwing 1`] = ` className="c9" >