Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(my-joy-beta): create instance - packages ui fixes

Browse Source 
fixes #1007
This commit is contained in:
Sara Vieira 2018-01-16 15:34:54 +00:00 committed by Sérgio Ramos
parent 74a4b82006
commit 35c50de56b
18 changed files with 830 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/my-joy-beta/package.json
View File

@ -22,6 +22,7 @@
"@manaflair/redux-batch": "^0.1.0", "@manaflair/redux-batch": "^0.1.0",
"apollo": "^0.2.2", "apollo": "^0.2.2",
"apr-intercept": "^1.0.4", "apr-intercept": "^1.0.4",
"bytes": "^3.0.0",
"clipboard-copy": "^1.2.0", "clipboard-copy": "^1.2.0",
"constant-case": "^2.0.0", "constant-case": "^2.0.0",
"date-fns": "^1.29.0", "date-fns": "^1.29.0",
@ -37,7 +38,6 @@
"lunr": "^2.1.5", "lunr": "^2.1.5",
"normalized-styled-components": "^1.0.17", "normalized-styled-components": "^1.0.17",
"param-case": "^2.1.1", "param-case": "^2.1.1",
"prettysize": "^1.1.0",
"prop-types": "^15.6.0", "prop-types": "^15.6.0",
"react": "^16.2.0", "react": "^16.2.0",
"react-apollo": "^1.4.16", "react-apollo": "^1.4.16",

2
packages/my-joy-beta/src/assets/debian.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy</title><path d="M24.37 22.2c-.7 0 .1.4 1 .5a4.35 4.35 0 0 0 .7-.6 9.15 9.15 0 0 1-1.7.1M28.17 21.2a4.76 4.76 0 0 0 .8-1.8 3.1 3.1 0 0 1-.6 1.3c-1.3.8-.1-.5 0-1-1.4 1.7-.2 1-.2 1.5M29.47 17.6c.1-1.3-.2-.9-.4-.4.2.1.3.9.4.4M21.77.5c.4.1.8.1.7.2.4-.1.5-.2-.7-.2M22.47.7l-.3.1.3-.1"/><path d="M34.07 18.1a5.59 5.59 0 0 1-.7 2.6l-.6.3c-.5 1 0 .6-.3 1.4a22.09 22.09 0 0 1-2.8 2.3c-.4 0 .2-.4.3-.6-1 .7-.8 1.1-2.4 1.5v-.1c-3.9 1.8-9.3-1.8-9.2-6.7 0 .3-.1.2-.2.4a6.2 6.2 0 0 1 3.5-6.1 5.69 5.69 0 0 1 6.5.9 5.88 5.88 0 0 0-4.8-2.3 5.06 5.06 0 0 0-4.6 2.8c-1.1.7-1.2 2.6-1.6 2.9-.6 4.5 1.2 6.5 4.2 8.8.5.3.1.4.2.6a10.52 10.52 0 0 1-2.7-2 5.39 5.39 0 0 0 1.4 1.6c-.9-.3-2.2-2.3-2.6-2.4 1.6 2.9 6.6 5.1 9.2 4a12.11 12.11 0 0 1-4.1-.5c-.6-.3-1.3-.9-1.2-1a10.14 10.14 0 0 0 10.3-1.5c.8-.6 1.6-1.6 1.9-1.7-.4.6.1.3-.2.8.8-1.3-.3-.5.8-2.2l.4.6c-.2-1 1.3-2.3 1.1-4 .3-.5.4.5 0 1.7.5-1.3.1-1.5.3-2.6.1.4.3.7.4 1.1a4.71 4.71 0 0 1 .5-2.8c-.2-.1-.5.6-.6-.9 0-.6.2-.3.2-.5A3.3 3.3 0 0 1 36 13c.1-.2.4.6.6.6-.1-.7-.3-1.3-.4-1.9-.6-1.2-.2.2-.7-.5-.6-1.9.5-.4.6-1.3a14.09 14.09 0 0 1 1.7 4.3 15.83 15.83 0 0 0-.9-3.1c.3.1-.5-2.2.4-.7a14.05 14.05 0 0 0-6.4-7.7c.3.3.7.7.6.7-1.3-.8-1.1-.8-1.3-1.2-1.1-.4-1.1 0-1.9 0A16.23 16.23 0 0 0 24 .6l.1.4c-1.3-.4-1.6.2-3 0-.1-.1.5-.2.9-.3-1.3.2-1.2-.3-2.5 0a8.79 8.79 0 0 1 1-.6c-1.1.1-2.5.6-2.1.1-1.7.8-4.8 1.9-6.5 3.5l-.1-.4c-.8.9-3.4 2.8-3.6 4.1H8a21.4 21.4 0 0 0-1 2.2c-.5.9-.8.4-.7.5a24.48 24.48 0 0 0-2 5.4c.3.5 0 2.9.1 4.8-.5 9.6 6.7 18.9 14.6 21a15.34 15.34 0 0 0 4.4.4c-1.7-.5-2-.3-3.6-.9a7.56 7.56 0 0 1-2.3-2l.3.6c-1.7-.6-1-.7-2.4-1.2l.4-.5a2.91 2.91 0 0 1-1.7-1.4h-.6c-.7-.9-1.1-1.5-1.1-2l-.2.3c-.2-.4-2.7-3.3-1.4-2.6a3 3 0 0 1-.9-1l.3-.3a6 6 0 0 1-1.1-2.1 1.41 1.41 0 0 0 .8.6c-1.5-3.8-1.6-.2-2.8-3.9h.2c-.2-.3-.3-.6-.5-.9l.1-1.1c-1.1-1.3-.3-5.4-.1-7.7.1-.9.9-1.9 1.5-3.5l-.4-.1c.7-1.3 4.1-5 5.7-4.8.8-1-.2 0-.3-.2 1.7-1.7 2.2-1.2 3.3-1.5 1.2-.7-1 .3-.5-.3 2.1-.5 1.5-1.2 4.2-1.5.3.2-.7.3-.9.5 1.7-.9 5.5-.7 8 .5 2.8 1.3 6.1 5.3 6.2 9h.1c-.1 1.5.2 3.2-.3 4.7l.7-.3"/><path d="M16.77 23.1l-.1.5a12.38 12.38 0 0 0 1.4 1.8c-.4-.8-.7-1.2-1.3-2.3M17.87 23.1a4.05 4.05 0 0 1-.5-.9 7.14 7.14 0 0 0 .8 1.5l-.3-.6M37 18.9l-.1.3a14.58 14.58 0 0 1-1.2 3.9 11.34 11.34 0 0 0 1.3-4.2M21.87.2a9.85 9.85 0 0 1 1.7-.2c-.7.1-1.3.1-1.9.2h.2M5.37 9c.1 1-.8 1.4.2.7.5-1.2-.2-.3-.2-.7M4.27 13.6a5.56 5.56 0 0 0 .3-1.5c-.6.8-.2 1-.3 1.5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy</title><path d="M24.37 22.2c-.7 0 .1.4 1 .5a4.35 4.35 0 0 0 .7-.6 9.15 9.15 0 0 1-1.7.1m3.8-1a4.76 4.76 0 0 0 .8-1.8 3.1 3.1 0 0 1-.6 1.3c-1.3.8-.1-.5 0-1-1.4 1.7-.2 1-.2 1.5m1.3-3.6c.1-1.3-.2-.9-.4-.4.2.1.3.9.4.4M21.77.5c.4.1.8.1.7.2.4-.1.5-.2-.7-.2m.7.2l-.3.1.3-.1"/><path d="M34.07 18.1a5.59 5.59 0 0 1-.7 2.6l-.6.3c-.5 1 0 .6-.3 1.4a22.09 22.09 0 0 1-2.8 2.3c-.4 0 .2-.4.3-.6-1 .7-.8 1.1-2.4 1.5v-.1c-3.9 1.8-9.3-1.8-9.2-6.7 0 .3-.1.2-.2.4a6.2 6.2 0 0 1 3.5-6.1 5.69 5.69 0 0 1 6.5.9 5.88 5.88 0 0 0-4.8-2.3 5.06 5.06 0 0 0-4.6 2.8c-1.1.7-1.2 2.6-1.6 2.9-.6 4.5 1.2 6.5 4.2 8.8.5.3.1.4.2.6a10.52 10.52 0 0 1-2.7-2 5.39 5.39 0 0 0 1.4 1.6c-.9-.3-2.2-2.3-2.6-2.4 1.6 2.9 6.6 5.1 9.2 4a12.11 12.11 0 0 1-4.1-.5c-.6-.3-1.3-.9-1.2-1a10.14 10.14 0 0 0 10.3-1.5c.8-.6 1.6-1.6 1.9-1.7-.4.6.1.3-.2.8.8-1.3-.3-.5.8-2.2l.4.6c-.2-1 1.3-2.3 1.1-4 .3-.5.4.5 0 1.7.5-1.3.1-1.5.3-2.6.1.4.3.7.4 1.1a4.71 4.71 0 0 1 .5-2.8c-.2-.1-.5.6-.6-.9 0-.6.2-.3.2-.5A3.3 3.3 0 0 1 36 13c.1-.2.4.6.6.6-.1-.7-.3-1.3-.4-1.9-.6-1.2-.2.2-.7-.5-.6-1.9.5-.4.6-1.3a14.09 14.09 0 0 1 1.7 4.3 15.83 15.83 0 0 0-.9-3.1c.3.1-.5-2.2.4-.7a14.05 14.05 0 0 0-6.4-7.7c.3.3.7.7.6.7-1.3-.8-1.1-.8-1.3-1.2-1.1-.4-1.1 0-1.9 0A16.23 16.23 0 0 0 24 .6l.1.4c-1.3-.4-1.6.2-3 0-.1-.1.5-.2.9-.3-1.3.2-1.2-.3-2.5 0a8.79 8.79 0 0 1 1-.6c-1.1.1-2.5.6-2.1.1-1.7.8-4.8 1.9-6.5 3.5l-.1-.4c-.8.9-3.4 2.8-3.6 4.1H8a21.4 21.4 0 0 0-1 2.2c-.5.9-.8.4-.7.5a24.48 24.48 0 0 0-2 5.4c.3.5 0 2.9.1 4.8-.5 9.6 6.7 18.9 14.6 21a15.34 15.34 0 0 0 4.4.4c-1.7-.5-2-.3-3.6-.9a7.56 7.56 0 0 1-2.3-2l.3.6c-1.7-.6-1-.7-2.4-1.2l.4-.5a2.91 2.91 0 0 1-1.7-1.4h-.6c-.7-.9-1.1-1.5-1.1-2l-.2.3c-.2-.4-2.7-3.3-1.4-2.6a3 3 0 0 1-.9-1l.3-.3a6 6 0 0 1-1.1-2.1 1.41 1.41 0 0 0 .8.6c-1.5-3.8-1.6-.2-2.8-3.9h.2c-.2-.3-.3-.6-.5-.9l.1-1.1c-1.1-1.3-.3-5.4-.1-7.7.1-.9.9-1.9 1.5-3.5l-.4-.1c.7-1.3 4.1-5 5.7-4.8.8-1-.2 0-.3-.2 1.7-1.7 2.2-1.2 3.3-1.5 1.2-.7-1 .3-.5-.3 2.1-.5 1.5-1.2 4.2-1.5.3.2-.7.3-.9.5 1.7-.9 5.5-.7 8 .5 2.8 1.3 6.1 5.3 6.2 9h.1c-.1 1.5.2 3.2-.3 4.7l.7-.3"/><path d="M16.77 23.1l-.1.5a12.38 12.38 0 0 0 1.4 1.8c-.4-.8-.7-1.2-1.3-2.3m1.1 0a4.05 4.05 0 0 1-.5-.9 7.14 7.14 0 0 0 .8 1.5l-.3-.6M37 18.9l-.1.3a14.58 14.58 0 0 1-1.2 3.9 11.34 11.34 0 0 0 1.3-4.2M21.87.2a9.85 9.85 0 0 1 1.7-.2c-.7.1-1.3.1-1.9.2h.2M5.37 9c.1 1-.8 1.4.2.7.5-1.2-.2-.3-.2-.7m-1.1 4.6a5.56 5.56 0 0 0 .3-1.5c-.6.8-.2 1-.3 1.5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

