fix(pushbutton): align pins with grid

also change pins color for better contrast on breadboard

Author: AriellaE

src/pushbutton-element.ts

@@ -10,10 +10,10 @@ export class PushbuttonElement extends LitElement {
   @property() label = '';
 
   readonly pinInfo: ElementPin[] = [
-    { name: '1.l', x: 2, y: 9, signals: [] },
-    { name: '2.l', x: 2, y: 36, signals: [] },
-    { name: '1.r', x: 65, y: 9, signals: [] },
-    { name: '2.r', x: 65, y: 36, signals: [] },
+    { name: '1.l', x: 0, y: 13, signals: [] },
+    { name: '2.l', x: 0, y: 32, signals: [] },
+    { name: '1.r', x: 67, y: 13, signals: [] },
+    { name: '2.r', x: 67, y: 32, signals: [] },
   ];
 
   static get styles() {
@@ -69,7 +69,7 @@ export class PushbuttonElement extends LitElement {
         @keyup=${(e: KeyboardEvent) => SPACE_KEYS.includes(e.key) && !e.ctrlKey && this.up()}
       >
         <svg
-          width="18mm"
+          width="17.802mm"
           height="12mm"
           version="1.1"
           viewBox="-3 0 18 12"
@@ -97,18 +97,18 @@ export class PushbuttonElement extends LitElement {
             <circle cx="10.161" cy="10.197" r=".37" />
             <circle cx="1.767" cy="10.197" r=".37" />
           </g>
-          <g fill="#eaeaea">
+          <g fill="#999" stroke-width="1.0154">
             <path
-              d="m-0.3538 1.4672c-0.058299 0-0.10523 0.0469-0.10523 0.10522v0.38698h-2.1504c-0.1166 0-0.21045 0.0938-0.21045 0.21045v0.50721c0 0.1166 0.093855 0.21045 0.21045 0.21045h2.1504v0.40101c0 0.0583 0.046928 0.10528 0.10523 0.10528h0.35723v-1.9266z"
+              d="m12.365 2.426c0.06012 0 0.10849 0.0469 0.1085 0.10522v0.38698h2.2173c0.12023 0 0.217 0.0938 0.217 0.21045v0.50721c0 0.1166-0.09677 0.21045-0.217 0.21045h-2.2173v0.40101c0 0.0583-0.0484 0.10528-0.1085 0.10528h-0.36835v-1.9266z"
             />
             <path
-              d="m-0.35376 8.6067c-0.058299 0-0.10523 0.0469-0.10523 0.10523v0.38697h-2.1504c-0.1166 0-0.21045 0.0939-0.21045 0.21045v0.50721c0 0.1166 0.093855 0.21046 0.21045 0.21046h2.1504v0.401c0 0.0583 0.046928 0.10528 0.10523 0.10528h0.35723v-1.9266z"
+              d="m12.365 7.5c0.06012 0 0.10849 0.0469 0.1085 0.10522v0.38698h2.2173c0.12023 0 0.217 0.0938 0.217 0.21045v0.50721c0 0.1166-0.09677 0.21045-0.217 0.21045h-2.2173v0.40101c0 0.0583-0.0484 0.10528-0.1085 0.10528h-0.36835v-1.9266z"
             />
             <path
-              d="m12.354 1.4672c0.0583 0 0.10522 0.0469 0.10523 0.10522v0.38698h2.1504c0.1166 0 0.21045 0.0938 0.21045 0.21045v0.50721c0 0.1166-0.09385 0.21045-0.21045 0.21045h-2.1504v0.40101c0 0.0583-0.04693 0.10528-0.10523 0.10528h-0.35723v-1.9266z"
+              d="m-0.35085 4.3526c-0.06012 0-0.10849-0.0469-0.1085-0.10522v-0.38698h-2.2173c-0.12023 0-0.217-0.0938-0.217-0.21045v-0.50721c0-0.1166 0.09677-0.21045 0.217-0.21045h2.2173v-0.40101c0-0.0583 0.0484-0.10528 0.1085-0.10528h0.36835v1.9266z"
             />
             <path
-              d="m12.354 8.6067c0.0583 0 0.10523 0.0469 0.10523 0.10522v0.38698h2.1504c0.1166 0 0.21045 0.0938 0.21045 0.21045v0.50721c0 0.1166-0.09386 0.21045-0.21045 0.21045h-2.1504v0.40101c0 0.0583-0.04693 0.10528-0.10523 0.10528h-0.35723v-1.9266z"
+              d="m-0.35085 9.4266c-0.06012 0-0.10849-0.0469-0.1085-0.10522v-0.38698h-2.2173c-0.12023 0-0.217-0.0938-0.217-0.21045v-0.50721c0-0.1166 0.09677-0.21045 0.217-0.21045h2.2173v-0.40101c0-0.0583 0.0484-0.10528 0.1085-0.10528h0.36835v1.9266z"
             />
           </g>
           <g class="clickable-element">