From a1a693051cb33f0bd6ba8a7536c254bb1153a5ac Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Tue, 11 Apr 2017 18:41:28 -0400
Subject: [PATCH] improve preview toggle styling

---
 package.json                               |  1 +
 src/components/EntryEditor/EntryEditor.css |  7 ++++++-
 src/components/EntryEditor/EntryEditor.js  | 16 +++++++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 72981527..06bde015 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css
index ae5c4c72..0997aa2c 100644
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/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 {
diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index ac68c2c0..6895eb04 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/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 previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
+    const { previewVisible, showEventBlocker } = this.state;
 
     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}