2
packages/my-joy-beta/src/assets/ghost.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 16</title><path d="M3 30.8h14.4V38H3zM24.6 30.8H39V38H24.6zM3 16.4h36v7.2H3zM3 2h21.6v7.2H3zM31.8 2H39v7.2h-7.2z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 16</title><path d="M3 30.8h14.4V38H3zm21.6 0H39V38H24.6zM3 16.4h36v7.2H3zM3 2h21.6v7.2H3zm28.8 0H39v7.2h-7.2z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 204 B

After

Width:  |  Height:  |  Size: 201 B

2
packages/my-joy-beta/src/assets/java.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 17</title><path d="M14.79 32.38s-1.6.9 1.1 1.2a23.57 23.57 0 0 0 8.7-.4 16.47 16.47 0 0 0 2.3 1.1c-8.2 3.7-18.6 0-12.1-1.9M13.79 27.78s-1.8 1.3.9 1.6a33.65 33.65 0 0 0 11.2-.5 5.63 5.63 0 0 0 1.7 1.1c-9.9 2.9-21 .2-13.8-2.2M22.19 20c2 2.3-.5 4.4-.5 4.4s5.1-2.7 2.8-6c-2.2-3.1-3.9-4.6 5.3-10-.1.1-14.4 3.7-7.6 11.6"/><path d="M33.09 35.78s1.2 1-1.3 1.7c-4.7 1.4-19.8 1.9-23.9.1-1.5-.7 1.3-1.6 2.2-1.7a7.21 7.21 0 0 1 1.4-.2C9.79 34.48.69 38 6.89 39c16.8 2.8 30.6-1.2 26.2-3.2M15.49 23.08s-7.6 1.8-2.7 2.5a57.48 57.48 0 0 0 10.1-.1c3.2-.3 6.3-.8 6.3-.8a19.64 19.64 0 0 0-1.9 1c-7.8 2-22.7 1.1-18.4-1a14.31 14.31 0 0 1 6.6-1.6M29.19 30.68c7.9-4.1 4.2-8 1.7-7.5a6.59 6.59 0 0 0-.9.2 1 1 0 0 1 .7-.5c5-1.8 8.9 5.2-1.6 8a.35.35 0 0 0 .1-.2M24.49 0s4.4 4.4-4.1 11.1c-6.8 5.4-1.6 8.5 0 12-4-3.6-6.9-6.8-4.9-9.7 2.8-4.4 10.7-6.5 9-13.4"/><path d="M16.29 41.78c7.6.5 19.2-.3 19.5-3.8 0 0-.5 1.4-6.3 2.4a61.75 61.75 0 0 1-19.1.3s.9.8 5.9 1.1"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 17</title><path d="M14.79 32.38s-1.6.9 1.1 1.2a23.57 23.57 0 0 0 8.7-.4 16.47 16.47 0 0 0 2.3 1.1c-8.2 3.7-18.6 0-12.1-1.9m-1-4.6s-1.8 1.3.9 1.6a33.65 33.65 0 0 0 11.2-.5 5.63 5.63 0 0 0 1.7 1.1c-9.9 2.9-21 .2-13.8-2.2m8.4-7.78c2 2.3-.5 4.4-.5 4.4s5.1-2.7 2.8-6c-2.2-3.1-3.9-4.6 5.3-10-.1.1-14.4 3.7-7.6 11.6"/><path d="M33.09 35.78s1.2 1-1.3 1.7c-4.7 1.4-19.8 1.9-23.9.1-1.5-.7 1.3-1.6 2.2-1.7a7.21 7.21 0 0 1 1.4-.2C9.79 34.48.69 38 6.89 39c16.8 2.8 30.6-1.2 26.2-3.2m-17.6-12.72s-7.6 1.8-2.7 2.5a57.48 57.48 0 0 0 10.1-.1c3.2-.3 6.3-.8 6.3-.8a19.64 19.64 0 0 0-1.9 1c-7.8 2-22.7 1.1-18.4-1a14.31 14.31 0 0 1 6.6-1.6m13.7 7.6c7.9-4.1 4.2-8 1.7-7.5a6.59 6.59 0 0 0-.9.2 1 1 0 0 1 .7-.5c5-1.8 8.9 5.2-1.6 8a.35.35 0 0 0 .1-.2M24.49 0s4.4 4.4-4.1 11.1c-6.8 5.4-1.6 8.5 0 12-4-3.6-6.9-6.8-4.9-9.7 2.8-4.4 10.7-6.5 9-13.4"/><path d="M16.29 41.78c7.6.5 19.2-.3 19.5-3.8 0 0-.5 1.4-6.3 2.4a61.75 61.75 0 0 1-19.1.3s.9.8 5.9 1.1"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1022 B

After

Width:  |  Height:  |  Size: 1014 B

