From 192afe2ec5b8074c51c6676609e56348f7d35928 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Wed, 29 Mar 2017 16:28:49 -0400
Subject: [PATCH] make markdown toggle purpose more obvious

The "< >" button on the toolbar should format selected
text as code, but its serving as a visual mode toggle.
This commit switches out the code icon for a text label,
and moves it to the right side of the rich text toolbar.
---
 .../Widgets/MarkdownControlElements/Toolbar.css      | 12 ++++++++++++
 .../Widgets/MarkdownControlElements/Toolbar.js       |  8 ++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar.css b/src/components/Widgets/MarkdownControlElements/Toolbar.css
index a4acfa45..03330e81 100644
--- a/src/components/Widgets/MarkdownControlElements/Toolbar.css
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar.css
@@ -21,3 +21,15 @@
   }
 }
 
+.Toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  & .Button button {
+    font-size: 12px;
+    text-transform: uppercase;
+    padding-top: 10px;
+    padding-bottom: 8px;
+  }
+}
diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar.js b/src/components/Widgets/MarkdownControlElements/Toolbar.js
index a8210227..6f34274f 100644
--- a/src/components/Widgets/MarkdownControlElements/Toolbar.js
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar.js
@@ -7,11 +7,15 @@ function button(label, icon, action, active) {
   const classNames = List([styles.Button]);
   return (<li className={(active ? classNames.push(styles.ButtonActive) : classNames).join(' ')}>
     <button className={styles[label]} onClick={action} title={label}>
-      <Icon type={icon} />
+      { icon ? <Icon type={icon} /> : 'Toggle Markdown' }
     </button>
   </li>);
 }
 
+function toggle(...args) {
+  return <div className={styles.Toggle}>{button(...args)}</div>;
+}
+
 function Toolbar(props) {
   const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
   return (
@@ -21,7 +25,7 @@ function Toolbar(props) {
       {button('Bold', 'bold', onBold)}
       {button('Italic', 'italic', onItalic)}
       {button('Link', 'link', onLink)}
-      {button('View Code', 'code', onToggleMode, rawMode)}
+      {toggle('View Code', null, onToggleMode, rawMode)}
     </ul>
   );
 }