@processmaker/modeler 1.30.3 → 1.32.0

package/src/assets/toolpanel/signal-start-event.svg

@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="13" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
+    <path d="M12.567 4.75C12.7595 4.41667 13.2406 4.41667 13.433 4.75L21.2273 18.25C21.4197 18.5833 21.1792 19 20.7943 19H5.20581C4.82091 19 4.58034 18.5833 4.77279 18.25L12.567 4.75Z" stroke="#00875A" fill="none" />
+</svg>

package/src/assets/toolpanel/start-event.svg

@@ -1,19 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/start-event</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <circle id="path-1" cx="29" cy="17" r="11"></circle>
-    </defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-18.000000, -175.000000)">
-            <g id="6" transform="translate(0.000000, 169.000000)">
-                <g id="icons/processbuilder/start-event">
-                    <use fill="#EDFFFC" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <circle stroke="#00BF9C" stroke-width="1" cx="29" cy="17" r="10.5"></circle>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="13" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
+</svg>

package/src/assets/toolpanel/sub-task.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5L21 1.5C21.8284 1.5 22.5 2.17157 22.5 3L22.5 21C22.5 21.8284 21.8284 22.5 21 22.5L3 22.5C2.17157 22.5 1.5 21.8284 1.5 21L1.5 3ZM-1.31134e-07 21C-5.87108e-08 22.6569 1.34315 24 3 24L21 24C22.6569 24 24 22.6569 24 21L24 3C24 1.34314 22.6569 -9.90363e-07 21 -9.17939e-07L3 -1.31134e-07C1.34314 -5.87108e-08 -9.90363e-07 1.34315 -9.17939e-07 3L-1.31134e-07 21Z" />
+<path d="M20.6429 9.71875H14.5357V4.375C14.5357 3.71928 13.928 3.1875 13.1786 3.1875H11.8214C11.072 3.1875 10.4643 3.71928 10.4643 4.375V9.71875H4.35714C3.60775 9.71875 3 10.2505 3 10.9062V12.0938C3 12.7495 3.60775 13.2812 4.35714 13.2812H10.4643V18.625C10.4643 19.2807 11.072 19.8125 11.8214 19.8125H13.1786C13.928 19.8125 14.5357 19.2807 14.5357 18.625V13.2812H20.6429C21.3923 13.2812 22 12.7495 22 12.0938V10.9062C22 10.2505 21.3923 9.71875 20.6429 9.71875Z" />
+</svg>

package/src/assets/toolpanel/task.svg

@@ -1,14 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="27px" height="18px" viewBox="0 0 27 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/task</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-16.000000, -12.000000)" stroke="#788793">
-            <g id="1" transform="translate(0.000000, 4.000000)">
-                <rect id="icons/processbuilder/task" x="16.5" y="8.5" width="25.3076923" height="17" rx="2"></rect>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5L21 1.5C21.8284 1.5 22.5 2.17157 22.5 3L22.5 21C22.5 21.8284 21.8284 22.5 21 22.5L3 22.5C2.17157 22.5 1.5 21.8284 1.5 21L1.5 3ZM-1.31134e-07 21C-5.87108e-08 22.6569 1.34315 24 3 24L21 24C22.6569 24 24 22.6569 24 21L24 3C24 1.34314 22.6569 -9.90363e-07 21 -9.17939e-07L3 -1.31134e-07C1.34314 -5.87108e-08 -9.90363e-07 1.34315 -9.17939e-07 3L-1.31134e-07 21Z" />
+</svg>

package/src/assets/toolpanel/terminate-end-event.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14" cy="14" r="13" fill="#D11401" fill-opacity="0.25" stroke="#D11401" stroke-width="2"/>
+<circle cx="13.9997" cy="13.9999" r="8.76471" fill="#D11401" stroke="#D11401" stroke-width="2"/>
+</svg>

package/src/assets/toolpanel/text-annotation.svg