2
packages/my-joy-beta/src/assets/multiarch.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 43</title><path d="M19.11 22.13l-1.62 1.28a37.59 37.59 0 0 1-7.34 4.51.48.48 0 0 1-.71-.18 37.78 37.78 0 0 1-6.27-14.13A5.29 5.29 0 0 1 3 12.37a1 1 0 0 1 .26-.65C4 11 4.76 10.19 5.57 9.51c1.52-1.3 3.09-2.51 4.64-3.8.07-.06.14-.1.28-.2.07.51.12 1 .18 1.43a20.7 20.7 0 0 0 2.87 7.93 39.56 39.56 0 0 0 5.22 6.86zM22.9 19.26a40.15 40.15 0 0 1 9.1-5.84c.3-.14.43 0 .59.19A35.64 35.64 0 0 1 37.81 24c.44 1.35.73 2.75 1.1 4.12a1.87 1.87 0 0 1-.63 2.08c-1.9 1.61-3.78 3.23-5.68 4.85-.32.27-.66.51-1.08.82-.06-.53-.12-1-.17-1.45a20.15 20.15 0 0 0-2.6-7.42 38.72 38.72 0 0 0-5.53-7.39zM22.42 22.58c.93 1.25 1.84 2.44 2.7 3.66a32.47 32.47 0 0 1 3.05 5.31.51.51 0 0 1-.2.74 36.18 36.18 0 0 1-10.91 5.38c-1.39.43-2.84.7-4.27 1a1 1 0 0 1-.78-.2c-.88-.86-1.75-1.72-2.54-2.65C8.3 34.45 7.19 33 6.05 31.64q-.13-.18-.27-.39c1-.16 2-.27 3-.48a22.65 22.65 0 0 0 8.5-4c1.68-1.22 3.23-2.6 4.84-3.91zM19.62 18.78c-.7-.91-1.39-1.78-2-2.67a35.8 35.8 0 0 1-3.69-6.18.61.61 0 0 1 .2-.93 37.82 37.82 0 0 1 14.56-6.25 1.75 1.75 0 0 1 1.78.52A77.82 77.82 0 0 1 36.16 10a.78.78 0 0 1 .06.16c-.68.08-1.34.15-2 .26a21.55 21.55 0 0 0-7.71 3 40.5 40.5 0 0 0-6.46 5c-.12.1-.25.2-.43.36zM27.07 35.7l2.08-1.41a5.22 5.22 0 0 1 .27 2.09c0 .06-.26.18-.36.15-.67-.21-1.33-.44-2-.67zM5.89 26.72L7.39 29c-.8.06-1.46.12-2.12.15-.07 0-.21-.18-.2-.25a6.43 6.43 0 0 1 .82-2.18zM15 5.67l-2.14 1.41A5.47 5.47 0 0 1 12.6 5c0-.06.23-.17.32-.14.68.21 1.36.44 2 .67zM36.14 14.65l-1.45-2.12a5.14 5.14 0 0 1 2.1-.27c.06 0 .17.14.16.2a6.64 6.64 0 0 1-.81 2.19z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 43</title><path d="M19.11 22.13l-1.62 1.28a37.59 37.59 0 0 1-7.34 4.51.48.48 0 0 1-.71-.18 37.78 37.78 0 0 1-6.27-14.13A5.29 5.29 0 0 1 3 12.37a1 1 0 0 1 .26-.65C4 11 4.76 10.19 5.57 9.51c1.52-1.3 3.09-2.51 4.64-3.8.07-.06.14-.1.28-.2.07.51.12 1 .18 1.43a20.7 20.7 0 0 0 2.87 7.93 39.56 39.56 0 0 0 5.22 6.86zm3.79-2.87a40.15 40.15 0 0 1 9.1-5.84c.3-.14.43 0 .59.19A35.64 35.64 0 0 1 37.81 24c.44 1.35.73 2.75 1.1 4.12a1.87 1.87 0 0 1-.63 2.08c-1.9 1.61-3.78 3.23-5.68 4.85-.32.27-.66.51-1.08.82-.06-.53-.12-1-.17-1.45a20.15 20.15 0 0 0-2.6-7.42 38.72 38.72 0 0 0-5.53-7.39zm-.48 3.32c.93 1.25 1.84 2.44 2.7 3.66a32.47 32.47 0 0 1 3.05 5.31.51.51 0 0 1-.2.74 36.18 36.18 0 0 1-10.91 5.38c-1.39.43-2.84.7-4.27 1a1 1 0 0 1-.78-.2c-.88-.86-1.75-1.72-2.54-2.65C8.3 34.45 7.19 33 6.05 31.64q-.13-.18-.27-.39c1-.16 2-.27 3-.48a22.65 22.65 0 0 0 8.5-4c1.68-1.22 3.23-2.6 4.84-3.91zm-2.8-3.8c-.7-.91-1.39-1.78-2-2.67a35.8 35.8 0 0 1-3.69-6.18.61.61 0 0 1 .2-.93 37.82 37.82 0 0 1 14.56-6.25 1.75 1.75 0 0 1 1.78.52A77.82 77.82 0 0 1 36.16 10a.78.78 0 0 1 .06.16c-.68.08-1.34.15-2 .26a21.55 21.55 0 0 0-7.71 3 40.5 40.5 0 0 0-6.46 5c-.12.1-.25.2-.43.36zm7.45 16.92l2.08-1.41a5.22 5.22 0 0 1 .27 2.09c0 .06-.26.18-.36.15-.67-.21-1.33-.44-2-.67zM5.89 26.72L7.39 29c-.8.06-1.46.12-2.12.15-.07 0-.21-.18-.2-.25a6.43 6.43 0 0 1 .82-2.18zM15 5.67l-2.14 1.41A5.47 5.47 0 0 1 12.6 5c0-.06.23-.17.32-.14.68.21 1.36.44 2 .67zm21.14 8.98l-1.45-2.12a5.14 5.14 0 0 1 2.1-.27c.06 0 .17.14.16.2a6.64 6.64 0 0 1-.81 2.19z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

1
packages/my-joy-beta/src/assets/no-packages.svg Normal file
View File

@ -0,0 +1 @@
<svg width="79" height="60" viewBox="0 0 79 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Guilty_Salamander</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(23.8 22)" fill="#FAA427"/><use xlink:href="#b" transform="translate(27.3 25.5)" fill="#F3722C"/><use xlink:href="#c" transform="translate(4.8 32.1)" fill="#FAA427"/><use xlink:href="#d" transform="translate(12.2 31.8)" fill="#F3722C"/><use xlink:href="#e" transform="translate(54.4 31.9)" fill="#FAA427"/><use xlink:href="#f" transform="translate(54.4 32)" fill="#F3722C"/><use xlink:href="#g" transform="translate(15.8 26.8)" fill="#FAA427"/><use xlink:href="#h" transform="translate(5)" fill="#FAA427"/><use xlink:href="#i" transform="rotate(-15.13 41.037 5.45)" fill="#FAFBFC"/><use xlink:href="#j" transform="rotate(-15.13 67.273 -24.78)" fill="#412B13"/><use xlink:href="#k" transform="translate(2.2 8)" fill="#F3722C"/><use xlink:href="#l" transform="rotate(-74.87 40.46 -20.511)" fill="#FAFBFC"/><use xlink:href="#m" transform="rotate(-74.87 41.364 -22.098)" fill="#412B13"/><use xlink:href="#n" transform="translate(52.1 8)" fill="#F3722C"/><use xlink:href="#o" transform="translate(31.5 34.3)" fill="#F3722C"/><use xlink:href="#p" transform="translate(14.3)" fill="#F3722C"/><use xlink:href="#q" transform="translate(30.9 18.9)" fill="#F3722C"/><use xlink:href="#r" transform="translate(37.6 18.9)" fill="#F3722C"/><use xlink:href="#s" transform="translate(27.4 53.9)" fill="#FAA427"/><use xlink:href="#t" transform="translate(39.1 53.9)" fill="#FAA427"/><use xlink:href="#u" transform="translate(27.4 53.9)" fill="#F3722C"/><use xlink:href="#v" transform="translate(28.6 26.2)" fill="#342013"/><use xlink:href="#w" transform="translate(32.6 28.7)" fill="#FFF"/><defs><path id="a" d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"/><path id="b" d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"/><path id="c" d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"/><path id="d" d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"/><path id="e" d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"/><path id="f" d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"/><path id="g" d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"/><path id="h" d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"/><path id="i" d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"/><path id="j" d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"/><path id="k" d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"/><path id="l" d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"/><path id="m" d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"/><path id="n" d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"/><path id="o" d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"/><path id="p" d="M0 0l22.258 18.498L44.516 0H0z"/><path id="q" d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"/><path id="r" d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"/><path id="s" d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"/><path id="t" d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"/><path id="u" d="M31.328 0H0v1.474h31.328V0z"/><path id="v" d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"/><path id="w" d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"/></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

