@platformatic/ui-components 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/assets/index-DFooB5Gh.js +40 -0
  2. package/dist/assets/index-UjO_DhXJ.css +1 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Button.module.css +6 -0
  6. package/src/components/ButtonOnlyIcon.module.css +6 -0
  7. package/src/components/Common.module.css +36 -0
  8. package/src/components/CopyAndPaste.jsx +43 -7
  9. package/src/components/constants.js +4 -3
  10. package/src/components/icons/AllAppsIcon.jsx +31 -21
  11. package/src/components/icons/AppConfigurationIcon.jsx +27 -29
  12. package/src/components/icons/AppDetailsIcon.jsx +13 -10
  13. package/src/components/icons/AppEditIcon.jsx +15 -15
  14. package/src/components/icons/AppIcon.jsx +7 -4
  15. package/src/components/icons/AppListIcon.jsx +60 -62
  16. package/src/components/icons/AppMissingIcon.jsx +97 -0
  17. package/src/components/icons/AppSettingsIcon.jsx +13 -9
  18. package/src/components/icons/{StoppedAppIcon.jsx → AppStoppedIcon.jsx} +15 -15
  19. package/src/components/icons/CreateAppIcon.jsx +13 -7
  20. package/src/components/icons/CreatingAppIcon.jsx +104 -0
  21. package/src/components/icons/Icons.module.css +21 -0
  22. package/src/components/icons/ImportAppIcon.jsx +9 -10
  23. package/src/components/icons/PodDetailsIcon.jsx +12 -21
  24. package/src/components/icons/PodLogsIcon.jsx +26 -27
  25. package/src/components/icons/PodPerformanceIcon.jsx +20 -18
  26. package/src/components/icons/RemoveAppIcon.jsx +101 -0
  27. package/src/components/icons/index.js +9 -3
  28. package/tailwind.config.cjs +3 -1
  29. package/dist/assets/index-BiRNzolW.css +0 -1
  30. package/dist/assets/index-CLtNOpBw.js +0 -40
