Spruce up the control pop-up (needs testing with a bot/mqtt)

webpack/controls_popup.tsx

@@ -15,7 +15,7 @@ export class ControlsPopup extends React.Component<Props, Partial<State>> {
 
   state: State = {
     isOpen: false,
-    stepSize: 1000
+    stepSize: 100
   };
 
   toggle = (property: keyof State) => () =>
@@ -24,20 +24,20 @@ export class ControlsPopup extends React.Component<Props, Partial<State>> {
   public render() {
     const isOpen = this.state.isOpen ? "open" : "";
     return <div
-      className={"controls-popup " + isOpen}
-      onClick={this.toggle("isOpen")}>
-      <i className="fa fa-plus" />
+      className={"controls-popup " + isOpen}>
+      <i className="fa fa-crosshairs"
+        onClick={this.toggle("isOpen")} />
       <div className="controls-popup-menu-outer">
         <div className="controls-popup-menu-inner">
           <DirectionButton
-            axis="z"
-            direction="up"
+            axis="x"
+            direction="right"
             isInverted={false}
             steps={this.state.stepSize}
             disabled={false} />
           <DirectionButton
-            axis="x"
-            direction="left"
+            axis="y"
+            direction="up"
             isInverted={false}
             steps={this.state.stepSize}
             disabled={false} />
@@ -48,8 +48,8 @@ export class ControlsPopup extends React.Component<Props, Partial<State>> {
             steps={this.state.stepSize}
             disabled={false} />
           <DirectionButton
-            axis="z"
-            direction="right"
+            axis="x"
+            direction="left"
             isInverted={false}
             steps={this.state.stepSize}
             disabled={false} />

webpack/css/global.scss

@@ -390,40 +390,44 @@ ul {
 }
 
 .controls-popup {
-  display: none; // Display block when ready
-  right: 6rem;
-  bottom: 4rem;
-  transition: all 0.4s ease-in-out;
-  color: $white;
+  right: 4rem;
+  bottom: 3rem;
+  color: $off_white;
   i {
     z-index: 1;
     position: absolute;
     font-size: 2.4rem;
     top: 1.8rem;
     margin-bottom: 2rem;
-    transition: all 0.4s ease-in-out;
+    transition: all 0.25s ease-in-out;
   }
   &.open {
     i {
-      transform: rotate(-225deg);
+      transform: rotate(-135deg);
     }
     .controls-popup-menu-outer {
-      width: 26rem;
+      transition: all 0.1s 0s ease-in-out;
+      width: 27rem;
+      padding: 0.6rem 5rem 0rem 0rem;
     }
     .controls-popup-menu-inner {
-      transition-delay: 0.2s;
+      transition-delay: 0.25s!important;
       opacity: 1;
     }
   }
+  .arrow-button {
+    margin: 5px;
+  }
 }
 
 .controls-popup-menu-inner {
-  transition: all 0.4s ease-in-out;
+  transition: all 0.1s 0s ease-in-out;
   opacity: 0;
 }
 
 .controls-popup-menu-outer {
-  transition: all 0.4s ease-in-out;
+  transition: all 0.1 s ease-in-out;
+  transition-delay: 0.2s!important;
   right: 0;
   bottom: 0;
 }