Use "zoom to fit" as default

lib/image-editor-view.js

@@ -13,7 +13,7 @@ export default class ImageEditorView {
     this.disposables = new CompositeDisposable()
     this.imageSize = fs.statSync(this.editor.getPath()).size
     this.loaded = false
-    this.mode = 'reset-zoom'
+    this.mode = 'zoom-to-fit'
     etch.initialize(this)
 
     this.refs.image.style.display = 'none'
@@ -108,15 +108,15 @@ export default class ImageEditorView {
           </div>
           <div className='image-controls-group btn-group'>
             <button className='btn' ref='zoomOutButton'>-</button>
-            <button className='btn reset-zoom-button' ref='resetZoomButton'>100%</button>
+            <button className='btn reset-zoom-button' ref='resetZoomButton'>Auto</button>
             <button className='btn' ref='zoomInButton'>+</button>
           </div>
           <div className='image-controls-group btn-group'>
-            <button className='btn' ref='zoomToFitButton'>Zoom to fit</button>
+            <button className='btn zoom-to-fit-button selected' ref='zoomToFitButton'>Zoom to fit</button>
           </div>
         </div>
 
-        <div className='image-container' ref='imageContainer'>
+        <div className='image-container zoom-to-fit' ref='imageContainer'>
           <img ref='image'></img>
         </div>
       </div>

styles/image-view.less

@@ -60,6 +60,12 @@
     .reset-zoom-button {
       min-width: 5em;
     }
+
+    // disabled once the button is selected
+    .zoom-to-fit-button.selected {
+      pointer-events: none;
+      cursor: default;
+    }
   }