@@ -1,17 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="31px" height="18px" viewBox="0 0 31 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/text-annotation</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-14.000000, -573.000000)" fill="#788793">
-            <g id="18" transform="translate(0.000000, 565.000000)">
-                <g id="icons/processbuilder/text-annotation" transform="translate(14.000000, 7.000000)">
-                    <path d="M2.945435,2.96366812 C3.4877712,2.96366812 3.92733623,2.52423743 3.92733623,1.98190123 C3.92733623,1.43956503 3.48790554,1 2.945435,1 L0.981901229,1 C0.439565032,1 0,1.43956503 0,1.98190123 L0,18.0183675 C0,18.5603006 0.439430691,19 0.981901229,19 L2.945435,19 C3.4877712,19 3.92733623,18.5605693 3.92733623,18.0183675 C3.92733623,17.4760313 3.48790554,17.0363319 2.945435,17.0363319 L1.96366812,17.0363319 L1.96366812,2.96366812 L2.945435,2.96366812 Z" id="Shape" fill-rule="nonzero"></path>
-                    <path d="M8.640625,15 L7.47851562,15 L7.47851562,6.03808594 L4.31347656,6.03808594 L4.31347656,5.00585938 L11.8056641,5.00585938 L11.8056641,6.03808594 L8.640625,6.03808594 L8.640625,15 Z M15.3261719,15.1367188 C14.2187445,15.1367188 13.3448925,14.7994825 12.7045898,14.125 C12.0642872,13.4505175 11.7441406,12.5140034 11.7441406,11.3154297 C11.7441406,10.1077414 12.0415009,9.14844105 12.6362305,8.4375 C13.23096,7.72655895 14.0296174,7.37109375 15.0322266,7.37109375 C15.9710333,7.37109375 16.7138645,7.67984717 17.2607422,8.29736328 C17.8076199,8.91487939 18.0810547,9.72948713 18.0810547,10.7412109 L18.0810547,11.4589844 L12.9199219,11.4589844 C12.9427084,12.3385461 13.1648742,13.0061826 13.5864258,13.4619141 C14.0079774,13.9176455 14.6015587,14.1455078 15.3671875,14.1455078 C16.1738322,14.1455078 16.9713502,13.9768897 17.7597656,13.6396484 L17.7597656,14.6513672 C17.358722,14.8245451 16.9793312,14.9487301 16.621582,15.0239258 C16.2638328,15.0991215 15.8320338,15.1367188 15.3261719,15.1367188 Z M15.0185547,8.32128906 C14.4169892,8.32128906 13.937339,8.51725064 13.5795898,8.90917969 C13.2218407,9.30110873 13.011068,9.84342102 12.9472656,10.5361328 L16.8642578,10.5361328 C16.8642578,9.82063444 16.7047542,9.2726256 16.3857422,8.89208984 C16.0667302,8.51155409 15.6110056,8.32128906 15.0185547,8.32128906 Z M21.5400391,11.1650391 L18.9355469,7.5078125 L20.2275391,7.5078125 L22.203125,10.3789062 L24.171875,7.5078125 L25.4501953,7.5078125 L22.8457031,11.1650391 L25.5869141,15 L24.3017578,15 L22.203125,11.9648438 L20.0839844,15 L18.7988281,15 L21.5400391,11.1650391 Z M29.4902344,14.2001953 C29.6907562,14.2001953 29.8844392,14.1853843 30.0712891,14.1557617 C30.258139,14.1261392 30.4062495,14.0953778 30.515625,14.0634766 L30.515625,14.9316406 C30.3925775,14.9908857 30.211427,15.0398761 29.972168,15.0786133 C29.732909,15.1173505 29.5175791,15.1367188 29.3261719,15.1367188 C27.8769459,15.1367188 27.1523438,14.37338 27.1523438,12.8466797 L27.1523438,8.38964844 L26.0791016,8.38964844 L26.0791016,7.84277344 L27.1523438,7.37109375 L27.6308594,5.77148438 L28.2871094,5.77148438 L28.2871094,7.5078125 L30.4609375,7.5078125 L30.4609375,8.38964844 L28.2871094,8.38964844 L28.2871094,12.7988281 C28.2871094,13.2500023 28.3942047,13.596353 28.6083984,13.8378906 C28.8225922,14.0794283 29.1165346,14.2001953 29.4902344,14.2001953 Z" id="Text"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2.31372C5 2.03758 5.22386 1.81372 5.5 1.81372C6.36189 1.81372 7.07254 2.10072 7.56057 2.3796C7.73384 2.47861 7.88124 2.57782 8 2.66526C8.11876 2.57782 8.26616 2.47861 8.43943 2.3796C8.92746 2.10072 9.63811 1.81372 10.5 1.81372C10.7761 1.81372 11 2.03758 11 2.31372C11 2.58986 10.7761 2.81372 10.5 2.81372C9.86189 2.81372 9.32254 3.02672 8.93557 3.24784C8.74814 3.35495 8.60054 3.46169 8.5 3.54156V7.81372H9C9.27614 7.81372 9.5 8.03758 9.5 8.31372C9.5 8.58986 9.27614 8.81372 9 8.81372H8.5V13.0859C8.60054 13.1658 8.74814 13.2725 8.93557 13.3796C9.32254 13.6007 9.86189 13.8137 10.5 13.8137C10.7761 13.8137 11 14.0376 11 14.3137C11 14.5899 10.7761 14.8137 10.5 14.8137C9.63811 14.8137 8.92746 14.5267 8.43943 14.2478C8.26616 14.1488 8.11876 14.0496 8 13.9622C7.88124 14.0496 7.73384 14.1488 7.56057 14.2478C7.07254 14.5267 6.36189 14.8137 5.5 14.8137C5.22386 14.8137 5 14.5899 5 14.3137C5 14.0376 5.22386 13.8137 5.5 13.8137C6.13811 13.8137 6.67746 13.6007 7.06443 13.3796C7.25186 13.2725 7.39946 13.1658 7.5 13.0859V8.81372H7C6.72386 8.81372 6.5 8.58986 6.5 8.31372C6.5 8.03758 6.72386 7.81372 7 7.81372H7.5V3.54156C7.39946 3.46169 7.25186 3.35495 7.06443 3.24784C6.67746 3.02672 6.13811 2.81372 5.5 2.81372C5.22386 2.81372 5 2.58986 5 2.31372ZM8.35219 3.66864C8.35196 3.66885 8.35197 3.66884 8.35222 3.66861ZM7.64781 12.9588C7.64804 12.9586 7.64803 12.9586 7.64778 12.9588L7.64781 12.9588Z" />
+</svg>

