@platformatic/ui-components 0.2.6 → 0.2.8
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.
- package/dist/assets/index-BrHI_B3I.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/constants.js +1 -1
- package/src/components/icons/AllAppsIcon.jsx +110 -0
- package/src/components/icons/AppConfigurationIcon.jsx +117 -0
- package/src/components/icons/AppDetailsIcon.jsx +99 -0
- package/src/components/icons/AppEditIcon.jsx +103 -0
- package/src/components/icons/AppSettingsIcon.jsx +97 -0
- package/src/components/icons/CodeTestingIcon.jsx +119 -0
- package/src/components/icons/CreateAppIcon.jsx +7 -18
- package/src/components/icons/ImportAppIcon.jsx +11 -15
- package/src/components/icons/RecentAppsIcon.jsx +26 -37
- package/src/components/icons/RunningAppIcon.jsx +103 -0
- package/src/components/icons/StoppedAppIcon.jsx +12 -18
- package/src/components/icons/index.js +14 -2
- package/tailwind.config.cjs +2 -1
- package/dist/assets/index-CYL6XgVn.js +0 -40
- package/src/components/icons/CreatingAppIcon.jsx +0 -110
|
@@ -0,0 +1,119 @@
|
|
|
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 CodeTestingIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
|
|
29
|
+
<path d='M6.5 11H3C2.44772 11 2 10.5523 2 10V3C2 2.44772 2.44772 2 3 2H10C10.5523 2 11 2.44772 11 3V5.5' stroke='none' strokeLinecap='round' />
|
|
30
|
+
<path d='M2 4.25H11' stroke='none' />
|
|
31
|
+
<circle cx='3.125' cy='3.125' r='0.375' fill='none' className={filledClassName} />
|
|
32
|
+
<circle cx='4.25' cy='3.125' r='0.375' fill='none' className={filledClassName} />
|
|
33
|
+
<circle cx='5.375' cy='3.125' r='0.375' fill='none' className={filledClassName} />
|
|
34
|
+
<path d='M3.5 5.75H7.25' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M4.25 7.25H7.5' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<path d='M4.25 8.75H6.5' stroke='none' strokeLinecap='round' />
|
|
37
|
+
<path d='M12.3639 11.6957C13.0262 11.2197 13.4545 10.4621 13.4545 9.6087C13.4545 8.16795 12.2335 7 10.7273 7C9.22104 7 8 8.16795 8 9.6087C8 11.0494 9.22104 12.2174 10.7273 12.2174C11.3414 12.2174 11.908 12.0233 12.3639 11.6957ZM12.3639 11.6957L14 13.7826' stroke='none' strokeLinecap='round' />
|
|
38
|
+
|
|
39
|
+
</svg>
|
|
40
|
+
)
|
|
41
|
+
break
|
|
42
|
+
case MEDIUM:
|
|
43
|
+
icon = (
|
|
44
|
+
<svg
|
|
45
|
+
width={24}
|
|
46
|
+
height={24}
|
|
47
|
+
viewBox='0 0 24 24'
|
|
48
|
+
fill='none'
|
|
49
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
50
|
+
className={className}
|
|
51
|
+
>
|
|
52
|
+
<path d='M9.75 16.5H4C3.44772 16.5 3 16.0523 3 15.5V4C3 3.44772 3.44772 3 4 3H15.5C16.0523 3 16.5 3.44772 16.5 4V8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
53
|
+
<path d='M3 6.375H16.5' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<circle cx='4.6875' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='6.375' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
|
|
56
|
+
<circle cx='8.0625' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
|
|
57
|
+
<path d='M5.25 8.625H10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
58
|
+
<path d='M6.375 10.875H11.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
59
|
+
<path d='M6.375 13.125H9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<path d='M18.5459 17.5435C19.5393 16.8296 20.1818 15.6931 20.1818 14.413C20.1818 12.2519 18.3503 10.5 16.0909 10.5C13.8316 10.5 12 12.2519 12 14.413C12 16.5742 13.8316 18.3261 16.0909 18.3261C17.012 18.3261 17.8621 18.0349 18.5459 17.5435ZM18.5459 17.5435L21 20.6739' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
61
|
+
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
case LARGE:
|
|
66
|
+
icon = (
|
|
67
|
+
<svg
|
|
68
|
+
width={40}
|
|
69
|
+
height={40}
|
|
70
|
+
viewBox='0 0 40 40'
|
|
71
|
+
fill='none'
|
|
72
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
73
|
+
className={className}
|
|
74
|
+
>
|
|
75
|
+
<path d='M16.25 27.5H6C5.44772 27.5 5 27.0523 5 26.5V6C5 5.44772 5.44772 5 6 5H26.5C27.0523 5 27.5 5.44772 27.5 6V13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
76
|
+
<path d='M5 10.625H27.5' stroke='none' strokeWidth={2} />
|
|
77
|
+
<circle cx='7.8125' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
78
|
+
<circle cx='10.625' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
79
|
+
<circle cx='13.4375' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
80
|
+
<path d='M8.75 14.375H18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
81
|
+
<path d='M10.625 18.125H18.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
82
|
+
<path d='M10.625 21.875H16.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
83
|
+
<path d='M30.9098 29.2391C32.5654 28.0493 33.6364 26.1551 33.6364 24.0217C33.6364 20.4199 30.5838 17.5 26.8182 17.5C23.0526 17.5 20 20.4199 20 24.0217C20 27.6236 23.0526 30.5435 26.8182 30.5435C28.3534 30.5435 29.7701 30.0581 30.9098 29.2391ZM30.9098 29.2391L35 34.4565' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
84
|
+
</svg>
|
|
85
|
+
)
|
|
86
|
+
break
|
|
87
|
+
|
|
88
|
+
default:
|
|
89
|
+
break
|
|
90
|
+
}
|
|
91
|
+
return icon
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
CodeTestingIcon.propTypes = {
|
|
95
|
+
/**
|
|
96
|
+
* color of text, icon and borders
|
|
97
|
+
*/
|
|
98
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
99
|
+
/**
|
|
100
|
+
* Size
|
|
101
|
+
*/
|
|
102
|
+
size: PropTypes.oneOf(SIZES),
|
|
103
|
+
/**
|
|
104
|
+
* disabled
|
|
105
|
+
*/
|
|
106
|
+
disabled: PropTypes.bool,
|
|
107
|
+
/**
|
|
108
|
+
* inactive
|
|
109
|
+
*/
|
|
110
|
+
inactive: PropTypes.bool
|
|
111
|
+
}
|
|
112
|
+
CodeTestingIcon.defaultProps = {
|
|
113
|
+
color: MAIN_DARK_BLUE,
|
|
114
|
+
size: MEDIUM,
|
|
115
|
+
disabled: false,
|
|
116
|
+
inactive: false
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export default CodeTestingIcon
|
|
@@ -24,12 +24,9 @@ const CreateAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
24
24
|
xmlns='http://www.w3.org/2000/svg'
|
|
25
25
|
className={className}
|
|
26
26
|
>
|
|
27
|
-
<path d='
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
<path d='M9.5 2.04346L10.2858 4.67217H12.8287L10.7714 6.29681L11.5572 8.92553L9.5 7.30089L7.44275 8.92553L8.22855 6.29681L6.1713 4.67217H8.7142L9.5 2.04346Z' stroke='none' strokeLinejoin='round' />
|
|
31
|
-
<path d='M5 5.30444V8.02181' stroke='none' strokeLinecap='round' />
|
|
32
|
-
<path d='M6.25 6.66309L3.75 6.66309' stroke='none' strokeLinecap='round' />
|
|
27
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
28
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C3.80376 2 2 3.80895 2 6.04041C2 7.99513 3.38411 9.62564 5.22306 10M6.02882 4V8M4 6L8 6.04041' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
|
|
33
30
|
</svg>
|
|
34
31
|
)
|
|
35
32
|
break
|
|
@@ -43,12 +40,8 @@ const CreateAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
43
40
|
xmlns='http://www.w3.org/2000/svg'
|
|
44
41
|
className={className}
|
|
45
42
|
>
|
|
46
|
-
<path d='
|
|
47
|
-
<
|
|
48
|
-
<path d='M6 19.6521C6 19.0998 6.44772 18.6521 7 18.6521H17C17.5523 18.6521 18 19.0998 18 19.6521V20.9999H6V19.6521Z' stroke='none' strokeWidth={1.5} />
|
|
49
|
-
<path d='M14.25 3.06519L15.4287 7.00826L19.243 7.00826L16.1572 9.44521L17.3359 13.3883L14.25 10.9513L11.1641 13.3883L12.3428 9.44521L9.25695 7.00826L13.0713 7.00826L14.25 3.06519Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
50
|
-
<path d='M7.5 7.95654V12.0326' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
51
|
-
<path d='M9.375 9.99463L5.625 9.99463' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
43
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
44
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C3.80376 2 2 3.80895 2 6.04041C2 7.99513 3.38411 9.62564 5.22306 10M6.02882 4V8M4 6L8 6.04041' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
52
45
|
|
|
53
46
|
</svg>
|
|
54
47
|
)
|
|
@@ -63,12 +56,8 @@ const CreateAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
63
56
|
xmlns='http://www.w3.org/2000/svg'
|
|
64
57
|
className={className}
|
|
65
58
|
>
|
|
66
|
-
<path d='
|
|
67
|
-
<
|
|
68
|
-
<path d='M10 32.0869C10 31.5346 10.4477 31.0869 11 31.0869H29C29.5523 31.0869 30 31.5346 30 32.0869V34.9999H10V32.0869Z' stroke='none' strokeWidth={2} />
|
|
69
|
-
<path d='M23.75 5.10889L25.7145 11.6807H32.0717L26.9286 15.7423L28.8931 22.3141L23.75 18.2525L18.6069 22.3141L20.5714 15.7423L15.4283 11.6807H21.7855L23.75 5.10889Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
70
|
-
<path d='M12.5 13.261V20.0544' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
71
|
-
<path d='M15.625 16.6577L9.375 16.6577' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
59
|
+
<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' />
|
|
60
|
+
<path d='M25 13.3888C24.1891 8.62565 20.0527 5 15.0721 5C9.50941 5 5 9.52239 5 15.101C5 19.9878 8.46027 24.0641 13.0576 25M15.0721 10V20M10 15L20 15.101' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
61
|
|
|
73
62
|
</svg>
|
|
74
63
|
)
|
|
@@ -24,11 +24,10 @@ const ImportAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
24
24
|
xmlns='http://www.w3.org/2000/svg'
|
|
25
25
|
className={className}
|
|
26
26
|
>
|
|
27
|
-
<path d='
|
|
28
|
-
<
|
|
29
|
-
<path d='
|
|
30
|
-
|
|
31
|
-
<path d='M9 6H4M4 6L6 4M4 6L6 8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
28
|
+
<path d='M7 10V10C6.44772 10 6 9.55228 6 9L6 5M6 5L8 6.5M6 5L4 6.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path d='M5.33333 12L2 12L2 2L12 2L12 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
|
|
32
31
|
</svg>
|
|
33
32
|
)
|
|
34
33
|
break
|
|
@@ -42,11 +41,10 @@ const ImportAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
42
41
|
xmlns='http://www.w3.org/2000/svg'
|
|
43
42
|
className={className}
|
|
44
43
|
>
|
|
45
|
-
<path d='
|
|
46
|
-
<
|
|
47
|
-
<path d='
|
|
48
|
-
|
|
49
|
-
<path d='M13.5 9H6M6 9L9 6M6 9L9 12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
44
|
+
<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' />
|
|
45
|
+
<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' />
|
|
46
|
+
<path d='M8 18L3 18L3 3L18 3L18 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
|
|
50
48
|
</svg>
|
|
51
49
|
)
|
|
52
50
|
break
|
|
@@ -60,11 +58,9 @@ const ImportAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
60
58
|
xmlns='http://www.w3.org/2000/svg'
|
|
61
59
|
className={className}
|
|
62
60
|
>
|
|
63
|
-
<path d='
|
|
64
|
-
<
|
|
65
|
-
<path d='
|
|
66
|
-
<path d='M26.25 8.75L27.6532 13.0686H32.1941L28.5204 15.7377L29.9237 20.0564L26.25 17.3873L22.5763 20.0564L23.9796 15.7377L20.3059 13.0686H24.8468L26.25 8.75Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
67
|
-
<path d='M22.5 15H10M10 15L15 10M10 15L15 20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<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' />
|
|
62
|
+
<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' />
|
|
63
|
+
<path d='M13.3333 30L5 30L5 5L30 5L30 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
64
|
</svg>
|
|
69
65
|
)
|
|
70
66
|
break
|
|
@@ -12,6 +12,7 @@ const RecentAppsIcon = ({ color, size, disabled, inactive }) => {
|
|
|
12
12
|
className += ` ${styles.iconInactive}`
|
|
13
13
|
}
|
|
14
14
|
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
15
16
|
|
|
16
17
|
switch (size) {
|
|
17
18
|
case SMALL:
|
|
@@ -24,19 +25,14 @@ const RecentAppsIcon = ({ color, size, disabled, inactive }) => {
|
|
|
24
25
|
xmlns='http://www.w3.org/2000/svg'
|
|
25
26
|
className={className}
|
|
26
27
|
>
|
|
27
|
-
<path d='
|
|
28
|
-
<
|
|
29
|
-
<path d='
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
<rect x='3.33325' y='5.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
36
|
-
<rect x='3.33325' y='7.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
37
|
-
<rect x='5.33325' y='5.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
38
|
-
<rect x='5.33325' y='7.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
39
|
-
|
|
28
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path d='M11 5.5V4.5C11 3.94772 10.5523 3.5 10 3.5H3C2.44772 3.5 2 3.94772 2 4.5V10C2 10.5523 2.44772 11 3 11H6' stroke='none' strokeLinecap='round' />
|
|
30
|
+
<path d='M2 5.75H11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
<line x1='3.75' y1='4.5' x2='3.75' y2='2.5' stroke='none' strokeLinecap='round' />
|
|
32
|
+
<line x1='9' y1='4.5' x2='9' y2='2.5' stroke='none' strokeLinecap='round' />
|
|
33
|
+
<rect x='3.5' y='6.5' width='1.5' height='1.5' rx='0.5' fill='none' className={filledClassName} />
|
|
34
|
+
<rect x='3.5' y='8.75' width='1.5' height='1.5' rx='0.5' fill='none' className={filledClassName} />
|
|
35
|
+
<rect x='5.75' y='6.5' width='1.5' height='1.5' rx='0.5' fill='none' className={filledClassName} />
|
|
40
36
|
</svg>
|
|
41
37
|
)
|
|
42
38
|
break
|
|
@@ -50,18 +46,15 @@ const RecentAppsIcon = ({ color, size, disabled, inactive }) => {
|
|
|
50
46
|
xmlns='http://www.w3.org/2000/svg'
|
|
51
47
|
className={className}
|
|
52
48
|
>
|
|
53
|
-
<path d='
|
|
54
|
-
<
|
|
55
|
-
<path d='
|
|
56
|
-
<
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
<rect x='5' y='11.25' width='2' height='2' rx='0.5' fill='none' />
|
|
63
|
-
<rect x='8' y='8.25' width='2' height='2' rx='0.5' fill='none' />
|
|
64
|
-
<rect x='8' y='11.25' width='2' height='2' rx='0.5' fill='none' />
|
|
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='M16.5 8.25V6.25C16.5 5.69772 16.0523 5.25 15.5 5.25H4C3.44772 5.25 3 5.69772 3 6.25V15.5C3 16.0523 3.44772 16.5 4 16.5H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
51
|
+
<path d='M3 8.625H16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<line x1='5.625' y1='6.75' x2='5.625' y2='3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
53
|
+
<line x1='13.5' y1='6.75' x2='13.5' y2='3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
54
|
+
<rect x='5.25' y='9.75' width='2.25' height='2.25' rx='0.5' fill='none' className={filledClassName} />
|
|
55
|
+
<rect x='5.25' y='13.125' width='2.25' height='2.25' rx='0.5' fill='none' className={filledClassName} />
|
|
56
|
+
<rect x='8.625' y='9.75' width='2.25' height='2.25' rx='0.5' fill='none' className={filledClassName} />
|
|
57
|
+
|
|
65
58
|
</svg>
|
|
66
59
|
)
|
|
67
60
|
break
|
|
@@ -75,18 +68,14 @@ const RecentAppsIcon = ({ color, size, disabled, inactive }) => {
|
|
|
75
68
|
xmlns='http://www.w3.org/2000/svg'
|
|
76
69
|
className={className}
|
|
77
70
|
>
|
|
78
|
-
<path d='
|
|
79
|
-
<
|
|
80
|
-
<path d='
|
|
81
|
-
<
|
|
82
|
-
<
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
<rect x='8.33301' y='13.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
87
|
-
<rect x='8.33301' y='18.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
88
|
-
<rect x='13.333' y='13.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
89
|
-
<rect x='13.333' y='18.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
71
|
+
<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' />
|
|
72
|
+
<path d='M27.5 13.75V9.75C27.5 9.19772 27.0523 8.75 26.5 8.75H6C5.44772 8.75 5 9.19772 5 9.75V26.5C5 27.0523 5.44772 27.5 6 27.5H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
73
|
+
<path d='M5 14.375H27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
74
|
+
<line x1='9.625' y1='11.5' x2='9.625' y2='6' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
75
|
+
<line x1='22.75' y1='11.5' x2='22.75' y2='6' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
76
|
+
<rect x='8.75' y='16.25' width='3.75' height='3.75' rx='0.5' fill='none' className={filledClassName} />
|
|
77
|
+
<rect x='8.75' y='21.875' width='3.75' height='3.75' rx='0.5' fill='none' className={filledClassName} />
|
|
78
|
+
<rect x='14.375' y='16.25' width='3.75' height='3.75' rx='0.5' fill='none' className={filledClassName} />
|
|
90
79
|
</svg>
|
|
91
80
|
)
|
|
92
81
|
break
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
|
|
5
|
+
|
|
6
|
+
const RunningAppIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
let icon = <></>
|
|
15
|
+
|
|
16
|
+
switch (size) {
|
|
17
|
+
case SMALL:
|
|
18
|
+
icon = (
|
|
19
|
+
<svg
|
|
20
|
+
width={16}
|
|
21
|
+
height={16}
|
|
22
|
+
viewBox='0 0 16 16'
|
|
23
|
+
fill='none'
|
|
24
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
25
|
+
className={className}
|
|
26
|
+
>
|
|
27
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
28
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C5.56315 2 5.11593 2.07923 4.69984 2.22499M5.22306 10C3.38411 9.62564 2 7.99513 2 6.04041C2 5.49495 2.10778 4.97472 2.30315 4.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path d='M8.57617 4.69189L10.2035 5.44076L10.9697 3.82463' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<path d='M3.5 5.23511L2.55318 3.71441L1.02417 4.64233' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
|
|
32
|
+
</svg>
|
|
33
|
+
)
|
|
34
|
+
break
|
|
35
|
+
case MEDIUM:
|
|
36
|
+
icon = (
|
|
37
|
+
<svg
|
|
38
|
+
width={24}
|
|
39
|
+
height={24}
|
|
40
|
+
viewBox='0 0 24 24'
|
|
41
|
+
fill='none'
|
|
42
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
43
|
+
className={className}
|
|
44
|
+
>
|
|
45
|
+
<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' />
|
|
46
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C8.34472 3 7.6739 3.11885 7.04976 3.33748M7.83459 15C5.07616 14.4385 3 11.9927 3 9.06062C3 8.24242 3.16167 7.46209 3.45472 6.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
<path d='M12.8643 7.03784L15.3052 8.16113L16.4546 5.73695' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M5.25 7.85254L3.82978 5.57149L1.53625 6.96337' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
|
|
50
|
+
</svg>
|
|
51
|
+
)
|
|
52
|
+
break
|
|
53
|
+
case LARGE:
|
|
54
|
+
icon = (
|
|
55
|
+
<svg
|
|
56
|
+
width={40}
|
|
57
|
+
height={40}
|
|
58
|
+
viewBox='0 0 40 40'
|
|
59
|
+
fill='none'
|
|
60
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
61
|
+
className={className}
|
|
62
|
+
>
|
|
63
|
+
<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' />
|
|
64
|
+
<path d='M25 13.3888C24.1891 8.62565 20.0527 5 15.0721 5C13.9079 5 12.7898 5.19808 11.7496 5.56247M13.0576 25C8.46027 24.0641 5 19.9878 5 15.101C5 13.7374 5.26945 12.4368 5.75787 11.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
|
+
<path d='M21.4404 11.7297L25.5087 13.6019L27.4243 9.56158' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M8.75 13.0879L6.38296 9.28614L2.56041 11.6059' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
RunningAppIcon.propTypes = {
|
|
79
|
+
/**
|
|
80
|
+
* color of text, icon and borders
|
|
81
|
+
*/
|
|
82
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
83
|
+
/**
|
|
84
|
+
* Size
|
|
85
|
+
*/
|
|
86
|
+
size: PropTypes.oneOf(SIZES),
|
|
87
|
+
/**
|
|
88
|
+
* disabled
|
|
89
|
+
*/
|
|
90
|
+
disabled: PropTypes.bool,
|
|
91
|
+
/**
|
|
92
|
+
* inactive
|
|
93
|
+
*/
|
|
94
|
+
inactive: PropTypes.bool
|
|
95
|
+
}
|
|
96
|
+
RunningAppIcon.defaultProps = {
|
|
97
|
+
color: MAIN_DARK_BLUE,
|
|
98
|
+
size: MEDIUM,
|
|
99
|
+
disabled: false,
|
|
100
|
+
inactive: false
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export default RunningAppIcon
|
|
@@ -12,6 +12,7 @@ const StoppedAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
12
12
|
className += ` ${styles.iconInactive}`
|
|
13
13
|
}
|
|
14
14
|
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
15
16
|
|
|
16
17
|
switch (size) {
|
|
17
18
|
case SMALL:
|
|
@@ -24,12 +25,9 @@ const StoppedAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
24
25
|
xmlns='http://www.w3.org/2000/svg'
|
|
25
26
|
className={className}
|
|
26
27
|
>
|
|
27
|
-
<path d='
|
|
28
|
-
<
|
|
29
|
-
<
|
|
30
|
-
<path d='M7.44287 4.67217H8.0786H8.71432L9.50012 2.04346L10.2859 4.67217H12.8288L10.7716 6.29681L11.5574 8.92553L9.50012 7.30089L7.44287 8.92553L8.22867 6.29681L7.5 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
-
<path d='M6 5L6 7' stroke='none' strokeLinecap='round' />
|
|
32
|
-
<path d='M4 5L4 7' stroke='none' strokeLinecap='round' />
|
|
28
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C3.80376 2 2 3.80895 2 6.04041C2 7.99513 3.38411 9.62564 5.22306 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<rect x='5' y='5' width='2' height='2' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
33
31
|
|
|
34
32
|
</svg>
|
|
35
33
|
)
|
|
@@ -44,12 +42,10 @@ const StoppedAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
44
42
|
xmlns='http://www.w3.org/2000/svg'
|
|
45
43
|
className={className}
|
|
46
44
|
>
|
|
47
|
-
<path d='
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
<path d='M9 7.5L9 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
52
|
-
<path d='M6 7.5L6 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
45
|
+
<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' />
|
|
46
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C5.70565 3 3 5.71343 3 9.06062C3 11.9927 5.07616 14.4385 7.83459 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
<rect x='7.5' y='7.5' width='3' height='3' fill='none' className={filledClassName} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
48
|
+
|
|
53
49
|
</svg>
|
|
54
50
|
)
|
|
55
51
|
break
|
|
@@ -63,12 +59,10 @@ const StoppedAppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
63
59
|
xmlns='http://www.w3.org/2000/svg'
|
|
64
60
|
className={className}
|
|
65
61
|
>
|
|
66
|
-
<path d='
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
<path d='M15 12.5L15 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
71
|
-
<path d='M10 12.5L10 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
62
|
+
<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' />
|
|
63
|
+
<path d='M25 13.3888C24.1891 8.62565 20.0527 5 15.0721 5C9.50941 5 5 9.52239 5 15.101C5 19.9878 8.46027 24.0641 13.0576 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<rect x='12.5' y='12.5' width='5' height='5' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
65
|
+
|
|
72
66
|
</svg>
|
|
73
67
|
)
|
|
74
68
|
break
|
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import AddIcon from './AddIcon'
|
|
2
2
|
import AlertIcon from './AlertIcon'
|
|
3
|
+
import AllAppsIcon from './AllAppsIcon'
|
|
3
4
|
import AllInOneIcon from './AllInOneIcon'
|
|
4
5
|
import ApiCloudIcon from './ApiCloudIcon'
|
|
5
6
|
import ApiIcon from './ApiIcon'
|
|
6
7
|
import ApiIconClosed from './ApiIconClosed'
|
|
7
8
|
import ApiEmptyIcon from './ApiEmptyIcon'
|
|
8
9
|
import ApiPerformanceIcon from './ApiPerformanceIcon'
|
|
10
|
+
import AppConfigurationIcon from './AppConfigurationIcon'
|
|
11
|
+
import AppDetailsIcon from './AppDetailsIcon'
|
|
12
|
+
import AppEditIcon from './AppEditIcon'
|
|
9
13
|
import AppIcon from './AppIcon'
|
|
10
14
|
import AppListIcon from './AppListIcon'
|
|
11
15
|
import AppEmptyIcon from './AppEmptyIcon'
|
|
16
|
+
import AppSettingsIcon from './AppSettingsIcon'
|
|
12
17
|
import ApplicationTypeIcon from './ApplicationTypeIcon'
|
|
13
18
|
import AppWorkspace from './AppWorkspace'
|
|
14
19
|
import ArrowDownFullIcon from './ArrowDownFullIcon'
|
|
@@ -47,12 +52,13 @@ import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
|
|
|
47
52
|
import CloseIcon from './CloseIcon'
|
|
48
53
|
import CloudIcon from './CloudIcon'
|
|
49
54
|
import CLIIcon from './CLIIcon'
|
|
55
|
+
import CodeTestingIcon from './CodeTestingIcon'
|
|
50
56
|
import ComputerIcon from './ComputerIcon'
|
|
51
57
|
import CopyPasteIcon from './CopyPasteIcon'
|
|
52
58
|
import CreditCardIcon from './CreditCardIcon'
|
|
53
59
|
import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
|
|
54
60
|
import CreateAppIcon from './CreateAppIcon'
|
|
55
|
-
import
|
|
61
|
+
import RunningAppIcon from './RunningAppIcon'
|
|
56
62
|
import DatabaseIcon from './DatabaseIcon'
|
|
57
63
|
import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
58
64
|
import DepencenciesReloadIcon from './DepencenciesReloadIcon'
|
|
@@ -137,15 +143,20 @@ import WorkspaceStaticIcon from './WorkspaceStaticIcon'
|
|
|
137
143
|
export default {
|
|
138
144
|
AddIcon,
|
|
139
145
|
AlertIcon,
|
|
146
|
+
AllAppsIcon,
|
|
140
147
|
AllInOneIcon,
|
|
141
148
|
ApiCloudIcon,
|
|
142
149
|
ApiIcon,
|
|
143
150
|
ApiIconClosed,
|
|
144
151
|
ApiEmptyIcon,
|
|
145
152
|
ApiPerformanceIcon,
|
|
153
|
+
AppConfigurationIcon,
|
|
154
|
+
AppDetailsIcon,
|
|
155
|
+
AppEditIcon,
|
|
146
156
|
AppIcon,
|
|
147
157
|
AppListIcon,
|
|
148
158
|
AppEmptyIcon,
|
|
159
|
+
AppSettingsIcon,
|
|
149
160
|
ApplicationTypeIcon,
|
|
150
161
|
AppWorkspace,
|
|
151
162
|
ArrowDownFullIcon,
|
|
@@ -184,12 +195,13 @@ export default {
|
|
|
184
195
|
CloseIcon,
|
|
185
196
|
CloudIcon,
|
|
186
197
|
CLIIcon,
|
|
198
|
+
CodeTestingIcon,
|
|
187
199
|
ComputerIcon,
|
|
188
200
|
CopyPasteIcon,
|
|
189
201
|
CreditCardIcon,
|
|
190
202
|
ConfigureDatabaseIcon,
|
|
191
203
|
CreateAppIcon,
|
|
192
|
-
|
|
204
|
+
RunningAppIcon,
|
|
193
205
|
DatabaseIcon,
|
|
194
206
|
DatabaseMigrationIcon,
|
|
195
207
|
DepencenciesReloadIcon,
|
package/tailwind.config.cjs
CHANGED
|
@@ -47,7 +47,8 @@ module.exports = {
|
|
|
47
47
|
'electric-purple': '#C61BE2',
|
|
48
48
|
'anti-flash-white': '#EDEDED',
|
|
49
49
|
'fire-engine-red': '#D71919',
|
|
50
|
-
'alternate-rich-black': '#12171D'
|
|
50
|
+
'alternate-rich-black': '#12171D',
|
|
51
|
+
'electric-purple': '#C61BE2'
|
|
51
52
|
},
|
|
52
53
|
fontFamily: {
|
|
53
54
|
sans: ['Montserrat'],
|