fix(my-joy-beta): fix section spacings

fixes #1096
This commit is contained in:
Sérgio Ramos 2018-01-30 16:04:03 +00:00 committed by Sérgio Ramos
parent 280842bd9f
commit 38d162843d
190 changed files with 18403 additions and 22627 deletions

View File

@ -65,6 +65,7 @@
"yargs": "^10.0.3"
},
"resolutions": {
"component-type": "1.2.1",
"styled-components": "3.1.4",
"axios": "0.16.2",
"follow-redirects": "1.4.1",

View File

@ -12,7 +12,7 @@
"lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --ext .js --ext .md",
"test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
"test": "DEFAULT_TIMEOUT_INTERVAL=80000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
"test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
"prepublish": "echo 0"
},
"dependencies": {
@ -24,7 +24,8 @@
"constant-case": "^2.0.0",
"date-fns": "^1.29.0",
"declarative-redux-form": "^2.0.8",
"joyent-manifest-editor": "3.0.1",
"joyent-manifest-editor": "^1.4.0",
"joyent-react-styled-flexboxgrid": "^2.2.3",
"joyent-ui-toolkit": "^4.5.0",
"lodash.find": "^4.6.0",
"lodash.findindex": "^4.6.0",
@ -58,7 +59,7 @@
"scroll-to-element": "^2.0.0",
"styled-components": "^3.1.4",
"styled-components-spacing": "^2.1.3",
"styled-flex-component": "^2.1.0",
"styled-flex-component": "^2.2.0",
"title-case": "^2.1.1"
},
"devDependencies": {

View File

@ -1 +1 @@
<svg id="svg4300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><style>.cls-1{fill:none}.cls-2{fill:url(#linear-gradient)}.cls-3{clip-path:url(#clip-path)}.cls-4{fill:#b4b4b4;opacity:.66;isolation:isolate}.cls-5{fill:url(#linear-gradient-2)}</style><linearGradient id="linear-gradient" x1="6" y1="127.4" x2="36" y2="127.4" gradientTransform="matrix(1 0 0 -1 0 147.4)" gradientUnits="userSpaceOnUse"><stop offset=".01"/><stop offset=".19" stop-color="#171717"/><stop offset=".54" stop-color="#3d3d3d"/><stop offset=".82" stop-color="#545454"/><stop offset="1" stop-color="#5c5c5c"/></linearGradient><clipPath id="clip-path"><path class="cls-1" d="M21.8 3.15a1.53 1.53 0 0 0-1.6 0l-13.4 7.7a1.6 1.6 0 0 0-.8 1.4v15.5a1.6 1.6 0 0 0 .8 1.4l13.4 7.7a1.53 1.53 0 0 0 1.6 0l13.4-7.7a1.6 1.6 0 0 0 .8-1.4v-15.5a1.6 1.6 0 0 0-.8-1.4z"/></clipPath><linearGradient id="linear-gradient-2" x1="5.81" y1="127.46" x2="36.75" y2="127.46" gradientTransform="matrix(1 0 0 -1 0 147.4)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5c5c5c"/><stop offset=".18" stop-color="#545454"/><stop offset=".46" stop-color="#3d3d3d"/><stop offset=".81" stop-color="#171717"/><stop offset=".99"/></linearGradient></defs><title>Artboard 1 copy 10</title><path id="_Path_" data-name="&lt;Path&gt;" class="cls-2" d="M20.2 3.15a1.53 1.53 0 0 1 1.6 0l13.4 7.7a1.6 1.6 0 0 1 .8 1.4v15.5a1.6 1.6 0 0 1-.8 1.4l-13.4 7.7a1.53 1.53 0 0 1-1.6 0l-13.4-7.7a1.6 1.6 0 0 1-.8-1.4v-15.5a1.6 1.6 0 0 1 .8-1.4z"/><g class="cls-3"><path class="cls-1" d="M20.2 3.15l-13.4 7.7a1.6 1.6 0 0 0-.8 1.4v15.5a1.28 1.28 0 0 0 .4 1L21.5 3a2.74 2.74 0 0 0-1.3.15zm1.3 33.9c.1 0 .2-.1.3-.1l13.4-7.7a1.51 1.51 0 0 0 .7-1.4v-15.5a1.49 1.49 0 0 0-.3-1z"/><path class="cls-4" d="M35.1 11L21.8 3.25c-.1-.1-.3-.1-.4-.2L6.3 28.85a1 1 0 0 0 .5.4L20.2 37a1.5 1.5 0 0 0 1.3.1l14.1-25.8c-.2-.15-.3-.25-.5-.3z"/></g><g class="cls-3"><path class="cls-1" d="M6.9 10.85l-.2.1a1.6 1.6 0 0 0-.8 1.4v15.5a1.6 1.6 0 0 0 .8 1.4L20.1 37a1.72 1.72 0 0 0 1.2.2zm29 1.5a1.51 1.51 0 0 0-.7-1.4l-13.3-7.7c-.1-.1-.2-.1-.4-.2l14.4 24.7z"/><path class="cls-5" d="M21.8 36.85l13.4-7.7a1.51 1.51 0 0 0 .7-1.4v-.1L21.5 3a1.53 1.53 0 0 0-1.3.2L7 10.75 21.4 37c.1.05.2 0 .4-.15z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 34.22"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#1b3240;opacity:0.66;isolation:isolate;}.cls-3{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" y1="225.5" x2="30" y2="225.5" gradientTransform="matrix(1, 0, 0, -1, 0, 242.65)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#1b3240"/><stop offset="1" stop-color="#436275"/></linearGradient><linearGradient id="linear-gradient-2" x1="-0.1" y1="225.58" x2="30.85" y2="225.58" gradientTransform="matrix(1, 0, 0, -1, 0, 242.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="1" stop-color="#1b3240"/></linearGradient></defs><title>Nodejs</title><g id="Layer_2" data-name="Layer 2"><g id="svg4300"><path id="_Path_" data-name="&lt;Path&gt;" class="cls-1" d="M14.2.3a1.53,1.53,0,0,1,1.6,0L29.2,8A1.6,1.6,0,0,1,30,9.4V24.9a1.6,1.6,0,0,1-.8,1.4L15.8,34a1.53,1.53,0,0,1-1.6,0L.8,26.3A1.6,1.6,0,0,1,0,24.9V9.4A1.6,1.6,0,0,1,.8,8Z"/><path class="cls-2" d="M28.8,8,15.5.2c-.1-.1-.3-.1-.4-.2L0,25.8a1,1,0,0,0,.5.4l13.4,7.7a1.5,1.5,0,0,0,1.3.1L29.3,8.2C29.1,8.2,29,8.1,28.8,8Z"/><path class="cls-3" d="M15.9,34l13.4-7.7a1.51,1.51,0,0,0,.7-1.4v-.1L15.6.1a1.53,1.53,0,0,0-1.3.2L1.1,7.9,15.5,34.1C15.6,34.1,15.7,34,15.9,34Z"/></g></g></svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -2,6 +2,10 @@
exports[`renders <AddServiceForm /> without throwing 1`] = `
.c4 {
margin-top: 0.1875rem;
}
.c6 {
margin-left: 0.75rem;
}
@ -29,7 +33,24 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
align-items: flex-end;
}
.c7 {
.c1 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
display: block;
}
.c9 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -42,30 +63,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
min-width: 7.5rem;
}
.c7::-moz-focus-inner,
.c7[type='button']::-moz-focus-inner,
.c7[type='reset']::-moz-focus-inner,
.c7[type='submit']::-moz-focus-inner {
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c7:-moz-focusring,
.c7[type='button']:-moz-focusring,
.c7[type='reset']:-moz-focusring,
.c7[type='submit']:-moz-focusring {
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c7 + button {
.c9 + button {
margin-left: 0.375rem;
}
.c6 {
.c8 {
display: inline-block;
}
.c5 {
.c7 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -79,8 +100,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.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;
@ -106,34 +125,35 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c5:focus {
.c7:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c5:hover {
.c7:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c5:active,
.c5:active:hover,
.c5:active:focus {
.c7:active,
.c7:active:hover,
.c7:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c5[disabled] {
.c7[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c2 {
.c3 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
font-stretch: normal;
display: block;
@ -145,7 +165,33 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
font-size: 0.8125rem;
}
.c1 {
.c11 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.625rem;
margin-left: -0.625rem;
}
.c10 {
background-color: rgb(216,216,216);
margin: 0;
background-color: transparent;
height: 0.25rem;
}
.c2 {
display: inline-block;
margin: 0;
padding: 0;
@ -160,13 +206,11 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c3 {
.c5 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -184,41 +228,41 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
outline: 0;
}
.c3::-webkit-input-placeholder {
.c5::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3::-moz-placeholder {
.c5::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:-ms-input-placeholder {
.c5:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:invalid {
.c5:invalid {
box-shadow: none;
}
.c3:disabled {
.c5:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c3:disabled::-webkit-input-placeholder {
.c5:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:disabled::-moz-placeholder {
.c5:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:disabled:-ms-input-placeholder {
.c5:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:focus {
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -230,36 +274,52 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
className="c0"
>
<div
className="baseline-jVaZNU kXgQxt c1"
className="c1"
>
<div
className="baseline-jVaZNU kXgQxt c2"
name="name"
role="group"
style={undefined}
>
<label
className="c2"
className="c3"
htmlFor="k"
>
Attach to new CNS service name
</label>
<div
className="c4"
>
<input
className="c3"
className="c5"
disabled={false}
id="k"
onBlur={null}
placeholder="Example: mySQLdb"
/>
</div>
</div>
</div>
<div
className="c4"
className="c1"
>
<div
className="c6"
>
<button
className="c5 c6 c7"
className="c7 c8 c9"
disabled={undefined}
href=""
type="submit"
>
Add
</button>
<div
className="c10 c11"
height="0.25rem"
/>
</div>
</div>
</div>
</form>
@ -267,6 +327,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
.c4 {
margin-top: 0.1875rem;
}
.c6 {
margin-left: 0.75rem;
}
@ -294,7 +358,24 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
align-items: flex-end;
}
.c7 {
.c1 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
display: block;
}
.c9 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -307,30 +388,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
min-width: 7.5rem;
}
.c7::-moz-focus-inner,
.c7[type='button']::-moz-focus-inner,
.c7[type='reset']::-moz-focus-inner,
.c7[type='submit']::-moz-focus-inner {
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c7:-moz-focusring,
.c7[type='button']:-moz-focusring,
.c7[type='reset']:-moz-focusring,
.c7[type='submit']:-moz-focusring {
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c7 + button {
.c9 + button {
margin-left: 0.375rem;
}
.c6 {
.c8 {
display: inline-block;
}
.c5 {
.c7 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -344,8 +425,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.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;
@ -376,51 +455,52 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
border-color: rgb(216,216,216);
}
.c5:focus {
.c7:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c5:hover {
.c7:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c5:active,
.c5:active:hover,
.c5:active:focus {
.c7:active,
.c7:active:hover,
.c7:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c5[disabled] {
.c7[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c5:focus {
.c7:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c5:hover {
.c7:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c5:active,
.c5:active:hover,
.c5:active:focus {
.c7:active,
.c7:active:hover,
.c7:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c2 {
.c3 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
font-stretch: normal;
display: block;
@ -432,7 +512,33 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
font-size: 0.8125rem;
}
.c1 {
.c11 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.625rem;
margin-left: -0.625rem;
}
.c10 {
background-color: rgb(216,216,216);
margin: 0;
background-color: transparent;
height: 0.25rem;
}
.c2 {
display: inline-block;
margin: 0;
padding: 0;
@ -447,13 +553,11 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c3 {
.c5 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -471,41 +575,41 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
outline: 0;
}
.c3::-webkit-input-placeholder {
.c5::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3::-moz-placeholder {
.c5::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:-ms-input-placeholder {
.c5:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:invalid {
.c5:invalid {
box-shadow: none;
}
.c3:disabled {
.c5:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c3:disabled::-webkit-input-placeholder {
.c5:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:disabled::-moz-placeholder {
.c5:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:disabled:-ms-input-placeholder {
.c5:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c3:focus {
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -517,36 +621,52 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
className="c0"
>
<div
className="baseline-jVaZNU kXgQxt c1"
className="c1"
>
<div
className="baseline-jVaZNU kXgQxt c2"
name="name"
role="group"
style={undefined}
>
<label
className="c2"
className="c3"
htmlFor="l"
>
Attach to new CNS service name
</label>
<div
className="c4"
>
<input
className="c3"
className="c5"
disabled={false}
id="l"
onBlur={null}
placeholder="Example: mySQLdb"
/>
</div>
</div>
</div>
<div
className="c4"
className="c1"
>
<div
className="c6"
>
<button
className="c5 c6 c7"
className="c7 c8 c9"
disabled={true}
href=""
type="submit"
>
Add
</button>
<div
className="c10 c11"
height="0.25rem"
/>
</div>
</div>
</div>
</form>
@ -619,6 +739,10 @@ Array [
exports[`renders <Hostname /> without throwing 1`] = `null`;
exports[`renders <Hostname values /> without throwing 1`] = `
.c9 {
margin-top: 0.1875rem;
}
.c0 {
margin-bottom: 1.5rem;
}
@ -627,6 +751,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
margin-right: 0.375rem;
}
.c7 {
margin-top: 0.1875rem;
margin-bottom: 0.375rem;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
@ -681,13 +810,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
font-size: 0.8125rem;
}
.c7 {
.c8 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -708,69 +835,69 @@ exports[`renders <Hostname values /> without throwing 1`] = `
outline: 0;
}
.c7::-webkit-input-placeholder {
.c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c7::-moz-placeholder {
.c8::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c7:-ms-input-placeholder {
.c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c7:invalid {
.c8:invalid {
box-shadow: none;
}
.c7::-webkit-input-placeholder {
.c8::-webkit-input-placeholder {
color: rgb(216,216,216);
}
.c7::-moz-placeholder {
.c8::-moz-placeholder {
color: rgb(216,216,216);
}
.c7:-ms-input-placeholder {
.c8:-ms-input-placeholder {
color: rgb(216,216,216);
}
.c7:disabled {
.c8:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c7:disabled::-webkit-input-placeholder {
.c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c7:disabled::-moz-placeholder {
.c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c7:disabled:-ms-input-placeholder {
.c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c7:disabled {
.c8:disabled {
color: rgba(73,73,73,1);
}
.c7:disabled::-webkit-input-placeholder {
.c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,1);
}
.c7:disabled::-moz-placeholder {
.c8:disabled::-moz-placeholder {
color: rgba(73,73,73,1);
}
.c7:disabled:-ms-input-placeholder {
.c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,1);
}
.c7:focus {
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -831,21 +958,29 @@ exports[`renders <Hostname values /> without throwing 1`] = `
</small>
</div>
</div>
<input
<div
className="c7"
>
<input
className="c8"
disabled={true}
id=""
onBlur={null}
value="111"
/>
</div>
<div
className="c9"
>
<input
className="c7"
className="c8"
disabled={true}
id=""
onBlur={null}
value="111"
/>
</div>
</div>
`;
exports[`renders <HostnamesHeader /> without throwing 1`] = `

View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import Firewall, {
import {
Rules,
TagRules,
DefaultRules,
@ -212,71 +212,3 @@ it('renders <ToggleInactiveForm /> without throwing', () => {
.toJSON()
).toMatchSnapshot();
});
it('renders <Firewall /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Firewall />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Firewall defaultRules /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Fragment>
<Firewall
defaultRules={rules.filter(
({ rule_obj }) => !rule_obj.tags.length
)}
enabled
/>
<Firewall
defaultRules={rules.filter(
({ rule_obj }) => !rule_obj.tags.length
)}
/>
</Fragment>
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Firewall tagRules /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Fragment>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
enabled
/>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
/>
</Fragment>
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Firewall enabled /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Firewall enabled />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});

View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';
import Firewall, {
import {
Rules,
TagRules,
DefaultRules,
@ -198,59 +198,3 @@ it('<ToggleInactiveForm />', async () => {
)
).toMatchImageSnapshot();
});
it('<Firewall />', async () => {
expect(
await screenshot(
<Theme ss>
<Firewall />
</Theme>
)
).toMatchImageSnapshot();
});
it('<Firewall defaultRules />', async () => {
expect(
await screenshot(
<Theme ss>
<Fragment>
<Firewall
defaultRules={rules.filter(({ rule_obj }) => !rule_obj.tags.length)}
enabled
/>
<Firewall
defaultRules={rules.filter(({ rule_obj }) => !rule_obj.tags.length)}
/>
</Fragment>
</Theme>
)
).toMatchImageSnapshot();
});
it('<Firewall tagRules />', async () => {
expect(
await screenshot(
<Theme ss>
<Fragment>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
enabled
/>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
/>
</Fragment>
</Theme>
)
).toMatchImageSnapshot();
});
it('<Firewall enabled />', async () => {
expect(
await screenshot(
<Theme ss>
<Firewall enabled />
</Theme>
)
).toMatchImageSnapshot();
});

View File

@ -82,24 +82,32 @@ export const AddServiceForm = ({
}) => (
<form onSubmit={handleSubmit}>
<Flex alignEnd>
<FlexItem>
<FormGroup name="name" field={Field}>
<FormLabel>Attach to new CNS service name</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
type="text"
placeholder="Example: mySQLdb"
disabled={disabled || submitting}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<Margin left={2}>
<Button
type="submit"
disabled={disabled || pristine}
loading={submitting}
inline
>
Add
</Button>
<Divider height={remcalc(4)} transparent />
</Margin>
</FlexItem>
</Flex>
</form>
);
@ -126,8 +134,15 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
</FlexItem>
</Flex>
{values.map(value => (
{values.map((value, i) => (
<Margin
top={0.5}
bottom={
values.length !== 1 && values.length !== i + 1 ? '1' : undefined
}
>
<Input onBlur={null} disabled monospace fluid value={value} />
</Margin>
))}
</Margin>
) : null}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -170,8 +170,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -310,8 +308,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -387,8 +383,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -464,8 +458,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -852,8 +844,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -992,8 +982,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -1069,8 +1057,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -1146,8 +1132,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);

View File

@ -7,9 +7,9 @@ exports[`renders <Images /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -34,9 +34,9 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -61,9 +61,9 @@ exports[`renders <Images expanded /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -88,9 +88,9 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -108,15 +108,20 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
flex: 0 0 auto;
padding-right: 0.625rem;
padding-left: 0.625rem;
display: block;
}
.c7 {
.c2 {
margin-bottom: 1.125rem;
}
.c8 {
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
}
.c3 {
.c4 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@ -124,20 +129,20 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
.c4 + p,
.c4 + small,
.c4 + h1,
.c4 + h2,
.c4 + label,
.c4 + h3,
.c4 + h4,
.c4 + h5,
.c4 + div,
.c4 + span {
margin-top: 0.75rem;
}
.c2 {
.c3 {
width: 9rem;
height: 9rem;
background: rgb(255,255,255);
@ -160,13 +165,12 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 1.25rem;
-webkit-animation: eMLfYp 0.2s ease-in-out;
animation: eMLfYp 0.2s ease-in-out;
cursor: pointer;
}
.c4 {
.c5 {
display: inline-block;
margin: 0;
padding: 0;
@ -181,7 +185,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
-webkit-padding-after: 0;
}
.c6 {
.c7 {
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -192,7 +196,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
min-width: 18.75rem;
}
.c6:after {
.c7:after {
content: '';
width: 0.625rem;
height: 0.625rem;
@ -206,13 +210,11 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
right: 0.75rem;
}
.c8 {
.c9 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -230,51 +232,51 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
outline: 0;
}
.c8::-webkit-input-placeholder {
.c9::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8::-moz-placeholder {
.c9::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:-ms-input-placeholder {
.c9:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:invalid {
.c9:invalid {
box-shadow: none;
}
.c8:disabled {
.c9:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c8:disabled::-webkit-input-placeholder {
.c9:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:disabled::-moz-placeholder {
.c9:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:disabled:-ms-input-placeholder {
.c9:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:focus {
.c9:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5 {
.c6 {
min-width: 100%;
width: 9rem;
}
.c5 select {
.c6 select {
margin: 0;
border-bottom-width: 0;
border-top-left-radius: 0;
@ -287,7 +289,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@ -297,7 +298,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
-ms-flex-preferred-size: 16.666666666666668%;
flex-basis: 16.666666666666668%;
max-width: 16.666666666666668%;
display: block;
}
}
@ -310,6 +310,9 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
>
<div
className="c2"
>
<div
className="c3"
disabled={false}
id="image-card-stuff"
name="card"
@ -328,23 +331,23 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
width={36}
/>
<h4
className="c3"
className="c4"
>
Stuff
</h4>
<div
className="baseline-jVaZNU kXgQxt c4"
className="baseline-jVaZNU kXgQxt c5"
name="image"
role="group"
style={undefined}
>
<div
className="c5 c6"
className="c6 c7"
disabled={false}
onBlur={null}
>
<select
className="c5 c7 c8"
className="c6 c8 c9"
disabled={false}
id="k"
onBlur={null}
@ -360,6 +363,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
</div>
</div>
</div>
</div>
</form>
`;
@ -370,9 +374,9 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -397,9 +401,9 @@ exports[`renders <Images loading /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -424,9 +428,9 @@ exports[`renders <Images pristine={false} /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

View File

@ -9,15 +9,15 @@ exports[`renders <Title /> without throwing 1`] = `
font-size: 0.8125rem;
}
.c7 {
.c6 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -28,7 +28,7 @@ exports[`renders <Title /> without throwing 1`] = `
margin-left: -0.625rem;
}
.c6 {
.c5 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
@ -87,14 +87,9 @@ exports[`renders <Title /> without throwing 1`] = `
margin-right: 0.375rem;
}
.c5 {
.c4 {
margin-top: 0.375rem;
margin-bottom: 1.125rem;
}
.c4 + div:empty,
.c4 + form:empty {
margin-bottom: 2.5rem;
margin-bottom: 2.625rem;
}
<div
@ -115,10 +110,10 @@ exports[`renders <Title /> without throwing 1`] = `
/>
</div>
<div
className="c4 c5"
className="c4"
>
<div
className="c6 c7"
className="c5 c6"
height="0.0625rem"
/>
</div>
@ -134,15 +129,15 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
font-size: 0.8125rem;
}
.c7 {
.c6 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -153,7 +148,7 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
margin-left: -0.625rem;
}
.c6 {
.c5 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
@ -212,14 +207,9 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
margin-right: 0.375rem;
}
.c5 {
.c4 {
margin-top: 0.375rem;
margin-bottom: 1.125rem;
}
.c4 + div:empty,
.c4 + form:empty {
margin-bottom: 2.5rem;
margin-bottom: 2.625rem;
}
<div
@ -259,10 +249,10 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
/>
</div>
<div
className="c4 c5"
className="c4"
>
<div
className="c6 c7"
className="c5 c6"
height="0.0625rem"
/>
</div>
@ -278,15 +268,15 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
font-size: 0.8125rem;
}
.c7 {
.c6 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -297,7 +287,7 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
margin-left: -0.625rem;
}
.c6 {
.c5 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
@ -356,14 +346,9 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
margin-right: 0.375rem;
}
.c5 {
.c4 {
margin-top: 0.375rem;
margin-bottom: 1.125rem;
}
.c4 + div:empty,
.c4 + form:empty {
margin-bottom: 2.5rem;
margin-bottom: 2.625rem;
}
<div
@ -404,10 +389,10 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
/>
</div>
<div
className="c4 c5"
className="c4"
>
<div
className="c6 c7"
className="c5 c6"
height="0.0625rem"
/>
</div>
@ -423,15 +408,15 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
font-size: 0.8125rem;
}
.c7 {
.c6 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@ -442,7 +427,7 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
margin-left: -0.625rem;
}
.c6 {
.c5 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
@ -501,14 +486,9 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
margin-right: 0.375rem;
}
.c5 {
.c4 {
margin-top: 0.375rem;
margin-bottom: 1.125rem;
}
.c4 + div:empty,
.c4 + form:empty {
margin-bottom: 2.5rem;
margin-bottom: 2.625rem;
}
<div
@ -530,10 +510,10 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
/>
</div>
<div
className="c4 c5"
className="c4"
>
<div
className="c6 c7"
className="c5 c6"
height="0.0625rem"
/>
</div>

View File

@ -1,10 +1,10 @@
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { Field } from 'redux-form';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid';
import titleCase from 'title-case';
import includes from 'lodash.includes';
@ -67,6 +67,7 @@ const Image = ({ onClick, active, ...image }) => {
return (
<Col md={2} sm={3}>
<Margin bottom={3}>
<Card id={ids[0]} onClick={handleClick} active={active} preview>
<img
id={ids[1]}
@ -89,6 +90,7 @@ const Image = ({ onClick, active, ...image }) => {
</Version>
</FormGroup>
</Card>
</Margin>
</Col>
);
};

View File

@ -5,6 +5,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc';
import {
Divider,
FormGroup,
FormLabel,
Input,
@ -13,25 +14,21 @@ import {
RandomizeIcon
} from 'joyent-ui-toolkit';
export default ({
handleSubmit,
pristine,
asyncValidating,
placeholderName,
randomizing,
onRandomize
}) => (
<form onSubmit={handleSubmit}>
export default ({ placeholderName, randomizing, onRandomize }) => (
<form>
<Flex>
<FlexItem>
<FlexItem flex>
<FormGroup name="name" fluid field={Field}>
<FormLabel>Instance Name</FormLabel>
<Margin top={0.5}>
<Input placeholder={placeholderName} onBlur={null} />
</Margin>
<FormMeta />
</FormGroup>
</FlexItem>
<FlexItem>
<Margin left={1} top="14px">
<Divider height={remcalc(13)} transparent />
<Margin left={1}>
<Button
type="button"
marginTop={remcalc(8)}
@ -47,10 +44,5 @@ export default ({
</Margin>
</FlexItem>
</Flex>
<Margin top={2} bottom={4}>
<Button type="submit" disabled={pristine} loading={asyncValidating}>
Next
</Button>
</Margin>
</form>
);

View File

@ -1,12 +1,10 @@
/* eslint-disable camelcase */
import React from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled from 'styled-components';
import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid';
import {
H4,
@ -203,6 +201,7 @@ export const Expanded = ({
<FlexItem>
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
@ -210,11 +209,13 @@ export const Expanded = ({
type="text"
value={id}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
@ -222,11 +223,13 @@ export const Expanded = ({
type="text"
value={subnet}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="ip-range">
<FormLabel>IP range</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
@ -234,6 +237,7 @@ export const Expanded = ({
type="text"
value={`${provision_start_ip} - ${provision_end_ip}`}
/>
</Margin>
</FormGroup>
</FlexItem>
</Flex>

View File

@ -46,8 +46,8 @@ const VerticalDivider = styled.div`
box-sizing: border-box;
`;
export const Filters = ({ resetFilters }) => (
<Margin top={4} bottom={3}>
export const Filters = ({ onResetFilters }) => (
<Margin top={1} bottom={3}>
<H4>Filters</H4>
<Flex alignCenter justifyBetween>
<FormGroup type="checkbox" name="compute-optimized" field={Field}>
@ -105,7 +105,7 @@ export const Filters = ({ resetFilters }) => (
</FormGroup>
</Flex>
<Margin top={2} bottom={1}>
<Button secondary onClick={resetFilters}>
<Button type="button" onClick={onResetFilters} secondary>
Reset Filters
</Button>
</Margin>
@ -160,7 +160,6 @@ export const Package = ({
);
export const Packages = ({
handleSubmit,
pristine,
sortBy = 'name',
sortOrder = 'desc',
@ -169,7 +168,7 @@ export const Packages = ({
children,
packages
}) => (
<form onSubmit={handleSubmit}>
<form>
<Table>
<TableThead>
<TableTr>
@ -239,11 +238,6 @@ export const Packages = ({
Sorry, but we werent able to find any packages with that filter
</Empty>
) : null}
<Margin top={4}>
<Button type="submit" disabled={pristine}>
Next
</Button>
</Margin>
</form>
);
@ -258,7 +252,6 @@ export const Overview = ({
onCancel
}) => (
<Fragment>
<Margin bottom={2} top={3}>
<H3 bold>{name}</H3>
<Flex alignCenter>
<span>{price} $</span>
@ -275,9 +268,5 @@ export const Overview = ({
<VerticalDivider />
{ssd && <span>SSD</span>}
</Flex>
</Margin>
<Button type="button" secondary onClick={onCancel}>
Edit
</Button>
</Fragment>
);

View File

@ -7,20 +7,13 @@ import is from 'styled-is';
import { Divider, Small } from 'joyent-ui-toolkit';
const IsEmpty = styled(Margin)`
+ div:empty,
+ form:empty {
margin-bottom: ${remcalc(40)};
}
`;
const Container = styled.div`
${is('onClick')`
cursor: pointer;
`};
`;
export default ({ icon, children, ...rest }) => (
export default ({ icon, children, collapsed = true, ...rest }) => (
<Container {...rest}>
<Flex>
<Margin right={1}>
@ -30,8 +23,8 @@ export default ({ icon, children, ...rest }) => (
</Margin>
<Small noMargin>{children}</Small>
</Flex>
<IsEmpty top={1} bottom={3}>
<Margin top={1} bottom={collapsed ? 7 : 3}>
<Divider height={remcalc(1)} />
</IsEmpty>
</Margin>
</Container>
);

View File

@ -1,5 +1,5 @@
import React from 'react';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin } from 'styled-components-spacing';
import { P } from 'joyent-ui-toolkit';

View File

@ -2,16 +2,13 @@ import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import {
H3,
FormGroup,
FormLabel,
Toggle,
Divider,
Row,
Col,
TagList,
P,
Strong,
@ -19,7 +16,6 @@ import {
} from 'joyent-ui-toolkit';
import Tag from '@components/tags';
import Empty from '@components/empty';
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
@ -158,16 +154,36 @@ export const TagRules = ({ rules = [] }) => (
</Fragment>
);
export const ToggleFirewallForm = ({ handleSubmit, submitting }) => (
<form onChange={(...args) => setTimeout(() => handleSubmit(...args), 16)}>
export const ToggleFirewallForm = ({
handleSubmit = () => null,
submitOnChange = false,
submitting = false,
left = false
}) => {
const onChange = submitOnChange
? (...args) => setTimeout(() => handleSubmit(...args), 16)
: undefined;
return (
<form onChange={onChange}>
<FormGroup name="enabled" type="checkbox" field={Field}>
<Flex alignCenter>
<FormLabel>Enable Firewall</FormLabel>
{left ? (
<Fragment>
<Toggle disabled={submitting} />
<FormLabel marginless>Enable Firewall</FormLabel>
</Fragment>
) : (
<Fragment>
<FormLabel marginless>Enable Firewall</FormLabel>
<Toggle disabled={submitting} />
</Fragment>
)}
</Flex>
</FormGroup>
</form>
);
};
export const ToggleInactiveForm = () => (
<form>
@ -178,52 +194,3 @@ export const ToggleInactiveForm = () => (
</FormGroup>
</form>
);
export default ({
defaultRules = [],
tagRules = [],
enabled = false,
handleSubmit
}) => (
<form onSubmit={handleSubmit}>
<Margin bottom={4}>
<FormGroup name="enabled" field={Field}>
<Toggle>Enable firewall rules</Toggle>
</FormGroup>
{enabled ? (
<FormGroup name="show-inactive" field={Field}>
<Toggle>Show inactive rules</Toggle>
</FormGroup>
) : null}
</Margin>
{enabled ? <DefaultRules rules={defaultRules} /> : null}
{enabled && !tagRules.length && !defaultRules.length ? (
<Margin top={5}>
<Empty>Sorry, but we werent able to find any firewall rules.</Empty>
</Margin>
) : null}
{enabled && tagRules.length && defaultRules.length ? (
<Divider height={remcalc(18)} transparent />
) : null}
{enabled && tagRules.length ? <TagRules rules={tagRules} /> : null}
{enabled && (tagRules.length || defaultRules.length) ? (
<Divider height={remcalc(12)} transparent />
) : null}
{enabled ? (
<Margin bottom={4}>
<P>
*Other firewall rules may apply as defined by wildcard(s), IP(s),
subnet(s), tag(s) or VM(s). Please see{' '}
<a
href="https://apidocs.joyent.com/cloudapi/#firewall-rule-syntax"
target="_blank"
rel="noopener noreferrer"
>
firewall rule list
</a>{' '}
for more details.
</P>
</Margin>
) : null}
</form>
);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -1,9 +1,8 @@
import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { withTheme } from 'styled-components';
import {
Row,
Col,
Button,
Footer,
QueryBreakpoints,

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import remcalc from 'remcalc';

View File

@ -1,11 +1,10 @@
import React from 'react';
import { Field } from 'redux-form';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import {
Row,
Col,
FormGroup,
Input,
FormLabel,
@ -25,12 +24,14 @@ export const Toolbar = ({
<Col xs={7} sm={5}>
<FormGroup name="filter" fluid field={Field}>
<FormLabel>{searchLabel}</FormLabel>
<Margin top={0.5}>
<Input placeholder={searchPlaceholder} disabled={!searchable} fluid />
</Margin>
</FormGroup>
</Col>
<Col xs={5} sm={7}>
<FormGroup right>
<Margin top="14px">
<Divider height={remcalc(21)} transparent />
<Button
type={onActionClick ? 'button' : 'submit'}
disabled={!actionable}
@ -40,7 +41,6 @@ export const Toolbar = ({
>
{actionLabel}
</Button>
</Margin>
</FormGroup>
</Col>
</Row>

View File

@ -1,8 +1,8 @@
import React, { PureComponent, Fragment } from 'react';
import { Padding } from 'styled-components-spacing';
import { Margin, Padding } from 'styled-components-spacing';
import PropTypes from 'prop-types';
import { withTheme } from 'styled-components';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Field } from 'redux-form';
import styled from 'styled-components';
import remcalc from 'remcalc';
@ -73,7 +73,9 @@ const TextareaKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
<Col xs={12}>
<FormGroup name="name" field={Field} fluid>
<FormLabel>{titleCase(type)} key</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} type="text" disabled={submitting} />
</Margin>
<FormMeta />
</FormGroup>
<Divider height={remcalc(12)} transparent />
@ -85,12 +87,14 @@ const TextareaKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
<Col xs={12}>
<FormGroup name="value" field={Field} fluid>
<FormLabel>{titleCase(type)} value</FormLabel>
<Margin top={0.5}>
<Field
name="name"
fluid
component={ValueTextareaField}
props={{ submitting }}
/>
</Margin>
<FormMeta />
</FormGroup>
<Divider height={remcalc(12)} transparent />
@ -106,7 +110,9 @@ const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
<FlexItem basis="auto">
<FormGroup name="name" field={Field} fluid>
<FormLabel>{titleCase(type)} key</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} type="text" disabled={submitting} />
</Margin>
<FormMeta />
</FormGroup>
</FlexItem>
@ -117,7 +123,9 @@ const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
<FlexItem basis="auto">
<FormGroup name="value" field={Field} fluid>
<FormLabel>{titleCase(type)} value</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} disabled={submitting} />
</Margin>
<FormMeta />
</FormGroup>
</FlexItem>
@ -196,10 +204,12 @@ export const KeyValue = ({
{error && !submitting ? (
<Row>
<Col xs={12}>
<Margin bottom={4}>
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>{error}</MessageDescription>
</Message>
</Margin>
</Col>
</Row>
) : null}
@ -290,6 +300,5 @@ KeyValue.propTypes = {
export default withTheme(({ handleSubmit, ...rest }) => (
<form onSubmit={handleSubmit}>
<KeyValue {...rest} />
<Divider height={remcalc(13)} transparent />
</form>
));

View File

@ -1,10 +1,10 @@
import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin, Padding } from 'styled-components-spacing';
import styled from 'styled-components';
import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid';
import {
H4,
@ -231,6 +231,7 @@ export const Expanded = ({
<FlexItem>
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
@ -238,11 +239,13 @@ export const Expanded = ({
type="text"
value={id}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
@ -250,11 +253,13 @@ export const Expanded = ({
type="text"
value={subnet}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="ip-range">
<FormLabel>IP range</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
@ -262,6 +267,7 @@ export const Expanded = ({
type="text"
value={`${provision_start_ip} - ${provision_end_ip}`}
/>
</Margin>
</FormGroup>
</FlexItem>
</Flex>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Some files were not shown because too many files have changed in this diff Show More