2
packages/my-joy-beta/src/assets/node.svg
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.15zM21.5 37.05c.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.2zM35.9 12.35a1.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 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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

2
packages/my-joy-beta/src/assets/postgresql.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 12</title><path d="M18.67 22.9l.1-.2c.1-.3.2-.5.3-.8.6-1.3 1.3-3 .5-6.9a1.75 1.75 0 0 0-1.2-1.4 6 6 0 0 0-3.9 1.1v.3a17.45 17.45 0 0 1-.1 4.5 4.47 4.47 0 0 0 1.1 3.7 3.57 3.57 0 0 0 2.7 1.2 8.8 8.8 0 0 1 .5-1.5zm-1.3-8a.76.76 0 0 1-.2-.4c0-.1 0-.1.1-.2a1.25 1.25 0 0 1 .9-.1c.5.1.9.3.9.6s-.5.6-.9.6h-.1a1.16 1.16 0 0 1-.7-.5zM19.87 25.7c-.3-.1-.4-.2-.8.2a3.81 3.81 0 0 1-.5.6c-.6.8-.9 1.1-2.8 1.5-.4.1-.6.2-.7.2a4.88 4.88 0 0 0 .7.3c1.4.3 3.3.4 4.6-1.5.2-.2.1-.5.1-.7a1.72 1.72 0 0 0-.6-.6zM30.17 8.1a9.77 9.77 0 0 1 2.5 4.8v.3a12.31 12.31 0 0 1-.2 2 7.77 7.77 0 0 0-.2 1.6c0 .6.1 1.2.1 1.8a7 7 0 0 1-.7 5l.1.1c0 .1.1.1.1.2 4.1-6.5 5.5-14 4.2-15.6A8.51 8.51 0 0 0 29 5a12.62 12.62 0 0 0-3 .3 7.81 7.81 0 0 1 4.17 2.8z"/><path d="M31.57 14.9c.1-.5.1-1 .2-1.5-2.1-.3-2.9.2-3.2.7-1.1 1.5 1 5.3 1.9 7 .2.4.4.7.5.9l.3.6a6.87 6.87 0 0 0 .3-4 6.08 6.08 0 0 1-.1-1.9 5.15 5.15 0 0 1 .1-1.8zm-1.1-.3a.85.85 0 0 1-.6.3h-.1c-.4 0-.8-.3-.8-.5s.4-.5.8-.5.9 0 .9.3c.1.1 0 .3-.2.4zM13.37 19.4a15.94 15.94 0 0 0 .1-4.3v-.5c0-.3-.1-5.4 2.9-8.4l.1-.1c-1.8-.6-6.3-1.8-9 .2-1.7 1.2-2.47 3.4-2.3 6.6A52.73 52.73 0 0 0 7 21.1c1.3 4.1 2.7 6.7 3.9 7.1.2.1.8.3 1.6-.7 1.2-1.4 2.3-2.6 2.8-3.2-.1-.1-.3-.2-.4-.3a5.64 5.64 0 0 1-1.53-4.6z"/><path d="M39 24.9a1.72 1.72 0 0 0-1.5-1.2 2.63 2.63 0 0 0-1.2.1 7.18 7.18 0 0 1-1.9.2 34.44 34.44 0 0 0 3.8-9.1c1.3-4.9.6-7.1-.2-8.1a10.64 10.64 0 0 0-8.8-4.1 20.5 20.5 0 0 0-4.6.6 21.3 21.3 0 0 0-2.7-.2 10.18 10.18 0 0 0-4.7 1.1 22.81 22.81 0 0 0-3.3-.8c-3.2-.5-5.8-.1-7.7 1.2C3.87 6.2 2.77 9 3 13a52.13 52.13 0 0 0 1.9 8.7 25.8 25.8 0 0 0 2 5.1c1 1.9 2.1 3 3.2 3.4a3.24 3.24 0 0 0 3.2-.7 4.35 4.35 0 0 0 .7.6 5 5 0 0 0 1.3.5 6.55 6.55 0 0 0 4.4-.3v1.5a15.45 15.45 0 0 0 .6 4.4c0 .1 0 .1.1.2a5 5 0 0 0 1.3 2.3 3.74 3.74 0 0 0 2.8 1c.5 0 .9-.1 1.3-.1a5.76 5.76 0 0 0 4.1-2.4c1.1-1.5 1.6-3.8 1.7-7.5v-.5h.4a9.53 9.53 0 0 0 4.2-.7c.67-.2 3.37-1.6 2.8-3.6zm-3.4 2.8a8.45 8.45 0 0 1-3.3.6 6.05 6.05 0 0 1-1.5-.2c-.2 1.7-.6 5-.8 6.3-.4 2.5-1.6 3.7-4.2 4.3a4.87 4.87 0 0 1-1.2.1A3.75 3.75 0 0 1 21 36c-.4-1-.5-4.2-.5-7.5a4.79 4.79 0 0 1-3.3 1.2 11.14 11.14 0 0 1-1.7-.2c-.2 0-1.6-.4-1.6-1.4 0-.8 1.2-1.1 1.7-1.2 1.6-.3 1.7-.5 2.2-1.1.1-.1.2-.3.4-.4v-.1a4.2 4.2 0 0 1-2.1-.6c-.4.5-1.6 1.7-2.9 3.2a2.89 2.89 0 0 1-2.1 1.2 1.7 1.7 0 0 1-.7-.1c-1.6-.5-3.2-3.2-4.6-7.8A39.62 39.62 0 0 1 4 12.8q-.3-5.4 2.7-7.5c1.7-1.2 4-1.5 6.9-1.1a19.58 19.58 0 0 1 3.6 1A7.23 7.23 0 0 1 21.67 4a10.9 10.9 0 0 1 2.6.3 11.44 11.44 0 0 1 4.6-.7 9.74 9.74 0 0 1 8 3.7 4.6 4.6 0 0 1 .7 2.9 14.72 14.72 0 0 1-.7 4.3 34.56 34.56 0 0 1-4.5 10c.3.2 1.2.6 3.7.1.9-.2 1.4 0 1.5.5.7 1.1-1 2.1-2 2.6z"/><path d="M32.07 25.6a.1.1 0 0 1-.1-.1c-.1 0-.1 0-.2.1-.5.1-.9.3-.9 1.5a2.82 2.82 0 0 0 1.7.2 8.56 8.56 0 0 0 2.6-.5 4.83 4.83 0 0 0 1.5-1c-2.2.4-3.67.4-4.6-.2z"/><path d="M31.07 24.2A7 7 0 0 1 30 22.4a5.56 5.56 0 0 1-.4-.8c-1.1-1.9-3.3-6-1.9-8.1.7-1 2-1.3 3.9-1.1a11.91 11.91 0 0 0-2.1-3.6 10.27 10.27 0 0 0-7.7-3.7 6.41 6.41 0 0 0-4.7 1.8c-1.9 1.9-2.4 4.9-2.5 6.6.1 0 .2-.1.3-.2a8.12 8.12 0 0 1 2.5-.8 2.73 2.73 0 0 1 3.3 2.2c.9 4.3.1 6.2-.6 7.6a4.88 4.88 0 0 1-.3.7l-.1.2a12.13 12.13 0 0 0-.5 1.4 1.89 1.89 0 0 1 1.1.1 1.81 1.81 0 0 1 1.1 1.4c0 .1.1.2.1.3v.2c-.1 4.3 0 8.2.4 9.1a2.85 2.85 0 0 0 3.7 2c2.2-.5 3-1.3 3.4-3.4.3-1.6.8-6.2.9-7.2-.1-2 1-2.3 1.5-2.5-.13-.1-.23-.3-.33-.4z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 12</title><path d="M18.67 22.9l.1-.2c.1-.3.2-.5.3-.8.6-1.3 1.3-3 .5-6.9a1.75 1.75 0 0 0-1.2-1.4 6 6 0 0 0-3.9 1.1v.3a17.45 17.45 0 0 1-.1 4.5 4.47 4.47 0 0 0 1.1 3.7 3.57 3.57 0 0 0 2.7 1.2 8.8 8.8 0 0 1 .5-1.5zm-1.3-8a.76.76 0 0 1-.2-.4c0-.1 0-.1.1-.2a1.25 1.25 0 0 1 .9-.1c.5.1.9.3.9.6s-.5.6-.9.6h-.1a1.16 1.16 0 0 1-.7-.5zm2.5 10.8c-.3-.1-.4-.2-.8.2a3.81 3.81 0 0 1-.5.6c-.6.8-.9 1.1-2.8 1.5-.4.1-.6.2-.7.2a4.88 4.88 0 0 0 .7.3c1.4.3 3.3.4 4.6-1.5.2-.2.1-.5.1-.7a1.72 1.72 0 0 0-.6-.6zm10.3-17.6a9.77 9.77 0 0 1 2.5 4.8v.3a12.31 12.31 0 0 1-.2 2 7.77 7.77 0 0 0-.2 1.6c0 .6.1 1.2.1 1.8a7 7 0 0 1-.7 5l.1.1c0 .1.1.1.1.2 4.1-6.5 5.5-14 4.2-15.6A8.51 8.51 0 0 0 29 5a12.62 12.62 0 0 0-3 .3 7.81 7.81 0 0 1 4.17 2.8z"/><path d="M31.57 14.9c.1-.5.1-1 .2-1.5-2.1-.3-2.9.2-3.2.7-1.1 1.5 1 5.3 1.9 7 .2.4.4.7.5.9l.3.6a6.87 6.87 0 0 0 .3-4 6.08 6.08 0 0 1-.1-1.9 5.15 5.15 0 0 1 .1-1.8zm-1.1-.3a.85.85 0 0 1-.6.3h-.1c-.4 0-.8-.3-.8-.5s.4-.5.8-.5.9 0 .9.3c.1.1 0 .3-.2.4zm-17.1 4.8a15.94 15.94 0 0 0 .1-4.3v-.5c0-.3-.1-5.4 2.9-8.4l.1-.1c-1.8-.6-6.3-1.8-9 .2-1.7 1.2-2.47 3.4-2.3 6.6A52.73 52.73 0 0 0 7 21.1c1.3 4.1 2.7 6.7 3.9 7.1.2.1.8.3 1.6-.7 1.2-1.4 2.3-2.6 2.8-3.2-.1-.1-.3-.2-.4-.3a5.64 5.64 0 0 1-1.53-4.6z"/><path d="M39 24.9a1.72 1.72 0 0 0-1.5-1.2 2.63 2.63 0 0 0-1.2.1 7.18 7.18 0 0 1-1.9.2 34.44 34.44 0 0 0 3.8-9.1c1.3-4.9.6-7.1-.2-8.1a10.64 10.64 0 0 0-8.8-4.1 20.5 20.5 0 0 0-4.6.6 21.3 21.3 0 0 0-2.7-.2 10.18 10.18 0 0 0-4.7 1.1 22.81 22.81 0 0 0-3.3-.8c-3.2-.5-5.8-.1-7.7 1.2C3.87 6.2 2.77 9 3 13a52.13 52.13 0 0 0 1.9 8.7 25.8 25.8 0 0 0 2 5.1c1 1.9 2.1 3 3.2 3.4a3.24 3.24 0 0 0 3.2-.7 4.35 4.35 0 0 0 .7.6 5 5 0 0 0 1.3.5 6.55 6.55 0 0 0 4.4-.3v1.5a15.45 15.45 0 0 0 .6 4.4c0 .1 0 .1.1.2a5 5 0 0 0 1.3 2.3 3.74 3.74 0 0 0 2.8 1c.5 0 .9-.1 1.3-.1a5.76 5.76 0 0 0 4.1-2.4c1.1-1.5 1.6-3.8 1.7-7.5v-.5h.4a9.53 9.53 0 0 0 4.2-.7c.67-.2 3.37-1.6 2.8-3.6zm-3.4 2.8a8.45 8.45 0 0 1-3.3.6 6.05 6.05 0 0 1-1.5-.2c-.2 1.7-.6 5-.8 6.3-.4 2.5-1.6 3.7-4.2 4.3a4.87 4.87 0 0 1-1.2.1A3.75 3.75 0 0 1 21 36c-.4-1-.5-4.2-.5-7.5a4.79 4.79 0 0 1-3.3 1.2 11.14 11.14 0 0 1-1.7-.2c-.2 0-1.6-.4-1.6-1.4 0-.8 1.2-1.1 1.7-1.2 1.6-.3 1.7-.5 2.2-1.1.1-.1.2-.3.4-.4v-.1a4.2 4.2 0 0 1-2.1-.6c-.4.5-1.6 1.7-2.9 3.2a2.89 2.89 0 0 1-2.1 1.2 1.7 1.7 0 0 1-.7-.1c-1.6-.5-3.2-3.2-4.6-7.8A39.62 39.62 0 0 1 4 12.8q-.3-5.4 2.7-7.5c1.7-1.2 4-1.5 6.9-1.1a19.58 19.58 0 0 1 3.6 1A7.23 7.23 0 0 1 21.67 4a10.9 10.9 0 0 1 2.6.3 11.44 11.44 0 0 1 4.6-.7 9.74 9.74 0 0 1 8 3.7 4.6 4.6 0 0 1 .7 2.9 14.72 14.72 0 0 1-.7 4.3 34.56 34.56 0 0 1-4.5 10c.3.2 1.2.6 3.7.1.9-.2 1.4 0 1.5.5.7 1.1-1 2.1-2 2.6z"/><path d="M32.07 25.6a.1.1 0 0 1-.1-.1c-.1 0-.1 0-.2.1-.5.1-.9.3-.9 1.5a2.82 2.82 0 0 0 1.7.2 8.56 8.56 0 0 0 2.6-.5 4.83 4.83 0 0 0 1.5-1c-2.2.4-3.67.4-4.6-.2z"/><path d="M31.07 24.2A7 7 0 0 1 30 22.4a5.56 5.56 0 0 1-.4-.8c-1.1-1.9-3.3-6-1.9-8.1.7-1 2-1.3 3.9-1.1a11.91 11.91 0 0 0-2.1-3.6 10.27 10.27 0 0 0-7.7-3.7 6.41 6.41 0 0 0-4.7 1.8c-1.9 1.9-2.4 4.9-2.5 6.6.1 0 .2-.1.3-.2a8.12 8.12 0 0 1 2.5-.8 2.73 2.73 0 0 1 3.3 2.2c.9 4.3.1 6.2-.6 7.6a4.88 4.88 0 0 1-.3.7l-.1.2a12.13 12.13 0 0 0-.5 1.4 1.89 1.89 0 0 1 1.1.1 1.81 1.81 0 0 1 1.1 1.4c0 .1.1.2.1.3v.2c-.1 4.3 0 8.2.4 9.1a2.85 2.85 0 0 0 3.7 2c2.2-.5 3-1.3 3.4-3.4.3-1.6.8-6.2.9-7.2-.1-2 1-2.3 1.5-2.5-.13-.1-.23-.3-.33-.4z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

