improve usability of selection styling

components/Editor.js

@@ -454,6 +454,11 @@ class Editor extends React.Component {
             .toolbar-second-row > :global(div:not(:last-of-type)) {
               margin-right: 0.5rem;
             }
+
+            #style-editor-button {
+              display: flex;
+              align-items: center;
+            }
           `}
         </style>
       </div>

components/SelectionEditor.js

@@ -3,11 +3,8 @@ import { useKeyboardListener } from 'actionsack'
 import Popout from './Popout'
 import Button from './Button'
 import ColorPicker from './ColorPicker'
-import ThemeIcon from './svg/Theme'
 import { COLORS } from '../lib/constants'
 
-const styleEditorButtonStyle = { width: 28, maxWidth: 28, height: 28, borderRadius: '50%' }
-
 function ModifierButton(props) {
   return (
     <Button
@@ -54,10 +51,9 @@ function reducer(state, action) {
 }
 
 function SelectionEditor({ onChange }) {
-  const [visible, setVisible] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
-  const [open, setOpen] = React.useState(true)
 
-  useKeyboardListener('Escape', () => setVisible(false))
+  useKeyboardListener('Escape', () => setOpen(false))
 
   const [state, dispatch] = React.useReducer(reducer, {
     bold: false,
@@ -72,77 +68,64 @@ function SelectionEditor({ onChange }) {
 
   return (
     <div style={{ position: 'relative' }}>
-      <Button
+      <div className="colorizer">
-        title="Style Menu"
+        <div className="modifier">
-        border
+          <ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}>
-        center
+            <b>B</b>
-        selected={visible}
+          </ModifierButton>
-        style={styleEditorButtonStyle}
+          <ModifierButton selected={state.italics} onClick={() => dispatch({ type: 'ITALICS' })}>
-        margin="6px 0 0"
+            <i>I</i>
-        onClick={() => setVisible(v => !v)}
+          </ModifierButton>
-      >
+          <ModifierButton
-        <ThemeIcon />
+            selected={state.underline}
-      </Button>
+            onClick={() => dispatch({ type: 'UNDERLINE' })}
-      <Popout hidden={!visible} pointerLeft="9px">
+          >
-        <div className="colorizer">
+            <u>U</u>
-          <div className="modifier">
+          </ModifierButton>
-            <ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}>
+          <button className="color-square" onClick={() => setOpen(o => !o)} />
-              <b>B</b>
-            </ModifierButton>
-            <ModifierButton selected={state.italics} onClick={() => dispatch({ type: 'ITALICS' })}>
-              <i>I</i>
-            </ModifierButton>
-            <ModifierButton
-              selected={state.underline}
-              onClick={() => dispatch({ type: 'UNDERLINE' })}
-            >
-              <u>U</u>
-            </ModifierButton>
-            <button className="color-square" onClick={() => setOpen(o => !o)} />
-          </div>
-          {open && (
-            <div className="color-picker-container">
-              <ColorPicker
-                color={state.color || COLORS.PRIMARY}
-                disableAlpha={true}
-                onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
-              />
-            </div>
-          )}
         </div>
-        <style jsx>
+        <Popout hidden={!open} pointerLeft="16px" style={{ left: 82 }}>
-          {`
+          <div className="color-picker-container">
-            .modifier {
+            <ColorPicker
-              padding: 0px 8px;
+              color={state.color || COLORS.PRIMARY}
-              display: flex;
+              disableAlpha={true}
-            }
+              onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
-            .colorizer b {
+            />
-              font-weight: bold;
+          </div>
-            }
+        </Popout>
-            .colorizer i {
+      </div>
-              font-style: italic;
+      <style jsx>
-            }
+        {`
-            .colorizer :global(button) {
+          .modifier {
-              min-width: 24px;
+            padding: 0px 8px;
-            }
+            display: flex;
-            .color-square {
+          }
-              cursor: pointer;
+          .colorizer b {
-              appearance: none;
+            font-weight: bold;
-              outline: none;
+          }
-              border: none;
+          .colorizer i {
-              border-radius: 3px;
+            font-style: italic;
-              padding: 12px;
+          }
-              margin: 4px 0 4px auto;
+          .colorizer :global(button) {
-              background: ${state.color || COLORS.PRIMARY};
+            min-width: 20px;
-              box-shadow: ${`inset 0px 0px 0px ${open ? 2 : 1}px ${COLORS.SECONDARY}`};
+          }
-            }
+          .color-square {
-            .color-picker-container {
+            cursor: pointer;
-              width: 218px;
+            appearance: none;
-              border-top: 2px solid ${COLORS.SECONDARY};
+            outline: none;
-            }
+            border: none;
-          `}
+            border-radius: 3px;
-        </style>
+            padding: 12px;
-      </Popout>
+            margin: 4px 0 4px auto;
+            background: ${state.color || COLORS.PRIMARY};
+            box-shadow: ${`inset 0px 0px 0px ${open ? 2 : 1}px ${COLORS.SECONDARY}`};
+          }
+          .color-picker-container {
+            width: 218px;
+            border-top: 2px solid ${COLORS.SECONDARY};
+          }
+        `}
+      </style>
     </div>
   )
 }