Made UI elements non-selectable (#234)

Affects SpriteSelector Pane, StageSelector Pane, Stage, MenuBar, Libraries Modal, Add/Import buttons, for Chrome, Ffx + Safari on Sierra.

Fixes #162

src/components/close-button/close-button.css

@@ -15,6 +15,7 @@
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     cursor: pointer;
+    user-select: none;
     transition: all 0.15s ease-out; /* @todo: standardize with var */
 }
 
@@ -35,7 +36,7 @@
 }
 
 /*  Same icon as Sprite Selector Add button, but rotated.
-    TODO: reuse?
+    @todo: reuse?
 */
 .close-icon {
     transform-origin: 50%;

src/components/gui/gui.css

@@ -64,6 +64,9 @@
 .stage-wrapper {
     padding-left: $space;
     padding-right: $space;
+
+    /* Hides negative space between edge of rounded corners + container, when selected */
+    user-select: none; 
 }
 
 .target-wrapper {

src/components/menu-bar/menu-bar.css

@@ -57,6 +57,7 @@
     cursor: pointer;
     text-decoration: none;
     color: white;
+    user-select: none;
 }
 
 .menu-item:hover {

src/components/modal/modal.css

@@ -23,6 +23,7 @@
     bottom: 5%;
     left: 5%;
     border-radius: $space;
+    user-select: none;
 }
 
 .modal-children {

src/components/sprite-info/sprite-info.css

@@ -31,19 +31,14 @@ $form-radius: calc($space / 2);
     align-items: center;
 }
 
-/* @todo: refactor from descendant selector, to a regular class */
 .icon-wrapper {
     display: inline-block;
     box-sizing: content-box;
     width: 1.25rem;
     height: 1.25rem;
     padding: calc($space / 2);
-    cursor: pointer;
     outline: none;
-
-    /* @todo: make this a mixin for all UI text labels */
     user-select: none;
-    cursor: default;
 }
 
 .icon {
@@ -131,6 +126,7 @@ $form-radius: calc($space / 2);
     width: 100%; 
     height: 1.85rem;  
     border: 1px solid $form-border;
+    user-select: none;
     outline: none;
 }
 

src/components/sprite-selector-item/sprite-selector-item.css

@@ -37,11 +37,14 @@
 
 .sprite-image {
     margin: auto;
+    user-select: none;
 }
 
 .sprite-name {
     font-size: 0.625rem;
     margin: 0.15rem;
+    user-select: none;
+    
     /*
         For truncating overflowing text gracefully
         Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text

src/components/stage-selector/stage-selector.css

@@ -58,6 +58,7 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
     color: #575e75;
     background: #ededed;
     border-radius: 0.25rem;
+    user-select: none;
 }
 
 .label {
@@ -66,13 +67,14 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
     font-size: 0.5rem;
     font-weight: bold;
     color: #575e75;
+    user-select: none;
 }
 
 $border-width: 2px;
 
 .flex-wrapper {
     display: flex;
-    flex-direction: column; /* to make rows */
+    flex-direction: column; /* makes rows */
     align-items: center;
     background-color: white;
     border-radius: calc($space / 2);
@@ -96,4 +98,5 @@ $border-width: 2px;
     width: 100%;
     border-top-left-radius: calc($space / 2);
     border-top-right-radius: calc($space / 2);
+    user-select: none;
 }

src/components/target-pane/target-pane.css

@@ -29,6 +29,7 @@
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
     transition: all 0.15s ease-out; /* @todo: standardize with var */ 
     cursor: pointer;
+    user-select: none;
 }
 
 .add-button-wrapper:hover {