package/src/assets/toolpanel/timer-start-event.svg

@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
+<path d="M13 6.21875C9.25391 6.21875 6.21875 9.25391 6.21875 13C6.21875 16.7461 9.25391 19.7812 13 19.7812C16.7461 19.7812 19.7812 16.7461 19.7812 13C19.7812 9.25391 16.7461 6.21875 13 6.21875ZM15.529 14.7773L14.9821 15.4609C14.9463 15.5058 14.9019 15.5432 14.8516 15.5709C14.8012 15.5986 14.7459 15.6161 14.6888 15.6225C14.6317 15.6288 14.5739 15.6239 14.5187 15.6079C14.4636 15.5919 14.4121 15.5652 14.3672 15.5293L12.5352 14.1698C12.4071 14.0673 12.3038 13.9373 12.2328 13.7895C12.1618 13.6417 12.125 13.4798 12.125 13.3158V9.0625C12.125 8.94647 12.1711 8.83519 12.2531 8.75314C12.3352 8.67109 12.4465 8.625 12.5625 8.625H13.4375C13.5535 8.625 13.6648 8.67109 13.7469 8.75314C13.8289 8.83519 13.875 8.94647 13.875 9.0625V13L15.4609 14.1621C15.5058 14.198 15.5432 14.2424 15.5709 14.2928C15.5986 14.3431 15.6162 14.3985 15.6225 14.4556C15.6288 14.5128 15.6238 14.5706 15.6078 14.6258C15.5917 14.681 15.565 14.7325 15.529 14.7773Z" fill="#00875A"/>
+</svg>

package/src/assets/topRail/issue-close.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.693905 5.53599L6.00816 0.222004C6.26437 -0.0342065 6.68 -0.0342065 6.93621 0.222004L7.55609 0.841887C7.81203 1.09782 7.8123 1.51236 7.55719 1.76884L3.34543 6.00001L7.55691 10.2315C7.8123 10.4879 7.81176 10.9025 7.55582 11.1584L6.93594 11.7783C6.67973 12.0345 6.2641 12.0345 6.00789 11.7783L0.693905 6.46404C0.437694 6.20782 0.437694 5.7922 0.693905 5.53599Z" />
+</svg>

package/src/assets/topRail/issue-item.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 0.1875C2.78906 0.1875 0.1875 2.78906 0.1875 6C0.1875 9.21094 2.78906 11.8125 6 11.8125C9.21094 11.8125 11.8125 9.21094 11.8125 6C11.8125 2.78906 9.21094 0.1875 6 0.1875ZM8.85 7.52578C8.96016 7.63594 8.96016 7.81406 8.85 7.92422L7.92188 8.85C7.81172 8.96016 7.63359 8.96016 7.52344 8.85L6 7.3125L4.47422 8.85C4.36406 8.96016 4.18594 8.96016 4.07578 8.85L3.15 7.92188C3.03984 7.81172 3.03984 7.63359 3.15 7.52344L4.6875 6L3.15 4.47422C3.03984 4.36406 3.03984 4.18594 3.15 4.07578L4.07812 3.14766C4.18828 3.0375 4.36641 3.0375 4.47656 3.14766L6 4.6875L7.52578 3.15C7.63594 3.03984 7.81406 3.03984 7.92422 3.15L8.85234 4.07812C8.9625 4.18828 8.9625 4.36641 8.85234 4.47656L7.3125 6L8.85 7.52578Z" />
+</svg>

package/src/assets/topRail/issue-open.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.96966 7.43098L0.896437 2.11689C0.603531 1.8606 0.603531 1.44508 0.896437 1.18881L1.60478 0.569014C1.89719 0.313159 2.37109 0.312666 2.66419 0.56792L7.5 4.77943L12.3358 0.56792C12.6289 0.312666 13.1028 0.313159 13.3952 0.569014L14.1035 1.18881C14.3964 1.44511 14.3964 1.86062 14.1035 2.11689L8.03034 7.43098C7.73744 7.68725 7.26256 7.68725 6.96966 7.43098Z" />
+</svg>
+

