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(true)
+  const [open, setOpen] = React.useState(false)
 
-  useKeyboardListener('Escape', () => setVisible(false))
+  useKeyboardListener('Escape', () => setOpen(false))
 
   const [state, dispatch] = React.useReducer(reducer, {
     bold: false,
@@ -72,18 +68,6 @@ function SelectionEditor({ onChange }) {
 
   return (
     <div style={{ position: 'relative' }}>
-      <Button
-        title="Style Menu"
-        border
-        center
-        selected={visible}
-        style={styleEditorButtonStyle}
-        margin="6px 0 0"
-        onClick={() => setVisible(v => !v)}
-      >
-        <ThemeIcon />
-      </Button>
-      <Popout hidden={!visible} pointerLeft="9px">
       <div className="colorizer">
         <div className="modifier">
           <ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}>
@@ -100,7 +84,7 @@ function SelectionEditor({ onChange }) {
           </ModifierButton>
           <button className="color-square" onClick={() => setOpen(o => !o)} />
         </div>
-          {open && (
+        <Popout hidden={!open} pointerLeft="16px" style={{ left: 82 }}>
           <div className="color-picker-container">
             <ColorPicker
               color={state.color || COLORS.PRIMARY}
@@ -108,7 +92,7 @@ function SelectionEditor({ onChange }) {
               onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
             />
           </div>
-          )}
+        </Popout>
       </div>
       <style jsx>
         {`
@@ -123,7 +107,7 @@ function SelectionEditor({ onChange }) {
             font-style: italic;
           }
           .colorizer :global(button) {
-              min-width: 24px;
+            min-width: 20px;
           }
           .color-square {
             cursor: pointer;
@@ -142,7 +126,6 @@ function SelectionEditor({ onChange }) {
           }
         `}
       </style>
-      </Popout>
     </div>
   )
 }