Modified some UI details with new color system

Updates include modifications to interaction states for the following: tabs, add menus, forms, and stage selector.

src/components/action-menu/action-menu.css

@@ -35,7 +35,14 @@ $more-button-size: 2.25rem;
     border-radius: 100%;
     width: $main-button-size;
     height: $main-button-size;
+    box-shadow: 0 0 0 4px $motion-transparent;
     z-index: 20; /* TODO reorder layout to prevent z-index need */
+    transition: transform, box-shadow 0.5s;
+}
+
+.main-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 0 6px $motion-transparent;
 }
 
 .main-icon {

src/components/forms/input.css

@@ -31,6 +31,10 @@
     min-width: 0;
 }
 
+.input-form:hover {
+    border-color: $motion-primary;
+}
+
 .input-form:focus {
     border-color: $motion-primary;
     box-shadow: 0 0 0 0.25rem $motion-transparent;

src/components/gui/gui.css

@@ -87,7 +87,12 @@
     z-index: 1;
 }
 
+.tab:hover {
+  background-color: $ui-primary;
+}
+
 .tab.is-selected {
+    height: 90%;
     color: $motion-primary;
     background-color: $ui-white;
     z-index: 4; /* Make sure selected is always above */
@@ -95,6 +100,7 @@
 
 .tab img {
     margin-right: 0.125rem;
+    width: 1.375rem;
     filter: grayscale(100%);
 }
 

src/components/meter/meter.jsx

@@ -42,7 +42,7 @@ const Meter = props => {
                     />
                 ))}
             <rect
-                fill="white"
+                fill="hsla(215, 100%, 95%, 1)"
                 height={(nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)}
                 opacity="0.75"
                 width={width}

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

@@ -69,8 +69,7 @@
 }
 
 .raised {
-    background-color: #cce1ff;
-    border-color: #8cbcff;
+    background-color: #8cbcff;
     transition: all 0.25s ease;
 }
 

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

@@ -73,6 +73,7 @@ $header-height: calc($stage-menu-height - 2px);
     width: 100%;
     user-select: none;
     border-bottom: 1px solid $ui-black-transparent;
+    box-shadow: inset 0 0 4px $ui-black-transparent;
 }
 
 .add-button {