package/src/assets/topRail/validate-close.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.81873 8C1.81873 4.39289 4.74287 1.46875 8.34998 1.46875C9.54059 1.46875 10.6551 1.78679 11.6152 2.34215C11.899 2.50635 12.2622 2.40935 12.4264 2.1255C12.5906 1.84166 12.4936 1.47844 12.2098 1.31424C11.0739 0.657144 9.75491 0.28125 8.34998 0.28125C4.08703 0.28125 0.631226 3.73705 0.631226 8C0.631226 12.2629 4.08703 15.7188 8.34998 15.7188C12.6129 15.7188 16.0687 12.2629 16.0687 8C16.0687 7.67208 15.8029 7.40625 15.475 7.40625C15.1471 7.40625 14.8812 7.67208 14.8812 8C14.8812 11.6071 11.9571 14.5312 8.34998 14.5312C4.74287 14.5312 1.81873 11.6071 1.81873 8Z" />
+    <path d="M17.0823 2.48234C17.3142 2.25047 17.3142 1.87453 17.0823 1.64266C16.8504 1.41078 16.4745 1.41078 16.2426 1.64266L8.34998 9.53531L5.20732 6.39266C4.97545 6.16078 4.5995 6.16078 4.36763 6.39266C4.13576 6.62453 4.13576 7.00047 4.36763 7.23234L7.93013 10.7948C8.162 11.0267 8.53795 11.0267 8.76982 10.7948L17.0823 2.48234Z" />
+</svg>

package/src/assets/topRail/validate-open.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.80589 9C1.80589 13.2502 5.25137 16.6957 9.50156 16.6957C13.7517 16.6957 17.1972 13.2502 17.1972 9C17.1972 4.75024 13.7524 1.30498 9.50272 1.30435C9.14254 1.30429 8.85058 1.01226 8.85063 0.652077C8.85069 0.291891 9.14273 -5.34573e-05 9.50291 7.34216e-09C14.4729 0.000737734 18.5016 4.02995 18.5016 9C18.5016 13.9706 14.4721 18 9.50156 18C4.53099 18 0.501541 13.9706 0.501541 9C0.501541 7.11913 1.08174 5.32928 2.12769 3.83814L1.38144 3.18945C0.988324 2.84772 1.13471 2.20576 1.63712 2.06822L4.47212 1.29212C4.92098 1.16925 5.3504 1.54254 5.29118 2.00413L4.9172 4.91955C4.85093 5.43621 4.23559 5.67051 3.84247 5.32877L3.11835 4.6993C2.27288 5.95119 1.80589 7.43811 1.80589 9Z" />
+    <path d="M12.7244 5.87213C13.0539 5.54262 13.5881 5.54262 13.9176 5.87213C14.2431 6.19759 14.2471 6.72279 13.9296 7.05316L9.43837 12.6672C9.43189 12.6753 9.42496 12.683 9.41763 12.6904C9.08812 13.0199 8.55389 13.0199 8.22438 12.6904L5.24713 9.71312C4.91762 9.38361 4.91762 8.84938 5.24713 8.51988C5.57663 8.19037 6.11087 8.19037 6.44037 8.51988L8.79558 10.8751L12.702 5.89737C12.709 5.88851 12.7164 5.88009 12.7244 5.87213Z" />
+</svg>

package/src/assets/trash-alt-solid.svg

@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-    <path fill="#fff"
-          d="M0 84V56c0-13.3 10.7-24 24-24h112l9.4-18.7c4-8.2 12.3-13.3 21.4-13.3h114.3c9.1 0 17.4 5.1 21.5 13.3L312 32h112c13.3 0 24 10.7 24 24v28c0 6.6-5.4 12-12 12H12C5.4 96 0 90.6 0 84zm416 56v324c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V140c0-6.6 5.4-12 12-12h360c6.6 0 12 5.4 12 12zm-272 68c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208z"/>
-</svg>
+<svg aria-hidden="true" data-prefix="fas" data-icon="trash-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash-alt fa-w-14 fa-7x"><path fill="currentColor" d="M0 84V56c0-13.3 10.7-24 24-24h112l9.4-18.7c4-8.2 12.3-13.3 21.4-13.3h114.3c9.1 0 17.4 5.1 21.5 13.3L312 32h112c13.3 0 24 10.7 24 24v28c0 6.6-5.4 12-12 12H12C5.4 96 0 90.6 0 84zm416 56v324c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V140c0-6.6 5.4-12 12-12h360c6.6 0 12 5.4 12 12zm-272 68c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208z" class=""></path></svg>

package/src/components/crown/crownButtons/addLaneAboveButton.vue

@@ -5,16 +5,15 @@
     v-on="$listeners"
     :width="25"
   >
-    <img
-      :src="laneAboveIcon"
-      aria-hidden="true"
-    >
+    <font-awesome-icon :icon="['fpm', 'fa-lane-above']"/>
   </crown-button>
 </template>
 
 <script>
 import laneAboveIcon from '@/assets/lane-above.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faLaneAbove } from './icons';
 
 export default {
   components: { CrownButton },
@@ -23,5 +22,8 @@ export default {
       laneAboveIcon,
     };
   },
+  created() {
+    library.add(faLaneAbove);
+  },
 };
 </script>

package/src/components/crown/crownButtons/addLaneBelowButton.vue

@@ -5,16 +5,15 @@
     v-on="$listeners"
     :width="25"
   >
