additions/comments colors

wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js

 /* eslint react/prop-types: 0 */
-import React, { useContext, useState } from 'react';
-// import styled from 'styled-components';
-// import { ButtonStyles } from 'wax-prosemirror-themes';
-import { WaxContext } from 'wax-prosemirror-core';
+import React, { useState } from 'react';
 import MenuButton from '../../ui/buttons/MenuButton';
 
-// const ButtonStyled = styled.button`
-//   ${ButtonStyles};
-//   opacity: ${props => (props.select ? 1 : 0.4)};
-//   pointer-events: ${props => (props.select ? 'default' : 'none')};
-//   color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
-//   background-color: ${props =>
-//     props.isActive ? props.theme.colorPrimary : 'transparent'};
-//   &:hover {
-//     background-color: ${props =>
-//       props.isActive ? props.theme.colorPrimary : 'transparent'};
-//   }
-// `;
-
 const TrackChangeEnable = ({ view = {}, item, enabled }) => {
-  if (item.onlyOnMain) {
-    const {
-      view: { main },
-    } = useContext(WaxContext);
-    view = main;
-  }
-
   const [isEnabled, setEnabled] = useState(enabled);
 
-  // return (
-  //   <ButtonStyled
-  //     type="button"
-  //     isActive={isEnabled}
-  //     title={item.title}
-  //     disabled={item.enable && !item.enable(view.state)}
-  //     onMouseDown={e => {
-  //       e.preventDefault();
-  //       setEnabled(!isEnabled);
-  //       item.run(view.state, view.dispatch);
-  //     }}
-  //     select={item.select && item.select(view.state)}
-  //   >
-  //     {item.content}
-  //   </ButtonStyled>
-  // );
-
-  const handleMouseDown = () => {
+  const handleMouseDown = e => {
+    e.preventDefault();
     setEnabled(!isEnabled);
     item.run(view.state, view.dispatch);
   };
@@ -55,7 +16,7 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => {
       active={isEnabled}
       disabled={item.enable && !item.enable(view.state)}
       label="Track Changes"
-      onMouseDown={handleMouseDown}
+      onMouseDown={e => handleMouseDown(e)}
       title={item.title}
     />
   );

wax-prosemirror-layouts/src/layouts/EditorElements.js

@@ -21,6 +21,7 @@ export default css`
     h2::selection,
     h3::selection,
     code::selection,
+    span::selection,
     p span::selection,
     h1 span::selection,
     h2 span::selection,
@@ -205,9 +206,9 @@ export default css`
   }
 
   span.insertion {
-    color: blue;
+    color: royalblue;
     footnote: {
-      background: blue;
+      background: royalblue;
     }
   }
 
@@ -219,7 +220,7 @@ export default css`
   }
 
   .format-change {
-    border-bottom: 2px solid blue;
+    border-bottom: 2px solid royalblue;
   }
 
   [data-track] {
@@ -240,11 +241,12 @@ export default css`
   }
 
   span.comment {
-    border-bottom: 2px solid #ffab20;
+    border-bottom: 2px solid gold;
     border-radius: 3px 3px 0 0;
 
     .active-comment {
-      background-color: #ffab20;
+      background-color: gold;
+      color: black;
     }
   }
 `;

wax-prosemirror-themes/src/coko-theme/index.js

@@ -25,7 +25,7 @@ const cokoTheme = {
 
   // fonts
   fontInterface: 'Fira-Sans-Condensed',
-  fontHeading: 'Amethysta',
+  fontHeading: 'Fira-Sans-Condensed',
   fontReading: 'Vollkorn',
   fontWriting: 'Merriweather',