improve preview toggle styling

package.json

@@ -94,6 +94,7 @@
     "@kadira/storybook": "^1.36.0",
     "autoprefixer": "^6.3.3",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
+    "classnames": "^2.2.5",
     "dateformat": "^1.0.12",
     "deep-equal": "^1.0.1",
     "fuzzy": "^0.1.1",

src/components/EntryEditor/EntryEditor.css

@@ -7,9 +7,14 @@
 
 .previewToggle {
   position: absolute;
-  top: 0;
+  top: 8px;
   right: 40px;
   z-index: 1000;
+  opacity: 0.8;
+}
+
+.previewToggleShow {
+  right: 60px;
 }
 
 .controlPane {

src/components/EntryEditor/EntryEditor.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import SplitPane from 'react-split-pane';
 import Button from 'react-toolbox/lib/button';
+import classnames from 'classnames';
 import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
@@ -52,17 +53,22 @@ class EntryEditor extends Component {
         onCancelEdit,
     } = this.props;
 
-    const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
+    const { previewVisible, showEventBlocker } = this.state;
-    const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
 
     const collectionPreviewEnabled = collection.getIn(['editor', 'preview'], true);
 
     const togglePreviewButton = (
-      <Button className={styles.previewToggle} onClick={this.handleTogglePreview}>Toggle Preview</Button>
+      <Button
+        className={classnames(styles.previewToggle, { previewVisible: styles.previewToggleShow })}
+        onClick={this.handleTogglePreview}
+        icon={previewVisible ? 'visibility_off' : 'visibility'}
+        floating
+        mini
+      />
     );
 
     const editor = (
-      <StickyContext className={controlClassName}>
+      <StickyContext className={classnames(styles.controlPane, { [styles.blocker]: showEventBlocker })}>
         { collectionPreviewEnabled ? togglePreviewButton : null }
         <ControlPane
           collection={collection}
@@ -89,7 +95,7 @@ class EntryEditor extends Component {
             onDragFinished={this.handleSplitPaneDragFinished}
           >
             <ScrollSyncPane>{editor}</ScrollSyncPane>
-            <div className={previewClassName}>
+            <div className={classnames(styles.previewPane, { [styles.blocker]: showEventBlocker })}>
               <PreviewPane
                 collection={collection}
                 entry={entry}