-    <img
-      :src="laneBelowIcon"
-      aria-hidden="true"
-    >
+    <font-awesome-icon :icon="['fpm', 'fa-lane-below']"/>
   </crown-button>
 </template>
 
 <script>
 import laneBelowIcon from '@/assets/lane-below.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faLaneBelow } from './icons';
 
 export default {
   components: { CrownButton },
@@ -23,5 +22,8 @@ export default {
       laneBelowIcon,
     };
   },
+  created() {
+    library.add(faLaneBelow);
+  },
 };
 </script>

package/src/components/crown/crownButtons/associationFlowButton.vue

@@ -20,8 +20,6 @@ import connectIcon from '@/assets/connect-artifacts.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
 import { direction } from '@/components/nodes/association/associationConfig';
 import Node from '@/components/nodes/node';
-import store from '@/store';
-import { V } from 'jointjs';
 
 export default {
   components: { CrownButton },
@@ -31,23 +29,12 @@ export default {
       connectIcon,
     };
   },
-  computed: {
-    paper: () => store.getters.paper,
-  },
   methods: {
     addAssociation(cellView, evt, x, y) {
       this.$emit('toggle-crown-state', false);
-      const { clientX, clientY } = cellView;
-      let point = null;
-      if (cellView){
-        point = V(this.paper.viewport).toLocalPoint(clientX, clientY);
-      }
       const associationLink = this.moddle.create('bpmn:Association', {
         sourceRef: this.shape.component.node.definition,
-        targetRef: {
-          x: x ? x : point.x,
-          y: y ? y : point.y,
-        },
+        targetRef: { x, y },
         associationDirection: direction.none,
       });
 

package/src/components/crown/crownButtons/cloneButton.vue

@@ -5,14 +5,9 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
     aria-label="Clone Element"
     data-test="clone-button"
-    role="menuitem"
     @click="cloneElement"
   >
-    <img
-      :src="cloneIcon"
-      aria-hidden="true"
-      alt="Clone element icon"
-    >
+    <i class="fas fa-paste"/>
   </crown-button>
   
 </template>

package/src/components/crown/crownButtons/copyButton.vue

@@ -8,10 +8,7 @@
     role="menuitem"
     @click="copyElement"
   >
-    <img
-      :src="copyIcon"
-      aria-hidden="true"
-    >
+    <i class="fas fa-clipboard"/>
   </crown-button>
 
 </template>

package/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue

@@ -4,12 +4,14 @@
       id="dropdown-button"
       aria-label="Select a boundary event"
       v-on="$listeners"
-      :src="boundaryEventIcon"
       @click="$emit('toggle-dropdown-state', !dropdownOpen)"
       data-test="boundary-event-dropdown"
       v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
       :title="$t('Boundary Events')"
-    />
+      role="menuitem"
+    >
+      <font-awesome-icon :icon="['fpm', 'fa-boundary-event']"/>
+    </crown-button>
 
     <ul class="element-list" v-if="dropdownOpen" role="list">
       <li
@@ -41,6 +43,8 @@ import { getEmptyBoundaryEventPositionsForShape } from '@/portsUtils';
 import { canAddBoundaryEventToTarget } from '@/boundaryEventValidation';
 import store from '@/store';
 import Node from '@/components/nodes/node';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faBoundaryEvent } from './icons';
 
 export default {
   name: 'CrownBoundaryEventDropdown',
@@ -93,6 +97,7 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
+    library.add(faBoundaryEvent);
   },
 };
 </script>

package/src/components/crown/crownButtons/crownButton.vue

@@ -3,13 +3,14 @@
     v-on="$listeners"
     :id="id"
     :aria-label="ariaLabel"
-    class="btn"
+    class="crown-button"
   >
     <slot>
       <img
         :src="src"
         width="width"
         height="height"
+        class="crown-icon"
       >
     </slot>
   </button>
@@ -33,19 +34,43 @@ export default {
 };
 </script>
 
