diff --git a/src/components/icons/AppOptimizedIcon.jsx b/src/components/icons/AppOptimizedIcon.jsx
new file mode 100644
index 00000000..9fb14cf5
--- /dev/null
+++ b/src/components/icons/AppOptimizedIcon.jsx
@@ -0,0 +1,100 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const AppOptimizedIcon = ({
+ color = MAIN_DARK_BLUE,
+ size = MEDIUM,
+ disabled = false,
+ inactive = false
+}) => {
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
+ if (disabled) {
+ className += ` ${styles.iconDisabled}`
+ }
+ if (inactive) {
+ className += ` ${styles.iconInactive}`
+ }
+ let icon = <>
+
+ switch (size) {
+ case SMALL:
+ icon = (
+
+ )
+ break
+ case MEDIUM:
+ icon = (
+
+ )
+ break
+ case LARGE:
+ icon = (
+
+ )
+ break
+
+ default:
+ break
+ }
+ return icon
+}
+
+AppOptimizedIcon.propTypes = {
+ /**
+ * color of text, icon and borders
+ */
+ color: PropTypes.oneOf(COLORS_ICON),
+ /**
+ * Size
+ */
+ size: PropTypes.oneOf(SIZES),
+ /**
+ * disabled
+ */
+ disabled: PropTypes.bool,
+ /**
+ * inactive
+ */
+ inactive: PropTypes.bool
+}
+
+export default AppOptimizedIcon
diff --git a/src/components/icons/CircleCheckMarkButtonIcon.jsx b/src/components/icons/CircleCheckMarkButtonIcon.jsx
index 3fc88681..1b13dbb2 100644
--- a/src/components/icons/CircleCheckMarkButtonIcon.jsx
+++ b/src/components/icons/CircleCheckMarkButtonIcon.jsx
@@ -29,8 +29,8 @@ const CircleCheckMarkButtonIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
+
+
)
break
diff --git a/src/components/icons/CircleCopyPasteIcon.jsx b/src/components/icons/CircleCopyPasteIcon.jsx
index d98409fe..e4ddf769 100644
--- a/src/components/icons/CircleCopyPasteIcon.jsx
+++ b/src/components/icons/CircleCopyPasteIcon.jsx
@@ -47,10 +47,10 @@ const CircleCopyPasteIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
break
diff --git a/src/components/icons/CircleEditIcon.jsx b/src/components/icons/CircleEditIcon.jsx
index 0454704d..9e303760 100644
--- a/src/components/icons/CircleEditIcon.jsx
+++ b/src/components/icons/CircleEditIcon.jsx
@@ -48,10 +48,10 @@ const CircleEditIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
diff --git a/src/components/icons/CircleRestartIcon.jsx b/src/components/icons/CircleRestartIcon.jsx
index 66d44e13..e00f5309 100644
--- a/src/components/icons/CircleRestartIcon.jsx
+++ b/src/components/icons/CircleRestartIcon.jsx
@@ -47,10 +47,10 @@ const CircleRestartIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
break
diff --git a/src/components/icons/CollapseIcon.jsx b/src/components/icons/CollapseIcon.jsx
index 5f2eaf91..65793695 100644
--- a/src/components/icons/CollapseIcon.jsx
+++ b/src/components/icons/CollapseIcon.jsx
@@ -29,10 +29,10 @@ const CollapseIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
break
@@ -46,10 +46,10 @@ const CollapseIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
@@ -64,10 +64,10 @@ const CollapseIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
break
diff --git a/src/components/icons/ConfigureDatabaseIcon.jsx b/src/components/icons/ConfigureDatabaseIcon.jsx
index d19467f2..e6dfda51 100644
--- a/src/components/icons/ConfigureDatabaseIcon.jsx
+++ b/src/components/icons/ConfigureDatabaseIcon.jsx
@@ -47,11 +47,11 @@ const ConfigureDatabaseIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
-
+
+
+
+
+
)
break
@@ -65,11 +65,11 @@ const ConfigureDatabaseIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
-
+
+
+
+
+
)
diff --git a/src/components/icons/DatabaseMigrationIcon.jsx b/src/components/icons/DatabaseMigrationIcon.jsx
index ff3bf979..10a34a1f 100644
--- a/src/components/icons/DatabaseMigrationIcon.jsx
+++ b/src/components/icons/DatabaseMigrationIcon.jsx
@@ -46,10 +46,10 @@ const DatabaseMigrationIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
break
@@ -63,10 +63,10 @@ const DatabaseMigrationIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
+
+
+
+
)
diff --git a/src/components/icons/GitHubRepoIcon.jsx b/src/components/icons/GitHubRepoIcon.jsx
index 9564291c..b66ed404 100644
--- a/src/components/icons/GitHubRepoIcon.jsx
+++ b/src/components/icons/GitHubRepoIcon.jsx
@@ -62,9 +62,9 @@ const GitHubRepoIcon = ({
-
-
-
+
+
+
)
break
@@ -86,9 +86,9 @@ const GitHubRepoIcon = ({
-
-
-
+
+
+
)
diff --git a/src/components/icons/NameAppIcon.jsx b/src/components/icons/NameAppIcon.jsx
index 2f457c7e..31a7473d 100644
--- a/src/components/icons/NameAppIcon.jsx
+++ b/src/components/icons/NameAppIcon.jsx
@@ -47,11 +47,11 @@ const NameAppIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
-
+
+
+
+
+
)
@@ -66,11 +66,11 @@ const NameAppIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
-
-
-
-
+
+
+
+
+
)
diff --git a/src/components/icons/OpenAPIEditsIcon.jsx b/src/components/icons/OpenAPIEditsIcon.jsx
index 0c44871c..a8dbfa04 100644
--- a/src/components/icons/OpenAPIEditsIcon.jsx
+++ b/src/components/icons/OpenAPIEditsIcon.jsx
@@ -53,10 +53,10 @@ const OpenAPIEditsIcon = ({
>
-
-
-
-
+
+
+
+
)
break
@@ -72,10 +72,10 @@ const OpenAPIEditsIcon = ({
>
-
-
-
-
+
+
+
+
)
break
diff --git a/src/components/icons/RestartIcon.jsx b/src/components/icons/RestartIcon.jsx
index 97168454..70c4e3f5 100644
--- a/src/components/icons/RestartIcon.jsx
+++ b/src/components/icons/RestartIcon.jsx
@@ -44,7 +44,7 @@ const RestartIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
+
)
@@ -59,7 +59,7 @@ const RestartIcon = ({
xmlns='http://www.w3.org/2000/svg'
className={className}
>
-
+
)
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index 040350fe..9fac153e 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -206,6 +206,7 @@ import WorkspaceReadyIcon from './WorkspaceReadyIcon'
import WorkspaceStaticIcon from './WorkspaceStaticIcon'
import ZoomInIcon from './ZoomInIcon'
import ZoomOutIcon from './ZoomOutIcon'
+import AppOptimizedIcon from './AppOptimizedIcon'
export default {
AddIcon,
@@ -225,12 +226,13 @@ export default {
AppConfigurationIcon,
AppDetailsIcon,
AppEditIcon,
- AppIcon,
AppEmptyIcon,
+ AppIcon,
+ ApplicationTypeIcon,
AppListIcon,
AppMissingIcon,
+ AppOptimizedIcon,
AppSettingsIcon,
- ApplicationTypeIcon,
AppWorkspace,
ArrowDownFullIcon,
ArrowDownIcon,
diff --git a/src/stories/icons/Icons.stories.jsx b/src/stories/icons/Icons.stories.jsx
index 9c5f7ec4..c4183d59 100644
--- a/src/stories/icons/Icons.stories.jsx
+++ b/src/stories/icons/Icons.stories.jsx
@@ -9,6 +9,7 @@ import CollapseIcon from '../../components/icons/CollapseIcon'
import ExpandIcon from '../../components/icons/ExpandIcon'
import EnlargeIcon from '../../components/icons/EnlargeIcon'
import { COLORS_ICON } from '../../components/constants'
+import AppOptimizedIcon from '../../components/icons/AppOptimizedIcon'
const divStyle = {
display: 'flex',
@@ -106,3 +107,6 @@ Collapse.args = {}
export const Enlarge = EnlargeIcon.bind({})
Enlarge.args = {}
+
+export const AppOptimized = AppOptimizedIcon.bind({})
+AppOptimized.args = {}