Make more room in UI by moving icons a bit

Status icons on the left, action icons on the right

src/main.css

@@ -38,7 +38,7 @@ input, button, textarea, :focus {
   padding: .4em;
 }
 
-.controls-wrapper button, .right-menu button {
+.controls-wrapper button, .right-menu button, .left-menu button {
   background: white;
   border-radius: .3em;
   color: rgba(0, 0, 0, 0.7);
@@ -49,7 +49,7 @@ input, button, textarea, :focus {
   border: none;
 }
 
-.controls-wrapper button:active, .right-menu button:active  {
+.controls-wrapper button:active, .right-menu button:active, .left-menu button:active  {
   background: #ccc;
 }
 
@@ -58,6 +58,14 @@ input, button, textarea, :focus {
   position: absolute;
   right: 0;
   bottom: 0;
+  padding: .3em;
+}
+
+.left-menu {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: .3em;
 }
 
 .controls-wrapper {

src/renderer.jsx

@@ -404,25 +404,32 @@ class App extends React.Component {
         </div>
       </div>
 
+      <div className="left-menu">
+        <button title="Format">
+          {this.state.fileFormat || 'FMT'}
+        </button>
+
+        <button className="playback-rate" title="Playback rate">
+          {_.round(this.state.playbackRate, 1) || 1}x
+        </button>
+      </div>
+
       <div className="right-menu">
         <button
           title={`Custom output dir (cancel to restore default). Current: ${this.getOutputDir() || 'Not set (use input dir)'}`}
           onClick={withBlur(() => this.setOutputDir())}
         >
-          {this.getOutputDir() ? `...${this.getOutputDir().substr(-10)}` : 'OUT PATH'}
+          {this.getOutputDir() ? `...${this.getOutputDir().substr(-10)}` : 'OUTDIR'}
-        </button>
-        <button title="Format">
-          {this.state.fileFormat || 'FMT'}
-        </button>
-        <button className="playback-rate" title="Playback rate">
-          {_.round(this.state.playbackRate, 1) || 1}x
         </button>
+
         <i
           title="Capture frame"
+          style={{ margin: '-.4em -.2em' }}
           className="button fa fa-camera"
           aria-hidden="true"
           onClick={() => this.capture()}
         />
+
         <button
           title="Capture frame format"
           onClick={withBlur(() => this.toggleCaptureFormat())}