2
packages/my-joy-beta/src/assets/redis.svg
View File

@ -1 +1 @@
<svg id="svg4300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><style>.cls-1,.cls-2{fill:#fff}.cls-1{opacity:.25;isolation:isolate}.cls-3{fill:#333}</style></defs><title>Artboard 1 copy 20</title><path d="M37.57 23.65c-1.9-.7-11.8-4.6-13.7-5.3s-2.7-.7-4.9.1-12.8 4.9-14.6 5.7c-.9.4-1.4.7-1.4 1.1H3v3.6c0 .4.5.7 1.5 1.2 1.9.9 12.5 5.2 14.2 6s2.9.8 5-.3 12.1-5.2 14-6.2c1-.5 1.4-.9 1.4-1.3v-3.6c-.1-.4-.53-.65-1.53-1z"/><path class="cls-1" d="M37.57 25.85c-1.9 1-11.9 5.1-14 6.2s-3.3 1.1-5 .3-12.3-5.1-14.2-6-1.9-1.5-.1-2.3 12.4-4.9 14.6-5.7 3-.8 4.9-.1 11.8 4.6 13.7 5.3 2 1.3.1 2.3z"/><path d="M37.57 17.75c-1.9-.7-11.8-4.6-13.7-5.3s-2.7-.7-4.9.1-12.8 4.9-14.6 5.7c-.9.4-1.4.7-1.4 1.1H3V23c0 .4.5.7 1.5 1.2 1.9.9 12.5 5.2 14.2 6s2.9.8 5-.3 12.1-5.2 14-6.2c1-.5 1.4-.9 1.4-1.3v-3.6c-.1-.35-.53-.75-1.53-1.05z"/><path class="cls-1" d="M37.57 20c-1.9 1-11.9 5.1-14 6.2s-3.3 1.1-5 .3-12.3-5.1-14.2-6-1.9-1.5-.1-2.3 12.4-4.9 14.6-5.7 3-.8 4.9-.1 11.8 4.6 13.7 5.3 2 1.3.1 2.3z"/><path d="M37.57 11.55c-1.9-.7-11.8-4.6-13.7-5.3s-2.7-.7-4.9.1-12.8 4.9-14.6 5.7c-.9.4-1.4.7-1.4 1.1H3v3.6c0 .4.5.7 1.5 1.2 1.9.9 12.5 5.2 14.2 6s2.9.8 5-.3 12.1-5.2 14-6.2c1-.5 1.4-.9 1.4-1.3v-3.6c-.1-.3-.53-.7-1.53-1z"/><path class="cls-1" d="M37.57 13.75c-1.9 1-11.9 5.1-14 6.2s-3.3 1.1-5 .3-12.3-5.1-14.2-6-1.9-1.5-.1-2.3 12.4-4.9 14.6-5.7 3-.8 4.9-.1 11.8 4.6 13.7 5.3 2 1.3.1 2.3z"/><path class="cls-2" d="M25.77 10.25l-3.2.4-.7 1.6-1.1-1.8-3.6-.4 2.7-.9-.8-1.5 2.5 1 2.4-.8-.7 1.5 2.5.9zM21.67 18.45l-5.8-2.4 8.4-1.3-2.6 3.7z"/><ellipse class="cls-2" cx="13.67" cy="12.95" rx="4.5" ry="1.7"/><path d="M29.37 10.75l5 1.9-5 2v-3.9z"/><path class="cls-3" d="M23.97 12.95l5.4-2.2v3.9l-.5.2-4.9-1.9z"/></svg> <svg id="svg4300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><style>.cls-1,.cls-2{fill:#fff}.cls-1{opacity:.25;isolation:isolate}.cls-3{fill:#333}</style></defs><title>Artboard 1 copy 20</title><path d="M37.57 23.65c-1.9-.7-11.8-4.6-13.7-5.3s-2.7-.7-4.9.1-12.8 4.9-14.6 5.7c-.9.4-1.4.7-1.4 1.1H3v3.6c0 .4.5.7 1.5 1.2 1.9.9 12.5 5.2 14.2 6s2.9.8 5-.3 12.1-5.2 14-6.2c1-.5 1.4-.9 1.4-1.3v-3.6c-.1-.4-.53-.65-1.53-1z"/><path class="cls-1" d="M37.57 25.85c-1.9 1-11.9 5.1-14 6.2s-3.3 1.1-5 .3-12.3-5.1-14.2-6-1.9-1.5-.1-2.3 12.4-4.9 14.6-5.7 3-.8 4.9-.1 11.8 4.6 13.7 5.3 2 1.3.1 2.3z"/><path d="M37.57 17.75c-1.9-.7-11.8-4.6-13.7-5.3s-2.7-.7-4.9.1-12.8 4.9-14.6 5.7c-.9.4-1.4.7-1.4 1.1H3V23c0 .4.5.7 1.5 1.2 1.9.9 12.5 5.2 14.2 6s2.9.8 5-.3 12.1-5.2 14-6.2c1-.5 1.4-.9 1.4-1.3v-3.6c-.1-.35-.53-.75-1.53-1.05z"/><path class="cls-1" d="M37.57 20c-1.9 1-11.9 5.1-14 6.2s-3.3 1.1-5 .3-12.3-5.1-14.2-6-1.9-1.5-.1-2.3 12.4-4.9 14.6-5.7 3-.8 4.9-.1 11.8 4.6 13.7 5.3 2 1.3.1 2.3z"/><path d="M37.57 11.55c-1.9-.7-11.8-4.6-13.7-5.3s-2.7-.7-4.9.1-12.8 4.9-14.6 5.7c-.9.4-1.4.7-1.4 1.1H3v3.6c0 .4.5.7 1.5 1.2 1.9.9 12.5 5.2 14.2 6s2.9.8 5-.3 12.1-5.2 14-6.2c1-.5 1.4-.9 1.4-1.3v-3.6c-.1-.3-.53-.7-1.53-1z"/><path class="cls-1" d="M37.57 13.75c-1.9 1-11.9 5.1-14 6.2s-3.3 1.1-5 .3-12.3-5.1-14.2-6-1.9-1.5-.1-2.3 12.4-4.9 14.6-5.7 3-.8 4.9-.1 11.8 4.6 13.7 5.3 2 1.3.1 2.3z"/><path class="cls-2" d="M25.77 10.25l-3.2.4-.7 1.6-1.1-1.8-3.6-.4 2.7-.9-.8-1.5 2.5 1 2.4-.8-.7 1.5 2.5.9zm-4.1 8.2l-5.8-2.4 8.4-1.3-2.6 3.7z"/><ellipse class="cls-2" cx="13.67" cy="12.95" rx="4.5" ry="1.7"/><path d="M29.37 10.75l5 1.9-5 2v-3.9z"/><path class="cls-3" d="M23.97 12.95l5.4-2.2v3.9l-.5.2-4.9-1.9z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

2
packages/my-joy-beta/src/assets/smart.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 43</title><path d="M19.11 22.13l-1.62 1.28a37.59 37.59 0 0 1-7.34 4.51.48.48 0 0 1-.71-.18 37.78 37.78 0 0 1-6.27-14.13A5.29 5.29 0 0 1 3 12.37a1 1 0 0 1 .26-.65C4 11 4.76 10.19 5.57 9.51c1.52-1.3 3.09-2.51 4.64-3.8.07-.06.14-.1.28-.2.07.51.12 1 .18 1.43a20.7 20.7 0 0 0 2.87 7.93 39.56 39.56 0 0 0 5.22 6.86zM22.9 19.26a40.15 40.15 0 0 1 9.1-5.84c.3-.14.43 0 .59.19A35.64 35.64 0 0 1 37.81 24c.44 1.35.73 2.75 1.1 4.12a1.87 1.87 0 0 1-.63 2.08c-1.9 1.61-3.78 3.23-5.68 4.85-.32.27-.66.51-1.08.82-.06-.53-.12-1-.17-1.45a20.15 20.15 0 0 0-2.6-7.42 38.72 38.72 0 0 0-5.53-7.39zM22.42 22.58c.93 1.25 1.84 2.44 2.7 3.66a32.47 32.47 0 0 1 3.05 5.31.51.51 0 0 1-.2.74 36.18 36.18 0 0 1-10.91 5.38c-1.39.43-2.84.7-4.27 1a1 1 0 0 1-.78-.2c-.88-.86-1.75-1.72-2.54-2.65C8.3 34.45 7.19 33 6.05 31.64q-.13-.18-.27-.39c1-.16 2-.27 3-.48a22.65 22.65 0 0 0 8.5-4c1.68-1.22 3.23-2.6 4.84-3.91zM19.62 18.78c-.7-.91-1.39-1.78-2-2.67a35.8 35.8 0 0 1-3.69-6.18.61.61 0 0 1 .2-.93 37.82 37.82 0 0 1 14.56-6.25 1.75 1.75 0 0 1 1.78.52A77.82 77.82 0 0 1 36.16 10a.78.78 0 0 1 .06.16c-.68.08-1.34.15-2 .26a21.55 21.55 0 0 0-7.71 3 40.5 40.5 0 0 0-6.46 5c-.12.1-.25.2-.43.36zM27.07 35.7l2.08-1.41a5.22 5.22 0 0 1 .27 2.09c0 .06-.26.18-.36.15-.67-.21-1.33-.44-2-.67zM5.89 26.72L7.39 29c-.8.06-1.46.12-2.12.15-.07 0-.21-.18-.2-.25a6.43 6.43 0 0 1 .82-2.18zM15 5.67l-2.14 1.41A5.47 5.47 0 0 1 12.6 5c0-.06.23-.17.32-.14.68.21 1.36.44 2 .67zM36.14 14.65l-1.45-2.12a5.14 5.14 0 0 1 2.1-.27c.06 0 .17.14.16.2a6.64 6.64 0 0 1-.81 2.19z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><title>Artboard 1 copy 43</title><path d="M19.11 22.13l-1.62 1.28a37.59 37.59 0 0 1-7.34 4.51.48.48 0 0 1-.71-.18 37.78 37.78 0 0 1-6.27-14.13A5.29 5.29 0 0 1 3 12.37a1 1 0 0 1 .26-.65C4 11 4.76 10.19 5.57 9.51c1.52-1.3 3.09-2.51 4.64-3.8.07-.06.14-.1.28-.2.07.51.12 1 .18 1.43a20.7 20.7 0 0 0 2.87 7.93 39.56 39.56 0 0 0 5.22 6.86zm3.79-2.87a40.15 40.15 0 0 1 9.1-5.84c.3-.14.43 0 .59.19A35.64 35.64 0 0 1 37.81 24c.44 1.35.73 2.75 1.1 4.12a1.87 1.87 0 0 1-.63 2.08c-1.9 1.61-3.78 3.23-5.68 4.85-.32.27-.66.51-1.08.82-.06-.53-.12-1-.17-1.45a20.15 20.15 0 0 0-2.6-7.42 38.72 38.72 0 0 0-5.53-7.39zm-.48 3.32c.93 1.25 1.84 2.44 2.7 3.66a32.47 32.47 0 0 1 3.05 5.31.51.51 0 0 1-.2.74 36.18 36.18 0 0 1-10.91 5.38c-1.39.43-2.84.7-4.27 1a1 1 0 0 1-.78-.2c-.88-.86-1.75-1.72-2.54-2.65C8.3 34.45 7.19 33 6.05 31.64q-.13-.18-.27-.39c1-.16 2-.27 3-.48a22.65 22.65 0 0 0 8.5-4c1.68-1.22 3.23-2.6 4.84-3.91zm-2.8-3.8c-.7-.91-1.39-1.78-2-2.67a35.8 35.8 0 0 1-3.69-6.18.61.61 0 0 1 .2-.93 37.82 37.82 0 0 1 14.56-6.25 1.75 1.75 0 0 1 1.78.52A77.82 77.82 0 0 1 36.16 10a.78.78 0 0 1 .06.16c-.68.08-1.34.15-2 .26a21.55 21.55 0 0 0-7.71 3 40.5 40.5 0 0 0-6.46 5c-.12.1-.25.2-.43.36zm7.45 16.92l2.08-1.41a5.22 5.22 0 0 1 .27 2.09c0 .06-.26.18-.36.15-.67-.21-1.33-.44-2-.67zM5.89 26.72L7.39 29c-.8.06-1.46.12-2.12.15-.07 0-.21-.18-.2-.25a6.43 6.43 0 0 1 .82-2.18zM15 5.67l-2.14 1.41A5.47 5.47 0 0 1 12.6 5c0-.06.23-.17.32-.14.68.21 1.36.44 2 .67zm21.14 8.98l-1.45-2.12a5.14 5.14 0 0 1 2.1-.27c.06 0 .17.14.16.2a6.64 6.64 0 0 1-.81 2.19z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

798
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

87
packages/my-joy-beta/src/components/create-instance/package.js
View File

@ -1,14 +1,15 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import styled from 'styled-components'; import styled from 'styled-components';
import { Margin } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import Flex from 'styled-flex-component'; import Flex from 'styled-flex-component';
import pretty from 'prettysize'; import bytes from 'bytes';
import { import {
H3, H3,
H4, H4,
Card,
FormGroup, FormGroup,
Button, Button,
TableTh, TableTh,
@ -26,6 +27,8 @@ import {
MemoryIcon MemoryIcon
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import NoPackagesImage from '../../assets/no-packages.svg';
const GroupIcons = { const GroupIcons = {
MEMORY: <MemoryIcon fill="#32ABCF" />, MEMORY: <MemoryIcon fill="#32ABCF" />,
STORAGE: <StorageIcon fill="#A88A83" />, STORAGE: <StorageIcon fill="#A88A83" />,
@ -43,7 +46,7 @@ const VerticalDivider = styled.div`
box-sizing: border-box; box-sizing: border-box;
`; `;
const Badge = styled.div` const SuperScript = styled.div`
background: ${props => props.theme.primary}; background: ${props => props.theme.primary};
border-radius: ${remcalc(3)}; border-radius: ${remcalc(3)};
font-weight: 600; font-weight: 600;
@ -54,12 +57,16 @@ const Badge = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: ${remcalc(3)}; padding: ${remcalc(3)};
position: relative; position: absolute;
top: ${remcalc(-8)}; margin-top: ${remcalc(-8)};
margin-left: ${remcalc(6)}; margin-left: ${remcalc(6)};
`; `;
export const Filters = () => ( const NoPackagesTitle = styled(H3)`
color: ${props => props.theme.greyDark};
`;
export const Filters = ({ resetFilters }) => (
<Margin top={4} bottom={3}> <Margin top={4} bottom={3}>
<H4>Filters</H4> <H4>Filters</H4>
<Flex alignCenter justifyBetween> <Flex alignCenter justifyBetween>
@ -69,7 +76,7 @@ export const Filters = () => (
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.COMPUTE} {GroupIcons.COMPUTE}
<Margin right={1} left={1}> <Margin right={1} left={1}>
Compute optimized Compute Optimized
</Margin> </Margin>
</Flex> </Flex>
</Label> </Label>
@ -81,7 +88,7 @@ export const Filters = () => (
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.MEMORY} {GroupIcons.MEMORY}
<Margin left={1} right={2}> <Margin left={1} right={2}>
Memory optimized Memory Optimized
</Margin> </Margin>
</Flex> </Flex>
</Label> </Label>
@ -105,7 +112,7 @@ export const Filters = () => (
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.STORAGE} {GroupIcons.STORAGE}
<Margin left={1} right={2}> <Margin left={1} right={2}>
Storage optimized Storage Optimized
</Margin> </Margin>
</Flex> </Flex>
</Label> </Label>
@ -117,7 +124,27 @@ export const Filters = () => (
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
</Flex> </Flex>
<Margin top={2} bottom={1}>
<Button secondary onClick={resetFilters}>
Reset Filters
</Button>
</Margin> </Margin>
</Margin>
);
export const NoPackages = () => (
<Card>
<Padding all={6}>
<Flex alignCenter justifyCenter column>
<Margin bottom={2}>
<img src={NoPackagesImage} alt="No packages were found" />
</Margin>
<NoPackagesTitle>
Sorry, but we weren’t able to find any packages with that filter
</NoPackagesTitle>
</Flex>
</Padding>
</Card>
); );
export const Package = ({ export const Package = ({
@ -133,7 +160,7 @@ export const Package = ({
hasVms hasVms
}) => ( }) => (
<TableTr> <TableTr>
<TableTd selected={selected}> <TableTd right selected={selected}>
<FormGroup name="package" value={id} type="radio" field={Field} fluid> <FormGroup name="package" value={id} type="radio" field={Field} fluid>
<Radio noMargin> <Radio noMargin>
<Flex alignCenter> <Flex alignCenter>
@ -145,13 +172,21 @@ export const Package = ({
</Radio> </Radio>
</FormGroup> </FormGroup>
</TableTd> </TableTd>
<TableTd selected={selected}>{pretty(memory)}</TableTd> <TableTd right selected={selected}>
<TableTd selected={selected}> {bytes(memory, { decimalPlaces: 0 })}
{pretty(disk)} </TableTd>
{ssd && <Badge>SSD</Badge>} <TableTd right selected={selected}>
{bytes(disk, { decimalPlaces: 0 })}
{ssd && <SuperScript>SSD</SuperScript>}
</TableTd>
{hasVms && (
<TableTd right selected={selected}>
{vcpus}
</TableTd>
)}
<TableTd right selected={selected}>
{price}
</TableTd> </TableTd>
{hasVms && <TableTd selected={selected}>{vcpus}</TableTd>}
<TableTd selected={selected}>{price}</TableTd>
</TableTr> </TableTr>
); );
@ -162,7 +197,8 @@ export const Packages = ({
sortOrder = 'desc', sortOrder = 'desc',
onSortBy = () => null, onSortBy = () => null,
hasVms, hasVms,
children children,
packages
}) => ( }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Table> <Table>
@ -181,10 +217,10 @@ export const Packages = ({
</TableTh> </TableTh>
<TableTh <TableTh
xs="100" xs="100"
onClick={() => onSortBy('ram', sortOrder)} onClick={() => onSortBy('memory', sortOrder)}
sortOrder={sortOrder} sortOrder={sortOrder}
showSort={sortBy === 'ram'} showSort={sortBy === 'memory'}
left right
middle middle
actionable actionable
> >
@ -195,7 +231,7 @@ export const Packages = ({
onClick={() => onSortBy('disk', sortOrder)} onClick={() => onSortBy('disk', sortOrder)}
sortOrder={sortOrder} sortOrder={sortOrder}
showSort={sortBy === 'disk'} showSort={sortBy === 'disk'}
left right
middle middle
actionable actionable
> >
@ -207,7 +243,7 @@ export const Packages = ({
onClick={() => onSortBy('vcpu', sortOrder)} onClick={() => onSortBy('vcpu', sortOrder)}
sortOrder={sortOrder} sortOrder={sortOrder}
showSort={sortBy === 'vcpu'} showSort={sortBy === 'vcpu'}
left right
middle middle
actionable actionable
> >
@ -219,7 +255,7 @@ export const Packages = ({
onClick={() => onSortBy('price', sortOrder)} onClick={() => onSortBy('price', sortOrder)}
sortOrder={sortOrder} sortOrder={sortOrder}
showSort={sortBy === 'price'} showSort={sortBy === 'price'}
left right
middle middle
actionable actionable
> >
@ -229,6 +265,7 @@ export const Packages = ({
</TableThead> </TableThead>
<TableTbody>{children}</TableTbody> <TableTbody>{children}</TableTbody>
</Table> </Table>
{!packages ? <NoPackages /> : null}
<Margin top={4}> <Margin top={4}>
<Button type="submit" disabled={pristine}> <Button type="submit" disabled={pristine}>
Next Next
@ -253,7 +290,7 @@ export const Overview = ({
<Flex alignCenter> <Flex alignCenter>
<span>{price} $</span> <span>{price} $</span>
<VerticalDivider /> <VerticalDivider />
<span>{pretty(memory)}</span> <span>{bytes(memory, { decimalPlaces: 0 })}</span>
{hasVms && ( {hasVms && (
<Fragment> <Fragment>
<VerticalDivider /> <VerticalDivider />
@ -261,7 +298,7 @@ export const Overview = ({
</Fragment> </Fragment>
)} )}
<VerticalDivider /> <VerticalDivider />
<span>{pretty(disk)} disk</span> <span>{bytes(disk, { decimalPlaces: 0 })} disk</span>
<VerticalDivider /> <VerticalDivider />
{ssd && <span>SSD</span>} {ssd && <span>SSD</span>}
</Flex> </Flex>

32
packages/my-joy-beta/src/containers/create-instance/package.js
View File

@ -8,13 +8,15 @@ import { set } from 'react-redux-values';
import sortBy from 'lodash.sortby'; import sortBy from 'lodash.sortby';
import find from 'lodash.find'; import find from 'lodash.find';
import constantCase from 'constant-case'; import constantCase from 'constant-case';
import { reset } from 'redux-form';
import { PackageIcon, StatusLoader } from 'joyent-ui-toolkit'; import { PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
import { import {
Filters, Filters,
Packages, Packages,
Package, Package,
Overview Overview,
NoPackages
} from '@components/create-instance/package'; } from '@components/create-instance/package';
import Title from '@components/create-instance/title'; import Title from '@components/create-instance/title';
import Description from '@components/create-instance/description'; import Description from '@components/create-instance/description';
@ -23,6 +25,7 @@ import priceData from '../../data/prices.json';
import getPackages from '../../graphql/get-packages.gql'; import getPackages from '../../graphql/get-packages.gql';
const FORM_NAME = 'create-instance-package'; const FORM_NAME = 'create-instance-package';
const FILTERS = 'create-instance-package-filters';
const PackageContainer = ({ const PackageContainer = ({
expanded, expanded,
@ -34,7 +37,8 @@ const PackageContainer = ({
selected = {}, selected = {},
sortOrder, sortOrder,
handleSortBy, handleSortBy,
sortBy sortBy,
resetFilters
}) => ( }) => (
<Fragment> <Fragment>
<Title icon={<PackageIcon />}>Package</Title> <Title icon={<PackageIcon />}>Package</Title>
@ -58,7 +62,7 @@ const PackageContainer = ({
destroyOnUnmount={false} destroyOnUnmount={false}
forceUnregisterOnUnmount={true} forceUnregisterOnUnmount={true}
> >
{props => <Filters {...props} />} {props => <Filters {...props} resetFilters={resetFilters} />}
</ReduxForm> </ReduxForm>
) : null} ) : null}
{loading && expanded ? ( {loading && expanded ? (
@ -73,12 +77,14 @@ const PackageContainer = ({
{props => ( {props => (
<Fragment> <Fragment>
{expanded ? ( {expanded ? (
<Fragment>
<Packages <Packages
{...props} {...props}
hasVms={hasVms} hasVms={hasVms}
sortBy={sortBy} sortBy={sortBy}
sortOrder={sortOrder} sortOrder={sortOrder}
onSortBy={handleSortBy} onSortBy={handleSortBy}
packages={packages.length}
> >
{packages.map(({ id, ...pkg }) => ( {packages.map(({ id, ...pkg }) => (
<Package <Package
@ -90,13 +96,10 @@ const PackageContainer = ({
/> />
))} ))}
</Packages> </Packages>
</Fragment>
) : null} ) : null}
{!expanded && selected.id ? ( {!expanded && selected.id ? (
<Overview <Overview {...selected} hasVms={hasVms} onCancel={handleCancel} />
{...selected}
hasVms={hasVms}
onCancel={handleCancel}
/>
) : null} ) : null}
</Fragment> </Fragment>
)} )}
@ -134,25 +137,25 @@ export default compose(
const _sortBy = get(values, 'packages-list-sort-by', 'price'); const _sortBy = get(values, 'packages-list-sort-by', 'price');
const _sortOrder = get(values, 'packages-list-sort-order', 'asc'); const _sortOrder = get(values, 'packages-list-sort-order', 'asc');
const ssdOnly = get(form, `${FORM_NAME}-filters.values.ssd`, false); const ssdOnly = get(form, `${FILTERS}.values.ssd`, false);
const computeOptimized = get( const computeOptimized = get(
form, form,
`${FORM_NAME}-filters.values.compute-optimized`, `${FILTERS}.values.compute-optimized`,
false false
); );
const generalPurpose = get( const generalPurpose = get(
form, form,
`${FORM_NAME}-filters.values.general-purpose`, `${FILTERS}.values.general-purpose`,
false false
); );
const storageOptimized = get( const storageOptimized = get(
form, form,
`${FORM_NAME}-filters.values.storage-optimized`, `${FILTERS}.values.storage-optimized`,
false false
); );
const memoryOptimized = get( const memoryOptimized = get(
form, form,
`${FORM_NAME}-filters.values.memory-optimized`, `${FILTERS}.values.memory-optimized`,
false false
); );
const vmSelected = get(form, 'create-instance-image.values.vms', false); const vmSelected = get(form, 'create-instance-image.values.vms', false);
@ -191,6 +194,9 @@ export default compose(
(dispatch, { history }) => ({ (dispatch, { history }) => ({
handleSubmit: () => history.push('/instances/~create/tags'), handleSubmit: () => history.push('/instances/~create/tags'),
handleCancel: () => history.push('/instances/~create/package'), handleCancel: () => history.push('/instances/~create/package'),
resetFilters: () => {
dispatch(reset(`${FILTERS}-filters`));
},
handleSortBy: (newSortBy, sortOrder) => { handleSortBy: (newSortBy, sortOrder) => {
dispatch([ dispatch([
set({ set({

1
packages/ui-toolkit/src/base/global.js
View File

@ -26,6 +26,7 @@ export default ({ theme }) => css`
margin: 0; margin: 0;
padding: 0; padding: 0;
background: ${theme.background}; background: ${theme.background};
color: ${theme.text};
} }
html, html,

5
packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
View File

@ -164,7 +164,10 @@ exports[`Form Checkbox 1`] = `
/> />
</div> </div>
<div <div
checked={false}
className="c4" className="c4"
disabled={false}
id=""
> >
<label <label
className="c5" className="c5"
@ -539,6 +542,8 @@ exports[`Form Radio 1`] = `
</div> </div>
<div <div
className="c4" className="c4"
disabled={false}
id=""
> >
<label <label
className="c5" className="c5"

2
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -181,7 +181,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
const el = OuterContainer ? ( const el = OuterContainer ? (
<OuterContainer {...rest}> <OuterContainer {...rest}>
{toggle} {toggle}
{children ? <Container>{children}</Container> : null} {children ? <Container {...rest}>{children}</Container> : null}
</OuterContainer> </OuterContainer>
) : ( ) : (
toggle toggle

1
packages/ui-toolkit/src/table/index.js
View File

@ -210,6 +210,7 @@ const BaseTd = styled.td`
${is('selected')` ${is('selected')`
border-color: ${props => props.theme.primary}; border-color: ${props => props.theme.primary};
background-color: rgba(59, 70, 204, 0.05); background-color: rgba(59, 70, 204, 0.05);
border-bottom-width: ${remcalc(1)};
`}; `};
${ColumnBorder}; ${ColumnBorder};

6
yarn.lock
View File

@ -1953,7 +1953,7 @@ byline@^5.0.0:
version "5.0.0" version "5.0.0"
resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1" resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
bytes@3.0.0: bytes@3.0.0, bytes@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@ -8088,10 +8088,6 @@ pretty-format@^20.0.3:
ansi-regex "^2.1.1" ansi-regex "^2.1.1"
ansi-styles "^3.0.0" ansi-styles "^3.0.0"
prettysize@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/prettysize/-/prettysize-1.1.0.tgz#c6c52f87161ff172ea435f375f99831dd9a97bb0"
private@^0.1.6, private@^0.1.7, private@~0.1.5: private@^0.1.6, private@^0.1.7, private@~0.1.5:
version "0.1.8" version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"