-<style scoped>
-.btn {
-  border: none;
-  padding: 0;
-  margin-top: 0;
+<style lang="scss" scoped>
+.crown-button {
+  border:none;
   display: flex;
+  background-color: $primary-white;
+  border-radius: 4px;
+  color: $crown-icon-neutral;
+  width: 35px;
+  height: 35px;
+  font-size: 20px;
+  padding: 4px;
 }
+.crown-button:hover {
+  background-color: $crown-icon-hover-bg;
+  color: $crown-icon-neutral;
+}
+.crown-button:active {
+  background-color: $cronw-icon-active-bg;
+  color: $crown-icon-active;
+}
+
+.crown-button:focus {
+  background-color: #DEEBFF;
+  color: $crown-icon-active;
+}
+
 img {
-  margin: 0px 10px;
-  height: 15px;
+  margin: 0px 5px;
+  height: 20px;
+  width: 20px;
+  padding:2px;
+  fill: #5faaee;
+}
+.crown-button svg {
+  margin:auto;
 }
-i {
-  margin: 0px 10px;
-  font-size: 15px;
+.crown-button i {
+  margin:auto;
 }
 </style>

package/src/components/crown/crownButtons/crownColorDropdown.vue

@@ -8,7 +8,7 @@
       @click="$emit('toggle-dropdown-state', !dropdownOpen)"
       data-test="picker-dropdown-button"
     >
-      <i class="fas fa-palette cog-container--button"/>
+      <i class="fas fa-palette "/>
     </crown-button>
 
     <div class="element-list color-list" v-if="dropdownOpen">

package/src/components/crown/crownButtons/crownDropdown.scss

@@ -8,13 +8,6 @@ $crown-left-chevron: 0.3rem;
 .cog-container {
   position: relative;
   display: flex;
-
-  &--button {
-    background: none;
-    border: none;
-    color: $primary-white;
-    height: 15px;
-  }
 }
 
 .element-list {
@@ -23,8 +16,10 @@ $crown-left-chevron: 0.3rem;
   top: $element-list-top;
   left: $element-list-left;
   border-radius: 5px;
-  background-color: $primary-color;
+  background-color: $primary-white;
   padding: 0;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+
 
   &::after {
     @include chevron($element-list-top-chevron, $element-list-left-chevron);
@@ -37,7 +32,7 @@ $crown-left-chevron: 0.3rem;
       background: none;
       padding: 0.25rem 0.85rem;
       border: none;
-      color: $primary-white;
+      color: $primary-black;
       font-size: 0.85rem;
 
       &:disabled {

package/src/components/crown/crownButtons/crownTaskDropdown.vue

@@ -7,7 +7,7 @@
       v-on="$listeners"
       @click="$emit('toggle-dropdown-state', !dropdownOpen)"
     >
-      <i class="fas fa-cog cog-container--button" />
+      <i class="fas fa-cog" />
     </crown-button>
 
     <ul class="element-list" v-if="dropdownOpen" role="list">

package/src/components/crown/crownButtons/deleteButton.vue

@@ -7,13 +7,7 @@
     @click="isPoolLane ? removePoolLaneShape() : removeShape()"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
-    <img
-      :src="trashIcon"
-      aria-hidden="true"
-      data-prefix="fas"
-      data-icon="trash-alt"
-      class="fa-trash-alt trash-icon"
-    >
+    <i class="fas fa-trash-alt cog-container--button"/>
   </crown-button>
 </template>
 

package/src/components/crown/crownButtons/genericFlowButton.vue

@@ -8,10 +8,7 @@
     role="menuitem"
     @click="addSequence"
   >
-    <img
-      :src="sequenceFlow"
-      aria-hidden="true"
-    >
+    <font-awesome-icon :icon="['fpm', 'fa-connect-elements']"/>
   </crown-button>
 </template>
 <script>
@@ -21,6 +18,8 @@ import Node from '@/components/nodes/node';
 import { id as genericFlowId } from '@/components/nodes/genericFlow/config';
 import store from '@/store';
 import { V } from 'jointjs';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faConnectElements } from './icons';
 
 // Don't show the magic flow button on:
 const dontShowOn = [
@@ -84,6 +83,7 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
+    library.add(faConnectElements);
   },
 };
 </script>

package/src/components/crown/crownButtons/icons/faAlignBottom.js

@@ -0,0 +1,11 @@
+export const faAlignBottom = {
+  prefix: 'fpm',
+  iconName: 'fa-align-bottom',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M6.637 1.076a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V1.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+  ],
+};

package/src/components/crown/crownButtons/icons/faAlignLeft.js

@@ -0,0 +1,11 @@
+export const faAlignLeft = {
+  prefix: 'fpm',
+  iconName: 'fa-align-left',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M6.637 1.076a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V1.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+  ],
+};

package/src/components/crown/crownButtons/icons/faAlignRight.js

@@ -0,0 +1,11 @@
+export const faAlignRight = {
+  prefix: 'fpm',
+  iconName: 'fa-align-right',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M14.28 1.058a.433.433 0 0 0-.23.235c-.047.103-.049.359-.049 6.707 0 6.389.002 6.604.05 6.71.114.251.441.36.686.229a.707.707 0 0 0 .243-.293c.026-.095.026-13.197 0-13.292a.625.625 0 0 0-.279-.305.602.602 0 0 0-.421.009M1.734 6.043a.994.994 0 0 0-.718.796c-.039.211-.039 2.111 0 2.323.06.328.277.609.584.755l.147.07h10.506l.147-.07c.307-.146.524-.427.584-.755.039-.212.039-2.112 0-2.323a1 1 0 0 0-.445-.675c-.271-.174.077-.164-5.551-.162-4.405.001-5.128.007-5.254.041',
+  ],
+};

package/src/components/crown/crownButtons/icons/faAlignTop.js

@@ -0,0 +1,11 @@
+export const faAlignTop = {
+  prefix: 'fpm',
+  iconName: 'fa-align-top',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M1.451 1.008c-.134.02-.177.039-.265.116a.717.717 0 0 0-.125.139.507.507 0 0 0 .229.686c.106.048.321.05 6.71.05s6.604-.002 6.71-.05c.06-.027.14-.09.178-.14.066-.087.131-.29.112-.352a2.37 2.37 0 0 1-.025-.103c-.017-.08-.15-.244-.239-.295-.043-.025-1.554-.035-6.645-.046-3.623-.007-6.611-.01-6.64-.005m5.186 2.068a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V3.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062',
+  ],
+};