package/src/components/icons/CreatingAppIcon.jsx ADDED
@@ -0,0 +1,104 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const CreatingAppIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+
21
+ switch (size) {
22
+ case SMALL:
23
+ icon = (
24
+ <svg
25
+ width={16}
26
+ height={16}
27
+ viewBox='0 0 16 16'
28
+ fill='none'
29
+ xmlns='http://www.w3.org/2000/svg'
30
+ className={className}
31
+ >
32
+ <path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V12.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M4.13695 5.79253L2.5 4.85711L8 2L13.5 4.85711L12 5.54285' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M5.69651 6.30385C6.18908 5.51796 7.03136 5 7.98768 5C9.50614 5 10.7371 6.30584 10.7371 7.91667C10.7371 8.20959 10.6964 8.49243 10.6206 8.75916M5.2763 7.43056C5.25129 7.58864 5.23828 7.75104 5.23828 7.91667C5.23828 9.5275 6.46923 10.8333 7.98768 10.8333C8.80886 10.8333 9.54594 10.4514 10.0497 9.84591' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+ <path d='M9.88892 7.84375L10.6071 8.79053L11.4996 8.02861' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
+ <path d='M6.11621 8.12177L5.25281 7.32303L4.49988 8.23895' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37
+ </svg>
38
+ )
39
+ break
40
+ case MEDIUM:
41
+ icon = (
42
+ <svg
43
+ width={24}
44
+ height={24}
45
+ viewBox='0 0 24 24'
46
+ fill='none'
47
+ xmlns='http://www.w3.org/2000/svg'
48
+ className={className}
49
+ >
50
+ <path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <path d='M6.20542 8.6888L3.75 7.28567L12 3L20.25 7.28567L18 8.31427' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
+ <path d='M8.54477 9.45577C9.28362 8.27693 10.547 7.5 11.9815 7.5C14.2592 7.5 16.1056 9.45875 16.1056 11.875C16.1056 12.3144 16.0446 12.7386 15.931 13.1387M7.91444 11.1458C7.87694 11.383 7.85742 11.6266 7.85742 11.875C7.85742 14.2912 9.70385 16.25 11.9815 16.25C13.2133 16.25 14.3189 15.6771 15.0746 14.7689' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
+ <path d='M14.8335 11.7656L15.9108 13.1858L17.2495 12.0429' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
54
+ <path d='M9.17432 12.1826L7.87922 10.9845L6.74982 12.3584' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
55
+
56
+ </svg>
57
+ )
58
+ break
59
+ case LARGE:
60
+ icon = (
61
+ <svg
62
+ width={40}
63
+ height={40}
64
+ viewBox='0 0 40 40'
65
+ fill='none'
66
+ xmlns='http://www.w3.org/2000/svg'
67
+ className={className}
68
+ >
69
+ <path d='M6.25 12.4999V27.1805L20 35M20 35L33.75 27.1805V12.4999M20 35V31.2499' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70
+ <path d='M10.3424 14.4813L6.25 12.1428L20 5L33.75 12.1428L30 13.8571' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
71
+ <path d='M14.2413 15.7596C15.4727 13.7949 17.5784 12.5 19.9692 12.5C23.7653 12.5 26.8427 15.7646 26.8427 19.7917C26.8427 20.524 26.7409 21.2311 26.5516 21.8979M13.1907 18.5764C13.1282 18.9716 13.0957 19.3776 13.0957 19.7917C13.0957 23.8187 16.1731 27.0833 19.9692 27.0833C22.0221 27.0833 23.8649 26.1286 25.1243 24.6148' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
72
+ <path d='M24.7224 19.6094L26.518 21.9763L28.7492 20.0715' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
73
+ <path d='M15.2903 20.3044L13.1318 18.3075L11.2495 20.5974' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
74
+
75
+ </svg>
76
+ )
77
+ break
78
+
79
+ default:
80
+ break
81
+ }
82
+ return icon
83
+ }
84
+
85
+ CreatingAppIcon.propTypes = {
86
+ /**
87
+ * color of text, icon and borders
88
+ */
89
+ color: PropTypes.oneOf(COLORS_ICON),
90
+ /**
91
+ * Size
92
+ */
93
+ size: PropTypes.oneOf(SIZES),
94
+ /**
95
+ * disabled
96
+ */
97
+ disabled: PropTypes.bool,
98
+ /**
99
+ * inactive
100
+ */
101
+ inactive: PropTypes.bool
102
+ }
103
+
104
+ export default CreatingAppIcon
package/src/components/icons/Icons.module.css CHANGED
@@ -110,6 +110,23 @@
110
110
  @apply !stroke-white;
111
111
  }
112
112
 
113
+ .fluorescent-cyan > circle,
114
+ .fluorescent-cyan > ellipse,
115
+ .fluorescent-cyan > rect,
116
+ .fluorescent-cyan > line,
117
+ .fluorescent-cyan > path {
118
+ @apply stroke-fluorescent-cyan;
119
+ }
120
+
121
+ .important-fluorescent-cyan > circle,
122
+ .important-fluorescent-cyan > ellipse,
123
+ .important-fluorescent-cyan > rect,
124
+ .important-fluorescent-cyan > line,
125
+ .important-fluorescent-cyan > path {
126
+ @apply !stroke-fluorescent-cyan;
127
+ }
128
+
129
+
113
130
  .filled-rich-black {
114
131
  @apply fill-rich-black;
115
132
  }
@@ -131,6 +148,10 @@
131
148
  .filled-tertiary-blue {
132
149
  @apply fill-tertiary-blue;
133
150
  }
151
+ .filled-fluorescent-cyan {
152
+ @apply fill-fluorescent-cyan;
153
+ }
154
+
134
155
 
