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" "yargs": "^10.0.3"
}, },
"resolutions": { "resolutions": {
"component-type": "1.2.1",
"styled-components": "3.1.4", "styled-components": "3.1.4",
"axios": "0.16.2", "axios": "0.16.2",
"follow-redirects": "1.4.1", "follow-redirects": "1.4.1",

View File

@ -12,7 +12,7 @@
"lint-ci": "eslint . --ext .js --ext .md", "lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --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-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" "prepublish": "echo 0"
}, },
"dependencies": { "dependencies": {
@ -24,7 +24,8 @@
"constant-case": "^2.0.0", "constant-case": "^2.0.0",
"date-fns": "^1.29.0", "date-fns": "^1.29.0",
"declarative-redux-form": "^2.0.8", "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", "joyent-ui-toolkit": "^4.5.0",
"lodash.find": "^4.6.0", "lodash.find": "^4.6.0",
"lodash.findindex": "^4.6.0", "lodash.findindex": "^4.6.0",
@ -58,7 +59,7 @@
"scroll-to-element": "^2.0.0", "scroll-to-element": "^2.0.0",
"styled-components": "^3.1.4", "styled-components": "^3.1.4",
"styled-components-spacing": "^2.1.3", "styled-components-spacing": "^2.1.3",
"styled-flex-component": "^2.1.0", "styled-flex-component": "^2.2.0",
"title-case": "^2.1.1" "title-case": "^2.1.1"
}, },
"devDependencies": { "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`] = ` exports[`renders <AddServiceForm /> without throwing 1`] = `
.c4 { .c4 {
margin-top: 0.1875rem;
}
.c6 {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@ -29,7 +33,24 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
align-items: flex-end; 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-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -42,30 +63,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
min-width: 7.5rem; min-width: 7.5rem;
} }
.c7::-moz-focus-inner, .c9::-moz-focus-inner,
.c7[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c7[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c7[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c7:-moz-focusring, .c9:-moz-focusring,
.c7[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c7[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c7[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c7 + button { .c9 + button {
margin-left: 0.375rem; margin-left: 0.375rem;
} }
.c6 { .c8 {
display: inline-block; display: inline-block;
} }
.c5 { .c7 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
-webkit-box-pack: center; -webkit-box-pack: center;
@ -79,8 +100,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
min-height: 3rem; min-height: 3rem;
height: 3rem; height: 3rem;
min-width: 7.5rem; min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; 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); border: solid 0.0625rem rgb(45,56,132);
} }
.c5:focus { .c7:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c5:hover { .c7:hover {
background-color: rgb(72,83,217); background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
} }
.c5:active, .c7:active,
.c5:active:hover, .c7:active:hover,
.c5:active:focus { .c7:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
background-color: rgb(45,56,132); background-color: rgb(45,56,132);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c5[disabled] { .c7[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c2 { .c3 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
display: block; display: block;
@ -145,7 +165,33 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
font-size: 0.8125rem; 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; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -160,13 +206,11 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c3 { .c5 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -184,41 +228,41 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
outline: 0; outline: 0;
} }
.c3::-webkit-input-placeholder { .c5::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3::-moz-placeholder { .c5::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:-ms-input-placeholder { .c5:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:invalid { .c5:invalid {
box-shadow: none; box-shadow: none;
} }
.c3:disabled { .c5:disabled {
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
cursor: not-allowed; cursor: not-allowed;
} }
.c3:disabled::-webkit-input-placeholder { .c5:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:disabled::-moz-placeholder { .c5:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:disabled:-ms-input-placeholder { .c5:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:focus { .c5:focus {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
outline: 0; outline: 0;
} }
@ -230,36 +274,52 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
className="c0" className="c0"
> >
<div <div
className="baseline-jVaZNU kXgQxt c1" className="c1"
name="name"
role="group"
style={undefined}
> >
<label <div
className="c2" className="baseline-jVaZNU kXgQxt c2"
htmlFor="k" name="name"
role="group"
style={undefined}
> >
Attach to new CNS service name <label
</label> className="c3"
<input htmlFor="k"
className="c3" >
disabled={false} Attach to new CNS service name
id="k" </label>
onBlur={null} <div
placeholder="Example: mySQLdb" className="c4"
/> >
<input
className="c5"
disabled={false}
id="k"
onBlur={null}
placeholder="Example: mySQLdb"
/>
</div>
</div>
</div> </div>
<div <div
className="c4" className="c1"
> >
<button <div
className="c5 c6 c7" className="c6"
disabled={undefined}
href=""
type="submit"
> >
Add <button
</button> className="c7 c8 c9"
disabled={undefined}
href=""
type="submit"
>
Add
</button>
<div
className="c10 c11"
height="0.25rem"
/>
</div>
</div> </div>
</div> </div>
</form> </form>
@ -267,6 +327,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
exports[`renders <AddServiceForm pristine /> without throwing 1`] = ` exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
.c4 { .c4 {
margin-top: 0.1875rem;
}
.c6 {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@ -294,7 +358,24 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
align-items: flex-end; 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-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -307,30 +388,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
min-width: 7.5rem; min-width: 7.5rem;
} }
.c7::-moz-focus-inner, .c9::-moz-focus-inner,
.c7[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c7[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c7[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c7:-moz-focusring, .c9:-moz-focusring,
.c7[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c7[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c7[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c7 + button { .c9 + button {
margin-left: 0.375rem; margin-left: 0.375rem;
} }
.c6 { .c8 {
display: inline-block; display: inline-block;
} }
.c5 { .c7 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
-webkit-box-pack: center; -webkit-box-pack: center;
@ -344,8 +425,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
min-height: 3rem; min-height: 3rem;
height: 3rem; height: 3rem;
min-width: 7.5rem; min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; 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); border-color: rgb(216,216,216);
} }
.c5:focus { .c7:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c5:hover { .c7:hover {
background-color: rgb(72,83,217); background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
} }
.c5:active, .c7:active,
.c5:active:hover, .c7:active:hover,
.c5:active:focus { .c7:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
background-color: rgb(45,56,132); background-color: rgb(45,56,132);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c5[disabled] { .c7[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c5:focus { .c7:focus {
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
border-color: rgb(216,216,216); border-color: rgb(216,216,216);
} }
.c5:hover { .c7:hover {
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
border-color: rgb(250,250,250); border-color: rgb(250,250,250);
} }
.c5:active, .c7:active,
.c5:active:hover, .c7:active:hover,
.c5:active:focus { .c7:active:focus {
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
border-color: rgb(250,250,250); border-color: rgb(250,250,250);
} }
.c2 { .c3 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
display: block; display: block;
@ -432,7 +512,33 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
font-size: 0.8125rem; 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; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -447,13 +553,11 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c3 { .c5 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -471,41 +575,41 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
outline: 0; outline: 0;
} }
.c3::-webkit-input-placeholder { .c5::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3::-moz-placeholder { .c5::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:-ms-input-placeholder { .c5:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:invalid { .c5:invalid {
box-shadow: none; box-shadow: none;
} }
.c3:disabled { .c5:disabled {
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
cursor: not-allowed; cursor: not-allowed;
} }
.c3:disabled::-webkit-input-placeholder { .c5:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:disabled::-moz-placeholder { .c5:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:disabled:-ms-input-placeholder { .c5:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c3:focus { .c5:focus {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
outline: 0; outline: 0;
} }
@ -517,36 +621,52 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
className="c0" className="c0"
> >
<div <div
className="baseline-jVaZNU kXgQxt c1" className="c1"
name="name"
role="group"
style={undefined}
> >
<label <div
className="c2" className="baseline-jVaZNU kXgQxt c2"
htmlFor="l" name="name"
role="group"
style={undefined}
> >
Attach to new CNS service name <label
</label> className="c3"
<input htmlFor="l"
className="c3" >
disabled={false} Attach to new CNS service name
id="l" </label>
onBlur={null} <div
placeholder="Example: mySQLdb" className="c4"
/> >
<input
className="c5"
disabled={false}
id="l"
onBlur={null}
placeholder="Example: mySQLdb"
/>
</div>
</div>
</div> </div>
<div <div
className="c4" className="c1"
> >
<button <div
className="c5 c6 c7" className="c6"
disabled={true}
href=""
type="submit"
> >
Add <button
</button> className="c7 c8 c9"
disabled={true}
href=""
type="submit"
>
Add
</button>
<div
className="c10 c11"
height="0.25rem"
/>
</div>
</div> </div>
</div> </div>
</form> </form>
@ -619,6 +739,10 @@ Array [
exports[`renders <Hostname /> without throwing 1`] = `null`; exports[`renders <Hostname /> without throwing 1`] = `null`;
exports[`renders <Hostname values /> without throwing 1`] = ` exports[`renders <Hostname values /> without throwing 1`] = `
.c9 {
margin-top: 0.1875rem;
}
.c0 { .c0 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -627,6 +751,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
margin-right: 0.375rem; margin-right: 0.375rem;
} }
.c7 {
margin-top: 0.1875rem;
margin-bottom: 0.375rem;
}
.c1 { .c1 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -681,13 +810,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
font-size: 0.8125rem; font-size: 0.8125rem;
} }
.c7 { .c8 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -708,69 +835,69 @@ exports[`renders <Hostname values /> without throwing 1`] = `
outline: 0; outline: 0;
} }
.c7::-webkit-input-placeholder { .c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c7::-moz-placeholder { .c8::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c7:-ms-input-placeholder { .c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c7:invalid { .c8:invalid {
box-shadow: none; box-shadow: none;
} }
.c7::-webkit-input-placeholder { .c8::-webkit-input-placeholder {
color: rgb(216,216,216); color: rgb(216,216,216);
} }
.c7::-moz-placeholder { .c8::-moz-placeholder {
color: rgb(216,216,216); color: rgb(216,216,216);
} }
.c7:-ms-input-placeholder { .c8:-ms-input-placeholder {
color: rgb(216,216,216); color: rgb(216,216,216);
} }
.c7:disabled { .c8:disabled {
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
cursor: not-allowed; cursor: not-allowed;
} }
.c7:disabled::-webkit-input-placeholder { .c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c7:disabled::-moz-placeholder { .c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c7:disabled:-ms-input-placeholder { .c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c7:disabled { .c8:disabled {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
} }
.c7:disabled::-webkit-input-placeholder { .c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
} }
.c7:disabled::-moz-placeholder { .c8:disabled::-moz-placeholder {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
} }
.c7:disabled:-ms-input-placeholder { .c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
} }
.c7:focus { .c8:focus {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
outline: 0; outline: 0;
} }
@ -831,20 +958,28 @@ exports[`renders <Hostname values /> without throwing 1`] = `
</small> </small>
</div> </div>
</div> </div>
<input <div
className="c7" className="c7"
disabled={true} >
id="" <input
onBlur={null} className="c8"
value="111" disabled={true}
/> id=""
<input onBlur={null}
className="c7" value="111"
disabled={true} />
id="" </div>
onBlur={null} <div
value="111" className="c9"
/> >
<input
className="c8"
disabled={true}
id=""
onBlur={null}
value="111"
/>
</div>
</div> </div>
`; `;

View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import 'jest-styled-components'; import 'jest-styled-components';
import Firewall, { import {
Rules, Rules,
TagRules, TagRules,
DefaultRules, DefaultRules,
@ -212,71 +212,3 @@ it('renders <ToggleInactiveForm /> without throwing', () => {
.toJSON() .toJSON()
).toMatchSnapshot(); ).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 { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer'; import screenshot from 'react-screenshot-renderer';
import Firewall, { import {
Rules, Rules,
TagRules, TagRules,
DefaultRules, DefaultRules,
@ -198,59 +198,3 @@ it('<ToggleInactiveForm />', async () => {
) )
).toMatchImageSnapshot(); ).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}> <form onSubmit={handleSubmit}>
<Flex alignEnd> <Flex alignEnd>
<FormGroup name="name" field={Field}> <FlexItem>
<FormLabel>Attach to new CNS service name</FormLabel> <FormGroup name="name" field={Field}>
<Input <FormLabel>Attach to new CNS service name</FormLabel>
onBlur={null} <Margin top={0.5}>
type="text" <Input
placeholder="Example: mySQLdb" onBlur={null}
disabled={disabled || submitting} type="text"
/> placeholder="Example: mySQLdb"
</FormGroup> disabled={disabled || submitting}
<Margin left={2}> />
<Button </Margin>
type="submit" </FormGroup>
disabled={disabled || pristine} </FlexItem>
loading={submitting} <FlexItem>
> <Margin left={2}>
Add <Button
</Button> type="submit"
</Margin> disabled={disabled || pristine}
loading={submitting}
inline
>
Add
</Button>
<Divider height={remcalc(4)} transparent />
</Margin>
</FlexItem>
</Flex> </Flex>
</form> </form>
); );
@ -126,8 +134,15 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small> <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
</FlexItem> </FlexItem>
</Flex> </Flex>
{values.map(value => ( {values.map((value, i) => (
<Input onBlur={null} disabled monospace fluid value={value} /> <Margin
top={0.5}
bottom={
values.length !== 1 && values.length !== i + 1 ? '1' : undefined
}
>
<Input onBlur={null} disabled monospace fluid value={value} />
</Margin>
))} ))}
</Margin> </Margin>
) : null} ) : 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; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -310,8 +308,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -387,8 +383,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -464,8 +458,6 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -852,8 +844,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -992,8 +982,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -1069,8 +1057,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -1146,8 +1132,6 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem; padding: 0.8125rem 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);

View File

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

View File

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

View File

@ -1,10 +1,10 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component'; import Flex from 'styled-flex-component';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid';
import titleCase from 'title-case'; import titleCase from 'title-case';
import includes from 'lodash.includes'; import includes from 'lodash.includes';
@ -67,28 +67,30 @@ const Image = ({ onClick, active, ...image }) => {
return ( return (
<Col md={2} sm={3}> <Col md={2} sm={3}>
<Card id={ids[0]} onClick={handleClick} active={active} preview> <Margin bottom={3}>
<img <Card id={ids[0]} onClick={handleClick} active={active} preview>
id={ids[1]} <img
src={getImage(imageName).url} id={ids[1]}
width={getImage(imageName).size} src={getImage(imageName).url}
height={getImage(imageName).size} width={getImage(imageName).size}
style={{ marginBottom: getImage(imageName).bottom }} height={getImage(imageName).size}
alt={imageName} style={{ marginBottom: getImage(imageName).bottom }}
/> alt={imageName}
<H4>{titleCase(imageName)}</H4> />
<FormGroup name="image" field={Field}> <H4>{titleCase(imageName)}</H4>
<Version onBlur={null}> <FormGroup name="image" field={Field}>
<option selected>Version</option> <Version onBlur={null}>
{versions.map(({ name, version, id }) => ( <option selected>Version</option>
<option {versions.map(({ name, version, id }) => (
key={`${name} - ${version}`} <option
value={id} key={`${name} - ${version}`}
>{`${name} - ${version}`}</option> value={id}
))} >{`${name} - ${version}`}</option>
</Version> ))}
</FormGroup> </Version>
</Card> </FormGroup>
</Card>
</Margin>
</Col> </Col>
); );
}; };

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
import React from 'react'; 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 { Margin } from 'styled-components-spacing';
import { P } from 'joyent-ui-toolkit'; import { P } from 'joyent-ui-toolkit';

View File

@ -2,16 +2,13 @@ import React, { Fragment } from 'react';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component'; import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc'; import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { import {
H3, H3,
FormGroup, FormGroup,
FormLabel, FormLabel,
Toggle, Toggle,
Divider,
Row,
Col,
TagList, TagList,
P, P,
Strong, Strong,
@ -19,7 +16,6 @@ import {
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import Tag from '@components/tags'; import Tag from '@components/tags';
import Empty from '@components/empty';
const capitalizeFirstLetter = string => const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1); string.charAt(0).toUpperCase() + string.slice(1);
@ -158,16 +154,36 @@ export const TagRules = ({ rules = [] }) => (
</Fragment> </Fragment>
); );
export const ToggleFirewallForm = ({ handleSubmit, submitting }) => ( export const ToggleFirewallForm = ({
<form onChange={(...args) => setTimeout(() => handleSubmit(...args), 16)}> handleSubmit = () => null,
<FormGroup name="enabled" type="checkbox" field={Field}> submitOnChange = false,
<Flex alignCenter> submitting = false,
<FormLabel>Enable Firewall</FormLabel> left = false
<Toggle disabled={submitting} /> }) => {
</Flex> const onChange = submitOnChange
</FormGroup> ? (...args) => setTimeout(() => handleSubmit(...args), 16)
</form> : undefined;
);
return (
<form onChange={onChange}>
<FormGroup name="enabled" type="checkbox" field={Field}>
<Flex alignCenter>
{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 = () => ( export const ToggleInactiveForm = () => (
<form> <form>
@ -178,52 +194,3 @@ export const ToggleInactiveForm = () => (
</FormGroup> </FormGroup>
</form> </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 React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { withTheme } from 'styled-components'; import { withTheme } from 'styled-components';
import { import {
Row,
Col,
Button, Button,
Footer, Footer,
QueryBreakpoints, QueryBreakpoints,

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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 styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import remcalc from 'remcalc'; import remcalc from 'remcalc';

View File

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

View File

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

View File

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