z-index button fixes (#738)

* fix svg attributes

* center z-index icons

* remove unnecessary attributes

* differentiate button :active bg

* prevent selection of ToolIcon hints

* emphasize active elem color

src/actions/actionZindex.tsx

@@ -10,92 +10,66 @@ import { getSelectedIndices } from "../scene";
 import { KEYS } from "../keys";
 import { t } from "../i18n";
 
+const ACTIVE_ELEM_COLOR = "#ffa94d"; // OC ORANGE 4
+
 const ICONS = {
   bringForward: (
-    <svg
+    <svg viewBox="0 0 24 24">
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path
-        d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
-        fill="none"
-        stroke="#000"
-        stroke-width="1.9988945999999999"
-      />
       <path
         d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
         stroke="#000"
-        stroke-width="1.9988945999999999"
+        strokeWidth="2"
+      />
+      <path
+        d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
+        fill={ACTIVE_ELEM_COLOR}
+        stroke={ACTIVE_ELEM_COLOR}
+        strokeWidth="2"
       />
     </svg>
   ),
   sendBackward: (
-    <svg
+    <svg viewBox="0 0 24 24">
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
       <path
         d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
-        fill="none"
+        fill={ACTIVE_ELEM_COLOR}
-        stroke="#000"
+        stroke={ACTIVE_ELEM_COLOR}
-        stroke-width="1.9988945999999999"
+        strokeWidth="2"
       />
       <path
         d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
         stroke="#000"
-        stroke-width="1.9988945999999999"
+        strokeWidth="2"
       />
     </svg>
   ),
   bringToFront: (
-    <svg
+    <svg viewBox="0 0 24 24">
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
       <path
         d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
         stroke="#000"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
-        fill="none"
+        fill={ACTIVE_ELEM_COLOR}
-        stroke="#000"
+        stroke={ACTIVE_ELEM_COLOR}
-        stroke-width="2.00001"
+        strokeWidth="2"
       />
     </svg>
   ),
   sendToBack: (
-    <svg
+    <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
       <path
         d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
-        fill="none"
+        fill={ACTIVE_ELEM_COLOR}
-        stroke="#000"
+        stroke={ACTIVE_ELEM_COLOR}
-        stroke-width="2.00001"
+        strokeWidth="2"
       />
       <path
         d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
         stroke="#000"
-        stroke-width="2"
+        strokeWidth="2"
       />
     </svg>
   ),

src/components/ToolIcon.scss

@@ -60,6 +60,9 @@
   &:focus + .ToolIcon__icon {
     box-shadow: 0 0 0 2px #a5d8ff;
   }
+  &:active + .ToolIcon__icon {
+    background-color: #adb5bd;
+  }
 }
 
 .ToolIcon.ToolIcon__lock {
@@ -91,4 +94,5 @@
   font-size: 0.5em;
   color: #adb5bd; // OC GRAY 5
   font-family: Arial, Helvetica, sans-serif;
+  user-select: none;
 }

src/styles.scss

@@ -100,7 +100,7 @@ button,
   }
 
   &:active {
-    background-color: #ced4da;
+    background-color: #adb5bd;
   }
 
   &:disabled {
@@ -114,6 +114,9 @@ button,
   &:hover {
     background-color: #ced4da;
   }
+  &:active {
+    background-color: #adb5bd;
+  }
 }
 
 .App-menu {
@@ -250,8 +253,16 @@ button,
 }
 
 .zIndexButton {
-  width: 26px;
   margin: 0 5px;
+  padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 }
 
 .scroll-back-to-content {