add separate unpin button to pinned shapes (#839)

Co-authored-by: 3ddy <39034386+3ddyy@users.noreply.github.com>

src/css/ingame_hud/pinned_shapes.scss

@@ -19,7 +19,6 @@
         color: #333438;
 
         &.removable {
-            cursor: pointer;
             pointer-events: all;
         }
 
@@ -86,6 +85,28 @@
             }
         }
 
+        > .unpinButton {
+            @include S(width, 8px);
+            @include S(height, 8px);
+            position: absolute;
+            opacity: 0.7;
+            @include S(top, 3px);
+            @include S(left, -7px);
+            @include DarkThemeInvert;
+            @include IncreasedClickArea(2px);
+            transition: opacity 0.12s ease-in-out;
+            z-index: 100;
+
+            &:hover {
+                opacity: 0.8;
+            }
+
+            & {
+                /* @load-async */
+                background: uiResource("icons/pin.png") center center / 95% no-repeat;
+            }
+        }
+
         &.goal,
         &.blueprint {
             .amountLabel::after {

src/js/game/hud/parts/pinned_shapes.js

@@ -217,11 +217,14 @@ export class HUDPinnedShapes extends BaseHUDPart {
 
         let detector = null;
         if (canUnpin) {
+            const unpinButton = document.createElement("button");
+            unpinButton.classList.add("unpinButton");
+            element.appendChild(unpinButton);
             element.classList.add("removable");
-            detector = new ClickDetector(element, {
+            detector = new ClickDetector(unpinButton, {
                 consumeEvents: true,
                 preventDefault: true,
-                targetOnly: false,
+                targetOnly: true,
             });
             detector.click.add(() => this.unpinShape(key));
         } else {