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.

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;
+  }
+}

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>
   );
 }