135
156
  .fill-circle-green > circle {
136
157
  @apply fill-white;
package/src/components/icons/ImportAppIcon.jsx CHANGED
@@ -29,9 +29,9 @@ const ImportAppIcon = ({
29
29
  xmlns='http://www.w3.org/2000/svg'
30
30
  className={className}
31
31
  >
32
- <path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
33
- <path d='M7 10V10C6.44772 10 6 9.55228 6 9L6 5M6 5L8 6.5M6 5L4 6.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
- <path d='M5.33333 12L2 12L2 2L12 2L12 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32
+ <path d='M2 5V10.8722L7.5 14M7.5 14V8.00001M7.5 14L9.5 13M13 8.5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M7.5 7.71423L2 4.85711L7.5 2L13 4.85711L7.5 7.71423Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M10.5 9L12.5 10V13.5M12.5 13.5L11 12M12.5 13.5L14 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
35
 
36
36
  </svg>
37
37
  )
@@ -46,10 +46,9 @@ const ImportAppIcon = ({
46
46
  xmlns='http://www.w3.org/2000/svg'
47
47
  className={className}
48
48
  >
49
- <path d='M15.75 10.5L20.2966 13.125V18.375L15.75 21L11.2034 18.375V13.125L15.75 10.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50
- <path d='M10.5 15L10 15C9.44772 15 9 14.5523 9 14L9 7.5M9 7.5L12 9.75M9 7.5L6 9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
- <path d='M8 18L3 18L3 3L18 3L18 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
-
49
+ <path d='M3 7.5V16.3083L11.25 21M11.25 21V12M11.25 21L14.25 19.5M19.5 12.75V7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ <path d='M11.25 11.5713L3 7.28567L11.25 3L19.5 7.28567L11.25 11.5713Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <path d='M15.75 13.5L18.75 15V20.25M18.75 20.25L16.5 18M18.75 20.25L21 18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
52
  </svg>
54
53
  )
55
54
  break
@@ -63,9 +62,9 @@ const ImportAppIcon = ({
63
62
  xmlns='http://www.w3.org/2000/svg'
64
63
  className={className}
65
64
  >
66
- <path d='M26.25 17.5L33.8277 21.875V30.625L26.25 35L18.6723 30.625V21.875L26.25 17.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
67
- <path d='M17.5 25L16 25C15.4477 25 15 24.5523 15 24L15 12.5M15 12.5L20 16.25M15 12.5L10 16.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
- <path d='M13.3333 30L5 30L5 5L30 5L30 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
65
+ <path d='M5 12.5V27.1806L18.75 35M18.75 35V20M18.75 35L23.75 32.5M32.5 21.25V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
66
+ <path d='M18.75 19.2856L5 12.1428L18.75 5L32.5 12.1428L18.75 19.2856Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
67
+ <path d='M26.25 22.5L31.25 25V33.75M31.25 33.75L27.5 30M31.25 33.75L35 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69
68
  </svg>
70
69
  )
71
70
  break
package/src/components/icons/PodDetailsIcon.jsx CHANGED
@@ -29,13 +29,10 @@ const PodDetailsIcon = ({
29
29
  xmlns='http://www.w3.org/2000/svg'
30
30
  className={className}
31
31
  >
32
- <path d='M8.81982 5.6875L7.84555 5.125L5.89699 4L1.99987 6.25V10.75L5.89699 13L6.87127 12.4375' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
- <path d='M6 7H12' stroke='none' strokeLinecap='round' />
34
- <path d='M7 9H13' stroke='none' strokeLinecap='round' />
35
- <path d='M8 11H14' stroke='none' strokeLinecap='round' />
36
- <circle cx='4.39697' cy='7' r='0.5' fill='none' />
37
- <circle cx='5.39697' cy='9' r='0.5' fill='none' />
38
- <circle cx='6.39697' cy='11' r='0.5' fill='none' />
32
+ <path d='M8 2L13.1962 5V11L8 14L2.80385 11V5L8 2Z' stroke='none' strokeLinejoin='round' />
33
+ <circle cx='7.5' cy='7.5' r='2.5' stroke='none' />
34
+ <path d='M9.5 9.5L10.6172 10.6172' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+
39
36
  </svg>
40
37
  )
41
38
  break
@@ -49,13 +46,10 @@ const PodDetailsIcon = ({
49
46
  xmlns='http://www.w3.org/2000/svg'
50
47
  className={className}
51
48
  >
52
- <path d='M13.23 8.53125L11.7686 7.6875L8.84573 6L3.00006 9.375V16.125L8.84573 19.5L10.3071 18.6562' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
- <path d='M9 10.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
54
- <path d='M10.5 13.5H19.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
55
- <path d='M12 16.5H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
56
- <circle cx='6.5957' cy='10.5' r='0.75' fill='none' />
57
- <circle cx='8.0957' cy='13.5' r='0.75' fill='none' />
58
- <circle cx='9.5957' cy='16.5' r='0.75' fill='none' />
49
+ <path d='M12 3L19.7942 7.5V16.5L12 21L4.20577 16.5V7.5L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50
+ <circle cx='11.25' cy='11.25' r='3.75' stroke='none' strokeWidth={1.5} />
51
+ <path d='M14.25 14.25L15.9258 15.9258' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
+
59
53
  </svg>
60
54
  )
61
55
  break
@@ -69,13 +63,10 @@ const PodDetailsIcon = ({
69
63
  xmlns='http://www.w3.org/2000/svg'
70
64
  className={className}
71
65
  >
72
- <path d='M22.0498 14.2188L19.6141 12.8125L14.7427 10L4.99993 15.625V26.875L14.7427 32.5L17.1784 31.0938' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
73
- <path d='M15 17.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' />
74
- <path d='M17.5 22.5H32.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
75
- <path d='M20 27.5H35' stroke='none' strokeWidth={2} strokeLinecap='round' />
76
- <circle cx='10.9927' cy='17.5' r='1.25' fill='none' />
77
- <circle cx='13.4927' cy='22.5' r='1.25' fill='none' />
78
- <circle cx='15.9927' cy='27.5' r='1.25' fill='none' />
66
+ <path d='M20 5L32.9904 12.5V27.5L20 35L7.00962 27.5V12.5L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
67
+ <circle cx='18.75' cy='18.75' r='6.25' stroke='none' strokeWidth={2} />
68
+ <path d='M23.75 23.75L26.543 26.543' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69
+
79
70
  </svg>
80
71
  )
81
72
  break
package/src/components/icons/PodLogsIcon.jsx CHANGED
@@ -17,6 +17,7 @@ const PodLogsIcon = ({
17
17
  className += ` ${styles.iconInactive}`
18
18
  }
19
19
  let icon = <></>
20
+ const filledClassName = styles[`filled-${color}`]
20
21
 
21
22
  switch (size) {
22
23
  case SMALL:
@@ -29,15 +30,15 @@ const PodLogsIcon = ({
29
30
  xmlns='http://www.w3.org/2000/svg'
30
31
  className={className}
31
32
  >
32
- <rect x='7' y='2' width='7' height='7' rx='1' stroke='none' />
33
- <path d='M7 3.75H14' stroke='none' />
34
- <circle cx='7.87516' cy='2.87492' r='0.291667' fill='none' />
35
- <circle cx='8.75016' cy='2.87492' r='0.291667' fill='none' />
36
- <circle cx='9.62516' cy='2.87492' r='0.291667' fill='none' />
37
- <path d='M8.1665 4.91675H11.0832' stroke='none' strokeLinecap='round' />
38
- <path d='M8.75 6.08325H12.8333' stroke='none' strokeLinecap='round' />
39
- <path d='M8.75 7.25H12.8333' stroke='none' strokeLinecap='round' />
40
- <path d='M9.46387 10.4998V11.9998L5.99977 13.9998L2.53566 11.9998V7.99984L5.39225 6.35059' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M8 2L13.1962 5V11L8 14L2.80385 11V5L8 2Z' stroke='none' strokeLinejoin='round' />
34
+ <rect x='5' y='5' width='6' height='6' rx='1' stroke='none' />
35
+ <path d='M5 7H11' stroke='none' />
36
+ <circle cx='6.25' cy='6' r='0.25' fill='none' className={filledClassName} />
37
+ <circle cx='7' cy='6' r='0.25' fill='none' className={filledClassName} />
38
+ <circle cx='7.75' cy='6' r='0.25' fill='none' className={filledClassName} />
39
+ <path d='M6.5 8.25H8.25' stroke='none' strokeLinecap='round' />
40
+ <path d='M6.5 9.5H9.5' stroke='none' strokeLinecap='round' />
41
+
41
42
  </svg>
42
43
  )
43
44
  break
@@ -51,15 +52,14 @@ const PodLogsIcon = ({
51
52
  xmlns='http://www.w3.org/2000/svg'
52
53
  className={className}
53
54
  >
54
- <rect x='10.5' y='3' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
55
- <path d='M10.5 5.625H21' stroke='none' strokeWidth={1.5} />
56
- <circle cx='11.8125' cy='4.3125' r='0.4375' fill='none' />
57
- <circle cx='13.125' cy='4.3125' r='0.4375' fill='none' />
58
- <circle cx='14.4375' cy='4.3125' r='0.4375' fill='none' />
59
- <path d='M12.25 7.375H16.625' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
60
- <path d='M13.125 9.125H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
61
- <path d='M13.125 10.875H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
62
- <path d='M14.1958 15.7498V17.9998L8.99965 20.9998L3.8035 17.9998V11.9998L8.08837 9.52588' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
55
+ <path d='M12 3L19.7942 7.5V16.5L12 21L4.20577 16.5V7.5L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
56
+ <rect x='7.5' y='7.5' width='9' height='9' rx='1' stroke='none' strokeWidth={1.5} />
57
+ <path d='M7.5 10.5H16.5' stroke='none' strokeWidth={1.5} />
58
+ <circle cx='9.375' cy='9' r='0.375' fill='none' className={filledClassName} />
59
+ <circle cx='10.5' cy='9' r='0.375' fill='none' className={filledClassName} />
60
+ <circle cx='11.625' cy='9' r='0.375' fill='none' className={filledClassName} />
61
+ <path d='M9.75 12.375H12.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
62
+ <path d='M9.75 14.25H14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
63
63
  </svg>
64
64
  )
65
65
  break
@@ -73,15 +73,14 @@ const PodLogsIcon = ({
73
73
  xmlns='http://www.w3.org/2000/svg'
74
74
  className={className}
75
75
  >
76
- <rect x='17.5' y='5' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
77
- <path d='M17.5 9.375H35' stroke='none' strokeWidth={2} />
78
- <circle cx='19.6877' cy='7.18742' r='0.729167' fill='none' />
79
- <circle cx='21.8752' cy='7.18742' r='0.729167' fill='none' />
80
- <circle cx='24.0627' cy='7.18742' r='0.729167' fill='none' />
81
- <path d='M20.4165 12.2917H27.7082' stroke='none' strokeWidth={2} strokeLinecap='round' />
82
- <path d='M21.875 15.2083H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
83
- <path d='M21.875 18.125H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
84
- <path d='M23.6597 26.2496V29.9996L14.9994 34.9996L6.33916 29.9996V19.9996L13.4806 15.8765' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
76
+ <path d='M20 5L32.9904 12.5V27.5L20 35L7.00962 27.5V12.5L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
77
+ <rect x='12.5' y='12.5' width='15' height='15' rx='2' stroke='none' strokeWidth={2} />
78
+ <path d='M12.5 17.5H27.5' stroke='none' strokeWidth={2} />
79
+ <circle cx='15.625' cy='15' r='0.625' fill='none' className={filledClassName} />
80
+ <circle cx='17.5' cy='15' r='0.625' fill='none' className={filledClassName} />
81
+ <circle cx='19.375' cy='15' r='0.625' fill='none' className={filledClassName} />
82
+ <path d='M16.25 20.625H20.625' stroke='none' strokeWidth={2} strokeLinecap='round' />
83
+ <path d='M16.25 23.75H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
85
84
  </svg>
86
85
  )
87
86
  break
package/src/components/icons/PodPerformanceIcon.jsx CHANGED
@@ -28,12 +28,13 @@ const PodPerformanceIcon = ({
28
28
  fill='none'
29
29
  xmlns='http://www.w3.org/2000/svg'
30
30
  className={className}
31
- ><path d='M7.06325 14C4.26689 14 2 11.727 2 8.92311C2 6.11921 4.26689 3.84619 7.06325 3.84619C9.46576 3.84619 11.4775 5.52403 11.9965 7.77486' stroke='none' strokeLinecap='round' />
32
- <path d='M7.06286 3.84615V2M5.22168 2H8.90404' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
- <path d='M10.9837 5.02751L11.642 4.38226M10.9985 3.72217L12.2856 5.04235' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
- <path d='M3.33446 5.09739L2.69392 4.43439M2.03271 5.07666L3.35514 3.79212' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
- <path d='M8.67407 6.61512L7.06295 9.38435' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
- <path d='M10.5 9L8.33494 10.25V12.75L10.5 14L12.6651 12.75V10.25L10.5 9Z' stroke='none' strokeLinejoin='round' />
31
+ >
32
+ <path d='M8 2L13.1962 5V11L8 14L2.80385 11V5L8 2Z' stroke='none' strokeLinejoin='round' />
33
+ <ellipse cx='7.9579' cy='8.32058' rx='2.67225' ry='2.67947' stroke='none' />
34
+ <path d='M7.95781 5.6411V4.66675M6.98608 4.66675H8.92954' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+ <path d='M10.0271 6.26461L10.3745 5.92406M10.0349 5.57568L10.7142 6.27244' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
+ <path d='M5.99001 6.30134L5.65195 5.95143M5.30298 6.29041L6.00092 5.61246' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37
+ <path d='M8.80809 7.10256L7.95778 8.56409' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37
38
  </svg>
38
39
  )
39
40
  break
@@ -46,12 +47,13 @@ const PodPerformanceIcon = ({
46
47
  fill='none'
47
48
  xmlns='http://www.w3.org/2000/svg'
48
49
  className={className}
49
- ><path d='M10.5949 21.0001C6.40034 21.0001 3 17.5905 3 13.3847C3 9.17881 6.40034 5.76929 10.5949 5.76929C14.1986 5.76929 17.2162 8.28604 17.9947 11.6623' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
50
- <path d='M10.5943 5.76923V3M7.83252 3H13.3561' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
- <path d='M16.4754 7.54127L17.4628 6.57339M16.4976 5.58325L18.4281 7.56353' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
- <path d='M5.00145 7.64608L4.04064 6.65159M3.04883 7.61499L5.03246 5.68819' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
- <path d='M13.0114 9.9228L10.5947 14.0767' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
54
- <path d='M15.75 13.5L12.5024 15.375V19.125L15.75 21L18.9976 19.125V15.375L15.75 13.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50
+ >
51
+ <path d='M12 3L19.7942 7.5V16.5L12 21L4.20577 16.5V7.5L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
52
+ <ellipse cx='11.9371' cy='12.4808' rx='4.00838' ry='4.0192' stroke='none' strokeWidth={1.5} />
53
+ <path d='M11.9368 8.46165V7.00012M10.4792 7.00012H13.3944' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
54
+ <path d='M15.0408 9.39692L15.5619 8.88609M15.0525 8.36353L16.0714 9.40866' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
55
+ <path d='M8.98513 9.45208L8.47804 8.92721M7.95459 9.43567L9.0015 8.41875' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
56
+ <path d='M13.2125 10.6539L11.937 12.8462' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
55
57
  </svg>
56
58
  )
57
59
  break
@@ -65,12 +67,12 @@ const PodPerformanceIcon = ({
65
67
  xmlns='http://www.w3.org/2000/svg'
66
68
  className={className}
67
69
  >
68
- <path d='M17.6581 35.0001C10.6672 35.0001 5 29.3176 5 22.3078C5 15.298 10.6672 9.61548 17.6581 9.61548C23.6644 9.61548 28.6936 13.8101 29.9911 19.4372' stroke='none' strokeWidth={2} strokeLinecap='round' />
69
- <path d='M17.6576 9.61538V5M13.0547 5H22.2606' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70
- <path d='M27.4591 12.5688L29.1049 10.9556M27.4961 9.30542L30.7137 12.6059' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
71
- <path d='M8.33591 12.7435L6.73457 11.086M5.08154 12.6917L8.38759 9.48031' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
72
- <path d='M21.6859 16.5379L17.6581 23.461' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
73
- <path d='M26.25 22.5L20.8373 25.625V31.875L26.25 35L31.6627 31.875V25.625L26.25 22.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
70
+ <path d='M20 5L32.9904 12.5V27.5L20 35L7.00962 27.5V12.5L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
71
+ <ellipse cx='19.895' cy='20.8012' rx='6.68063' ry='6.69867' stroke='none' strokeWidth={2} />
72
+ <path d='M19.8947 14.1026V11.6667M17.4653 11.6667H22.324' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
73
+ <path d='M25.0676 15.6615L25.9362 14.8102M25.0872 13.9392L26.7853 15.6811' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
74
+ <path d='M14.9749 15.7534L14.1297 14.8786M13.2573 15.7261L15.0022 14.0312' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
75
+ <path d='M22.0206 17.7563L19.8948 21.4102' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
74
76
  </svg>
75
77
  )
76
78
  break
package/src/components/icons/RemoveAppIcon.jsx ADDED
@@ -0,0 +1,101 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const RemoveAppIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+
21
+ switch (size) {
22
+ case SMALL:
23
+ icon = (
24
+ <svg
25
+ width={16}
26
+ height={16}
27
+ viewBox='0 0 16 16'
28
+ fill='none'
29
+ xmlns='http://www.w3.org/2000/svg'
30
+ className={className}
31
+ >
32
+ <path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M4.5 6L2.5 4.85711L8 2L13.5 4.85711L11.4538 5.79253' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M6.5 7.5H9.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+ <circle cx='8' cy='7.5' r='3.5' stroke='none' />
36
+
37
+ </svg>
38
+ )
39
+ break
40
+ case MEDIUM:
41
+ icon = (
42
+ <svg
43
+ width={24}
44
+ height={24}
45
+ viewBox='0 0 24 24'
46
+ fill='none'
47
+ xmlns='http://www.w3.org/2000/svg'
48
+ className={className}
49
+ >
50
+ <path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <path d='M6.75 9L3.75 7.28567L12 3L20.25 7.28567L17.1807 8.6888' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
+ <path d='M9.75 11.25H14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
+ <circle cx='12' cy='11.25' r='5.25' stroke='none' strokeWidth={1.5} />
54
+ </svg>
55
+ )
56
+ break
57
+ case LARGE:
58
+ icon = (
59
+ <svg
60
+ width={40}
61
+ height={40}
62
+ viewBox='0 0 40 40'
63
+ fill='none'
64
+ xmlns='http://www.w3.org/2000/svg'
65
+ className={className}
66
+ >
67
+ <path d='M6.25 12.5V27.1806L20 35M20 35L33.75 27.1806V12.5M20 35V27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
+ <path d='M11.25 15L6.25 12.1428L20 5L33.75 12.1428L28.6345 14.4813' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69
+ <path d='M16.25 18.75H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70
+ <circle cx='20' cy='18.75' r='8.75' stroke='none' strokeWidth={2} />
71
+
72
+ </svg>
73
+ )
74
+ break
75
+
76
+ default:
77
+ break
78
+ }
79
+ return icon
80
+ }
81
+
82
+ RemoveAppIcon.propTypes = {
83
+ /**
84
+ * color of text, icon and borders
85
+ */
86
+ color: PropTypes.oneOf(COLORS_ICON),
87
+ /**
88
+ * Size
89
+ */
90
+ size: PropTypes.oneOf(SIZES),
91
+ /**
92
+ * disabled
93
+ */
94
+ disabled: PropTypes.bool,
95
+ /**
96
+ * inactive
97
+ */
98
+ inactive: PropTypes.bool
99
+ }
100
+
101
+ export default RemoveAppIcon
package/src/components/icons/index.js CHANGED
@@ -17,6 +17,7 @@ import AppDetailsIcon from './AppDetailsIcon'
17
17
  import AppEditIcon from './AppEditIcon'
18
18
  import AppIcon from './AppIcon'
19
19
  import AppListIcon from './AppListIcon'
20
+ import AppMissingIcon from './AppMissingIcon'
20
21
  import AppEmptyIcon from './AppEmptyIcon'
21
22
  import AppSettingsIcon from './AppSettingsIcon'
22
23
  import ApplicationTypeIcon from './ApplicationTypeIcon'
@@ -70,6 +71,7 @@ import CopyPasteIcon from './CopyPasteIcon'
70
71
  import CreditCardIcon from './CreditCardIcon'
71
72
  import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
72
73
  import CreateAppIcon from './CreateAppIcon'
74
+ import CreatingAppIcon from './CreatingAppIcon'
73
75
  import RunningAppIcon from './RunningAppIcon'
74
76
  import DatabaseIcon from './DatabaseIcon'
75
77
  import DatabaseEditIcon from './DatabaseEditIcon'
@@ -146,6 +148,7 @@ import PreviewPRIcon from './PreviewPRIcon'
146
148
  import PullRequestIcon from './PullRequestIcon'
147
149
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
148
150
  import RecentAppsIcon from './RecentAppsIcon'
151
+ import RemoveAppIcon from './RemoveAppIcon'
149
152
  import RemoveIcon from './RemoveIcon'
150
153
  import RequestOwnershipIcon from './RequestOwnershipIcon'
151
154
  import RequestsIcon from './RequestsIcon'
@@ -176,7 +179,7 @@ import StackablesIcon from './StackablesIcon'
176
179
  import StackablesPluginIcon from './StackablesPluginIcon'
177
180
  import StackablesTemplateIcon from './StackablesTemplateIcon'
178
181
  import StopIcon from './StopIcon'
179
- import StoppedAppIcon from './StoppedAppIcon'
182
+ import AppStoppedIcon from './AppStoppedIcon'
180
183
  import TableIcon from './TableIcon'
181
184
  import TaxonomyIcon from './TaxonomyIcon'
182
185
  import TerminalIcon from './TerminalIcon'
@@ -218,8 +221,9 @@ export default {
218
221
  AppDetailsIcon,
219
222
  AppEditIcon,
220
223
  AppIcon,
221
- AppListIcon,
222
224
  AppEmptyIcon,
225
+ AppListIcon,
226
+ AppMissingIcon,
223
227
  AppSettingsIcon,
224
228
  ApplicationTypeIcon,
225
229
  AppWorkspace,
@@ -272,6 +276,7 @@ export default {
272
276
  CreditCardIcon,
273
277
  ConfigureDatabaseIcon,
274
278
  CreateAppIcon,
279
+ CreatingAppIcon,
275
280
  RunningAppIcon,
276
281
  DatabaseIcon,
277
282
  DatabaseEditIcon,
@@ -348,6 +353,7 @@ export default {
348
353
  PullRequestIcon,
349
354
  PullRequestLoadingIcon,
350
355
  RecentAppsIcon,
356
+ RemoveAppIcon,
351
357
  RemoveIcon,
352
358
  RequestOwnershipIcon,
353
359
  RequestsIcon,
@@ -361,7 +367,7 @@ export default {
361
367
  ServiceIcon,
362
368
  ServicesWorkingIcon,
363
369
  StopIcon,
364
- StoppedAppIcon,
370
+ AppStoppedIcon,
365
371
  SlotIcon,
366
372
  SwitchIcon,
367
373
  SocialDiscordIcon,
package/tailwind.config.cjs CHANGED
@@ -26,6 +26,7 @@ module.exports = {
26
26
  'tertiary-blue': '0px 0px 4px rgba(37, 136, 228, 0.5)',
27
27
  'rich-black': '0px 0px 4px rgba(0, 5, 11, 1)',
28
28
  'black-russian': '0px 0px 4px rgba(0, 9, 14, 23)',
29
+ 'fluorescent-cyan': '0px 0px 4px rgba(68, 255, 236, 23)',
29
30
  white: '0px 0px 4px rgba(255, 255, 255, 0.5)'
30
31
  },
31
32
  opacity: {
@@ -50,7 +51,8 @@ module.exports = {
50
51
  'electric-purple': '#C61BE2',
51
52
  'anti-flash-white': '#EDEDED',
52
53
  'fire-engine-red': '#D71919',
53
- 'alternate-rich-black': '#12171D'
54
+ 'alternate-rich-black': '#12171D',
55
+ 'fluorescent-cyan': '#44FFEC'
54
56
  },
55
57
  fontFamily: {
56
58
  sans: ['Montserrat'],