diff --git a/frontend/packages/process-editor/img/ConfirmationTask.svg b/frontend/packages/process-editor/img/ConfirmationTask.svg
new file mode 100644
index 00000000000..7f6e45f5466
--- /dev/null
+++ b/frontend/packages/process-editor/img/ConfirmationTask.svg
@@ -0,0 +1,5 @@
+
diff --git a/frontend/packages/process-editor/img/DataTask.svg b/frontend/packages/process-editor/img/DataTask.svg
new file mode 100644
index 00000000000..de0e0897a6a
--- /dev/null
+++ b/frontend/packages/process-editor/img/DataTask.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/packages/process-editor/img/FeedbackTask.svg b/frontend/packages/process-editor/img/FeedbackTask.svg
new file mode 100644
index 00000000000..af1a896b68f
--- /dev/null
+++ b/frontend/packages/process-editor/img/FeedbackTask.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/packages/process-editor/img/PaymentTask.svg b/frontend/packages/process-editor/img/PaymentTask.svg
new file mode 100644
index 00000000000..2b7d3cc0831
--- /dev/null
+++ b/frontend/packages/process-editor/img/PaymentTask.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/packages/process-editor/img/SignTask.svg b/frontend/packages/process-editor/img/SignTask.svg
new file mode 100644
index 00000000000..ba6fe324e73
--- /dev/null
+++ b/frontend/packages/process-editor/img/SignTask.svg
@@ -0,0 +1,6 @@
+
diff --git a/frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js b/frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js
index 3d99b882af7..ea04760e6ca 100644
--- a/frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js
+++ b/frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js
@@ -1,9 +1,4 @@
-const supportedEntries = [
- 'create.exclusive-gateway',
- 'create.start-event',
- 'create.end-event',
- 'create.task',
-];
+const supportedEntries = ['create.exclusive-gateway', 'create.start-event', 'create.end-event'];
class SupportedPaletteProvider {
constructor(bpmnFactory, create, elementFactory, palette, translate, modeling) {
@@ -87,7 +82,7 @@ class SupportedPaletteProvider {
const customEntries = {
'create.altinn-data-task': {
group: 'activity',
- className: 'bpmn-icon-task',
+ className: 'bpmn-icon-task-generic bpmn-icon-data-task',
title: translate('Create Altinn Data Task'),
action: {
dragstart: createCustomTask('data'),
@@ -96,7 +91,7 @@ class SupportedPaletteProvider {
'create.altinn-confirmation-task': {
group: 'activity',
title: translate('Create Altinn Confirm Task'),
- className: 'bpmn-icon-task',
+ className: 'bpmn-icon-task-generic bpmn-icon-confirmation-task',
action: {
dragstart: createCustomTask('confirmation'),
},
@@ -104,14 +99,14 @@ class SupportedPaletteProvider {
'create.altinn-feedback-task': {
group: 'activity',
title: translate('Create Altinn Feedback Task'),
- className: 'bpmn-icon-task',
+ className: 'bpmn-icon-task-generic bpmn-icon-feedback-task',
action: {
dragstart: createCustomTask('feedback'),
},
},
'create.altinn-signing-task': {
group: 'activity',
- className: 'bpmn-icon-task',
+ className: 'bpmn-icon-task-generic bpmn-icon-signing-task',
title: translate('Create Altinn signing Task'),
action: {
dragstart: createCustomSigningTask(),
diff --git a/frontend/packages/process-editor/src/components/Canvas/Canvas.module.css b/frontend/packages/process-editor/src/components/Canvas/Canvas.module.css
index cbc6b49fdc0..4ad93267683 100644
--- a/frontend/packages/process-editor/src/components/Canvas/Canvas.module.css
+++ b/frontend/packages/process-editor/src/components/Canvas/Canvas.module.css
@@ -3,6 +3,11 @@
box-sizing: border-box;
}
+.canvasContainer {
+ height: 100vh;
+ --svg-data-task-icon: url('data:image/svg+xml,');
+}
+
.canvasMenuContainer {
composes: container;
justify-content: space-between;
@@ -15,7 +20,35 @@
font-weight: 500;
}
-.alertContainer {
+.alertContainer {
composes: container;
max-width: 780px;
-}
\ No newline at end of file
+}
+
+div[class*='bpmn-icon-task-generic'] {
+ background-color: black;
+}
+
+div[class*='bpmn-icon-task-generic']:hover {
+ background-color: #0086e6;
+}
+
+div[class*='bpmn-icon-data-task'] {
+ -webkit-mask: url('../../../img/DataTask.svg') 0 0 /46px 46px;
+ mask: url('../../../img/DataTask.svg') 0 0 /46px 46px;
+}
+
+div[class*='bpmn-icon-confirmation-task'] {
+ -webkit-mask: url('../../../img/ConfirmationTask.svg') 0 0/46px 46px;
+ mask: url('../../../img/ConfirmationTask.svg') 0 0/46px 46px;
+}
+
+div[class*='bpmn-icon-feedback-task'] {
+ -webkit-mask: url('../../../img/FeedbackTask.svg') 0 0/46px 46px;
+ mask: url('../../../img/FeedbackTask.svg') 0 0/46px 46px;
+}
+
+div[class*='bpmn-icon-signing-task'] {
+ -webkit-mask: url('../../../img/SignTask.svg') 0 0/46px 46px;
+ mask: url('../../../img/SignTask.svg') 0 0/46px 46px;
+}
diff --git a/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx b/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx
index e663aa644ed..2f7158670f4 100644
--- a/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx
+++ b/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx
@@ -87,7 +87,7 @@ export const Viewer = (): JSX.Element => {
const Editor = (): JSX.Element => {
const { canvasRef } = useBpmnEditor();
- return ;
+ return ;
};
type CanvasActionsProps = {