package/src/components/crown/crownButtons/icons/faBoundaryEvent.js

@@ -0,0 +1,11 @@
+export const faBoundaryEvent = {
+  prefix: 'fpm',
+  iconName: 'fa-boundary-event',
+  icon: [
+    112,
+    112,
+    [],
+    'e001',
+    'M51.739 2.056c-13.026.848-25.131 6.341-34.43 15.625C10.84 24.139 6.603 30.987 3.72 39.642.81 48.38.051 56.948 1.392 65.92c.932 6.232 3.501 13.807 6.441 18.991 8.903 15.7 23.772 25.701 41.487 27.903 2.517.312 9.393.312 11.911 0 17.703-2.201 32.617-12.231 41.488-27.903 2.943-5.2 5.508-12.763 6.439-18.991 1.698-11.359-.064-22.783-5.13-33.257-4.913-10.156-13.314-18.932-23.21-24.247-7.159-3.845-14.191-5.854-22.286-6.365-3.224-.204-3.584-.204-6.793.005m8.216 4.091c8.319.827 15.946 3.548 22.891 8.165 3.153 2.096 5.414 3.998 8.35 7.021 7.582 7.807 12.34 17.536 14.049 28.731.423 2.764.572 9.015.29 12.1-.962 10.515-4.848 20.143-11.415 28.286-1.857 2.303-5.901 6.293-8.136 8.029a50.9 50.9 0 0 1-23.544 10.144c-3.182.489-11.148.489-14.33 0-5.812-.893-11.669-2.875-16.75-5.668-11.303-6.213-20.134-17.022-24.092-29.49-3.259-10.266-3.259-21.647 0-31.913a51.37 51.37 0 0 1 11.995-20.128c2.834-2.93 5.301-5.008 8.426-7.097a49.964 49.964 0 0 1 22.654-8.169c2.192-.225 7.401-.231 9.612-.011m-9.053 12.099c-20.419 2.322-35.641 19.091-35.641 39.263 0 14.657 8.112 27.984 21.217 34.859 14.221 7.46 31.65 5.768 44.132-4.283 14.219-11.449 18.699-30.977 10.879-47.42-5.522-11.611-16.451-19.808-29.421-22.068-2.55-.444-8.659-.636-11.166-.351m6.979 3.906c1.382.105 3.214.321 4.071.481 12.854 2.394 23.482 11.579 27.55 23.808 4.141 12.449 1.019 26.046-8.153 35.508-5.615 5.792-12.307 9.26-20.584 10.667-2.565.436-8.414.436-10.98 0-11.016-1.872-19.998-7.889-25.586-17.14-5.178-8.573-6.354-19.406-3.15-29.035 4.492-13.506 16.952-23.186 31.248-24.278 2.856-.218 2.85-.218 5.584-.011',
+  ],
+};

package/src/components/crown/crownButtons/icons/faCenterHorizontally.js

@@ -0,0 +1,11 @@
+export const faCenterHorizontally = {
+  prefix: 'fpm',
+  iconName: 'fa-center-horizontally',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M7.73 1.09c-.238.151-.222-.031-.23 2.596l-.008 2.313-2.366.007-2.366.007-.173.084c-.221.106-.386.27-.491.49l-.083.173v2.48l.075.16c.098.21.303.416.509.511l.163.076 2.366.007 2.366.007.008 2.313c.007 2.287.007 2.314.062 2.419.08.152.262.26.438.26a.515.515 0 0 0 .438-.26c.055-.105.055-.132.062-2.419l.008-2.313 2.366-.007 2.366-.007.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16V6.76l-.076-.163a1.13 1.13 0 0 0-.511-.509l-.16-.075-2.366-.007-2.366-.007L8.5 3.686c-.006-2.222-.009-2.317-.058-2.416-.123-.248-.468-.335-.712-.18',
+  ],
+};

package/src/components/crown/crownButtons/icons/faCenterVertically.js

@@ -0,0 +1,11 @@
+export const faCenterVertically = {
+  prefix: 'fpm',
+  iconName: 'fa-center-vertically',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M6.767 2.028a1.044 1.044 0 0 0-.671.559l-.083.173-.007 2.366-.007 2.366-2.313.007-2.313.008-.12.07a.481.481 0 0 0-.169.682.52.52 0 0 0 .183.179c.105.055.132.055 2.419.062l2.313.008.007 2.366.007 2.366.075.16c.098.21.303.416.509.511l.163.076h2.48l.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16.007-2.366.007-2.366 2.313-.008c2.287-.007 2.314-.007 2.419-.062a.497.497 0 0 0 .01-.865l-.116-.066-2.313-.008-2.313-.007-.007-2.366-.007-2.366-.075-.16a1.13 1.13 0 0 0-.509-.511l-.163-.076-1.187-.004c-.652-.003-1.231.006-1.286.019',
+  ],
+};

