@platformatic/ui-components 0.2.5 → 0.2.7
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-DGu0wALr.css → index-C-rgNKxt.css} +1 -1
- package/dist/assets/index-CcMC5HmW.js +40 -0
- package/dist/index.html +2 -2
- package/dist/main.css +4 -0
- package/index.js +2 -0
- package/package.json +1 -1
- package/src/components/PlatformaticIcon.jsx +10 -3
- package/src/components/PlatformaticIcon.module.css +3 -0
- package/src/components/Tooltip.jsx +65 -0
- package/src/components/Tooltip.module.css +31 -0
- package/src/components/constants.js +5 -0
- 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/dist/assets/index-DnNOQ9Mz.js +0 -206
- package/src/components/icons/CreatingAppIcon.jsx +0 -110
|
@@ -0,0 +1,97 @@
|
|
|
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 AppSettingsIcon = ({ 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='M7.90415 7.04236C8.00356 6.787 8.03422 6.50135 7.97791 6.2125C7.81941 5.39937 7.03175 4.8687 6.21863 5.02721C5.4055 5.18571 4.87483 5.97337 5.03334 6.7865C5.16407 7.45712 5.72275 7.93561 6.37072 7.99381' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path d='M10.7345 5.73592H10.2615C10.1582 5.73592 10.0636 5.67612 10.0202 5.58405L9.71125 4.92913C9.66588 4.83421 9.68326 4.72126 9.75566 4.64343L10.2113 4.15176C10.3049 4.05115 10.304 3.89644 10.2084 3.79677L9.35311 2.90645C9.24788 2.79635 9.07026 2.7973 8.966 2.9074L8.61171 3.28138C8.53835 3.35921 8.42443 3.38483 8.32404 3.34782L7.58651 3.07351C7.48321 3.03554 7.41467 2.93778 7.41467 2.82957V2.26102C7.41467 2.11675 7.29593 2 7.1492 2H5.8508C5.70406 2 5.58533 2.11675 5.58533 2.26102V2.82957C5.58533 2.93778 5.51679 3.03554 5.41349 3.07351L4.67596 3.34782C4.57557 3.38483 4.46165 3.35921 4.38829 3.28138L4.034 2.9074C3.92974 2.7973 3.75212 2.7973 3.64689 2.90645L2.79159 3.79677C2.69602 3.89549 2.69506 4.05115 2.78869 4.15176L3.24434 4.64343C3.31578 4.72126 3.33412 4.83326 3.28875 4.92913L2.97983 5.58405C2.93639 5.67707 2.84179 5.73592 2.7385 5.73592H2.26547C2.11874 5.73592 2 5.85267 2 5.99694V7.09608C2 7.24035 2.11874 7.3571 2.26547 7.3571H2.76166C2.87654 7.3571 2.97887 7.43018 3.01459 7.53744L3.26558 8.29393C3.29454 8.38315 3.2733 8.48091 3.20959 8.5502L2.80124 8.99346C2.70181 9.10167 2.71147 9.26967 2.82345 9.36553L3.76467 10.1752C3.87279 10.2682 4.0369 10.2597 4.1344 10.1562L4.46262 9.8088C4.53406 9.73191 4.64507 9.70534 4.7445 9.73951L5.4299 9.9749C5.53706 10.0119 5.60849 10.1106 5.60849 10.2217V10.739C5.60849 10.8833 5.72723 11 5.87397 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
</svg>
|
|
31
|
+
)
|
|
32
|
+
break
|
|
33
|
+
case MEDIUM:
|
|
34
|
+
icon = (
|
|
35
|
+
<svg
|
|
36
|
+
width={24}
|
|
37
|
+
height={24}
|
|
38
|
+
viewBox='0 0 24 24'
|
|
39
|
+
fill='none'
|
|
40
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
41
|
+
className={className}
|
|
42
|
+
>
|
|
43
|
+
<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' />
|
|
44
|
+
<path d='M11.8564 10.5634C12.0055 10.1804 12.0515 9.75191 11.967 9.31862C11.7292 8.09894 10.5477 7.30293 9.32806 7.54069C8.10838 7.77845 7.31237 8.95994 7.55013 10.1796C7.74622 11.1856 8.58425 11.9033 9.5562 11.9906' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
<path d='M16.1018 8.60388H15.3923C15.2373 8.60388 15.0954 8.51418 15.0302 8.37608L14.5669 7.39369C14.4988 7.25132 14.5249 7.08189 14.6335 6.96514L15.317 6.22764C15.4574 6.07672 15.456 5.84465 15.3126 5.69516L14.0297 4.35968C13.8718 4.19453 13.6054 4.19595 13.449 4.36111L12.9176 4.92206C12.8075 5.03881 12.6367 5.07725 12.4861 5.02173L11.3798 4.61026C11.2248 4.55331 11.122 4.40667 11.122 4.24436V3.39153C11.122 3.17512 10.9439 3 10.7238 3H8.7762C8.5561 3 8.37799 3.17512 8.37799 3.39153V4.24436C8.37799 4.40667 8.27518 4.55331 8.12024 4.61026L7.01394 5.02173C6.86335 5.07725 6.69248 5.03881 6.58243 4.92206L6.051 4.36111C5.89462 4.19595 5.62818 4.19595 5.47034 4.35968L4.18739 5.69516C4.04403 5.84323 4.04258 6.07672 4.18304 6.22764L4.86651 6.96514C4.97367 7.08189 5.00118 7.24989 4.93312 7.39369L4.46975 8.37608C4.40459 8.51561 4.26268 8.60388 4.10774 8.60388H3.39821C3.17811 8.60388 3 8.779 3 8.99541V10.6441C3 10.8605 3.17811 11.0356 3.39821 11.0356H4.1425C4.31481 11.0356 4.4683 11.1453 4.52188 11.3062L4.89837 12.4409C4.94181 12.5747 4.90995 12.7214 4.81438 12.8253L4.20187 13.4902C4.05272 13.6525 4.0672 13.9045 4.23517 14.0483L5.647 15.2628C5.80918 15.4023 6.05535 15.3895 6.2016 15.2343L6.69393 14.7132C6.80108 14.5979 6.96761 14.558 7.11675 14.6093L8.14486 14.9624C8.30559 15.0179 8.41274 15.1659 8.41274 15.3325V16.1085C8.41274 16.3249 8.59085 16.5 8.81095 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
</svg>
|
|
47
|
+
)
|
|
48
|
+
break
|
|
49
|
+
case LARGE:
|
|
50
|
+
icon = (
|
|
51
|
+
<svg
|
|
52
|
+
width={40}
|
|
53
|
+
height={40}
|
|
54
|
+
viewBox='0 0 40 40'
|
|
55
|
+
fill='none'
|
|
56
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
57
|
+
className={className}
|
|
58
|
+
>
|
|
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='M19.7605 17.6058C20.009 16.9674 20.0857 16.2533 19.9449 15.5311C19.5486 13.4983 17.5795 12.1716 15.5467 12.5679C13.5139 12.9642 12.1872 14.9333 12.5835 16.9661C12.9103 18.6427 14.307 19.8389 15.9269 19.9844' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<path d='M26.8363 14.3398H25.6538C25.3955 14.3398 25.159 14.1903 25.0504 13.9601L24.2781 12.3228C24.1647 12.0855 24.2081 11.8032 24.3891 11.6086L25.5283 10.3794C25.7624 10.1279 25.7599 9.74109 25.521 9.49193L23.3828 7.26614C23.1197 6.99088 22.6756 6.99325 22.415 7.26851L21.5293 8.20344C21.3459 8.39802 21.0611 8.46209 20.8101 8.36954L18.9663 7.68377C18.708 7.58885 18.5367 7.34444 18.5367 7.07393V5.65255C18.5367 5.29187 18.2398 5 17.873 5H14.627C14.2602 5 13.9633 5.29187 13.9633 5.65255V7.07393C13.9633 7.34444 13.792 7.58885 13.5337 7.68377L11.6899 8.36954C11.4389 8.46209 11.1541 8.39802 10.9707 8.20344L10.085 7.26851C9.82436 6.99325 9.3803 6.99325 9.11724 7.26614L6.97898 9.49193C6.74005 9.73872 6.73764 10.1279 6.97174 10.3794L8.11085 11.6086C8.28945 11.8032 8.3353 12.0832 8.22187 12.3228L7.44959 13.9601C7.34098 14.1927 7.10447 14.3398 6.84624 14.3398H5.66368C5.29685 14.3398 5 14.6317 5 14.9924V17.7402C5 18.1009 5.29685 18.3927 5.66368 18.3927H6.90416C7.19135 18.3927 7.44717 18.5755 7.53647 18.8436L8.16395 20.7348C8.23635 20.9579 8.18326 21.2023 8.02397 21.3755L7.00311 22.4837C6.75453 22.7542 6.77867 23.1742 7.05862 23.4138L9.41167 25.4379C9.68197 25.6705 10.0922 25.6491 10.336 25.3905L11.1565 24.522C11.3351 24.3298 11.6127 24.2633 11.8613 24.3488L13.5748 24.9373C13.8426 25.0298 14.0212 25.2766 14.0212 25.5542V26.8474C14.0212 27.2081 14.3181 27.5 14.6849 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
|
|
66
|
+
default:
|
|
67
|
+
break
|
|
68
|
+
}
|
|
69
|
+
return icon
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
AppSettingsIcon.propTypes = {
|
|
73
|
+
/**
|
|
74
|
+
* color of text, icon and borders
|
|
75
|
+
*/
|
|
76
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
77
|
+
/**
|
|
78
|
+
* Size
|
|
79
|
+
*/
|
|
80
|
+
size: PropTypes.oneOf(SIZES),
|
|
81
|
+
/**
|
|
82
|
+
* disabled
|
|
83
|
+
*/
|
|
84
|
+
disabled: PropTypes.bool,
|
|
85
|
+
/**
|
|
86
|
+
* inactive
|
|
87
|
+
*/
|
|
88
|
+
inactive: PropTypes.bool
|
|
89
|
+
}
|
|
90
|
+
AppSettingsIcon.defaultProps = {
|
|
91
|
+
color: MAIN_DARK_BLUE,
|
|
92
|
+
size: MEDIUM,
|
|
93
|
+
disabled: false,
|
|
94
|
+
inactive: false
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default AppSettingsIcon
|
|
@@ -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
|