package/src/components/crown/crownButtons/icons/faConnectElements.js

@@ -0,0 +1,11 @@
+export const faConnectElements = {
+  prefix: 'fpm',
+  iconName: 'fa-connect-elements',
+  icon: [
+    20,
+    20,
+    [],
+    'e002',
+    'M0 2.502v2.501h5.003V3.008h5.004v15.01h5.478V19c0 .54.011.981.024.981.053-.001 2.989-2.477 2.964-2.499a203.517 203.517 0 0 0-2.942-2.429c-.04-.016-.046.116-.046.967v.985h-4.497V1.995H5.003V0H0v2.502m3.99.016v1.504H1.013V1.013H3.99v1.505',
+  ],
+};

package/src/components/crown/crownButtons/icons/faDistributeHorizontally.js

@@ -0,0 +1,11 @@
+export const faDistributeHorizontally = {
+  prefix: 'fpm',
+  iconName: 'fa-distribute-horizontally',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M1.266 1.063a.637.637 0 0 0-.246.292c-.026.094-.026 13.197 0 13.291a.707.707 0 0 0 .243.293.507.507 0 0 0 .686-.229c.048-.106.05-.321.05-6.704.001-7.105.009-6.691-.127-6.841-.133-.148-.445-.2-.606-.102m13.014-.005a.433.433 0 0 0-.23.235c-.047.103-.049.359-.049 6.707 0 6.389.002 6.604.05 6.71.114.251.441.36.686.229a.707.707 0 0 0 .243-.293c.026-.095.026-13.197 0-13.292a.625.625 0 0 0-.279-.305.602.602 0 0 0-.421.009m-7.513.97a1.044 1.044 0 0 0-.671.559l-.083.173v10.48l.075.16c.098.21.303.416.509.511l.163.076h2.48l.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16V2.76l-.075-.16a1.13 1.13 0 0 0-.509-.511l-.163-.076-1.187-.004c-.652-.003-1.231.006-1.286.019',
+  ],
+};

package/src/components/crown/crownButtons/icons/faDistributeVertically.js

@@ -0,0 +1,11 @@
+export const faDistributeVertically = {
+  prefix: 'fpm',
+  iconName: 'fa-distribute-vertically',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M1.293 1.044a.814.814 0 0 0-.233.222c-.13.241-.02.57.23.683.106.048.321.05 6.71.05s6.604-.002 6.71-.05a.507.507 0 0 0 .23-.683.62.62 0 0 0-.255-.224c-.108-.041-13.317-.039-13.392.002m1.474 4.985c-.281.066-.538.28-.671.558l-.083.173v2.48l.076.163c.095.206.301.411.511.509l.16.075h10.48l.16-.075a1.13 1.13 0 0 0 .511-.509l.076-.163V6.76l-.076-.163a1.13 1.13 0 0 0-.511-.509l-.16-.075-5.187-.004c-2.958-.002-5.229.006-5.286.02M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+  ],
+};

package/src/components/crown/crownButtons/icons/faLaneAbove.js

@@ -0,0 +1,11 @@
+export const faLaneAbove = {
+  prefix: 'fpm',
+  iconName: 'fa-lane-above',
+  icon: [
+    26,
+    18,
+    [],
+    'e003',
+    'M0 .997v.996h.997V.997h1.04V0H0v.997M2.99.498v.499h2.037V0H2.99v.498m2.99 0v.499h2.037V0H5.98v.498m3.033 0v.499h1.994V0H9.013v.498m2.99 0v.499h1.994V0h-1.994v.498m2.99 0v.499h1.994V0h-1.994v.498m2.99 0v.499h2.037V0h-2.037v.498m2.99 0v.499h2.037V0h-2.037v.498m2.99 0v.499h1.04v.996H26V0h-2.037v.498M0 3.987v.996h.997V2.99H0v.997m25.003 0v.996H26V2.99h-.997v.997M0 11.982v6.001h26V5.98H0v6.002',
+  ],
+};

package/src/components/crown/crownButtons/icons/faLaneBelow.js

@@ -0,0 +1,11 @@
+export const faLaneBelow = {
+  prefix: 'fpm',
+  iconName: 'fa-lane-below',
+  icon: [
+    26,
+    18,
+    [],
+    'e004',
+    'M0 6.002v6.001h26V0H0v6.002m0 7.995v.996h.997V13H0v.997m25.003 0v.996H26V13h-.997v.997M0 16.987v.996h2.037v-.996H.997v-.997H0v.997m25.003-.499v.499h-1.04v.996H26V15.99h-.997v.498m-22.013.997v.498h2.037v-.996H2.99v.498m2.99 0v.498h2.037v-.996H5.98v.498m3.033 0v.498h1.994v-.996H9.013v.498m2.99 0v.498h1.994v-.996h-1.994v.498m2.99 0v.498h1.994v-.996h-1.994v.498m2.99 0v.498h2.037v-.996h-2.037v.498m2.99 0v.498h2.037v-.996h-2.037v.498',
+  ],
+};