#281 wip annotation style

app/components/review-wizard/Annotator.jsx

 import React from 'react'
 import annotator from 'annotator'
-import styled from 'styled-components'
-import { lighten } from '@pubsweet/ui-toolkit'
 import AnnotatorStyle from './AnnotatorStyle'
 
-const Annotate = styled.div`
-  *::selection {
-    background: ${lighten('colorWarning', 80)} !important;
-  }
-  *::-moz-selection {
-    background: ${lighten('colorWarning', 80)} !important;
-  }
-`
 const Annotator = BaseComponent =>
   class AnnotatorDiv extends React.Component {
     state = { app: null }
@@ -87,12 +77,12 @@ const Annotator = BaseComponent =>
     render() {
       const { file, revId, userId, children, style, ...props } = this.props
       return (
-        <Annotate className="annotator" ref={this.setRef} style={style}>
+        <div className="annotator" ref={this.setRef} style={style}>
           <AnnotatorStyle />
           <BaseComponent loaded={this.startAnnotator} url={file.url} {...props}>
             {children}
           </BaseComponent>
-        </Annotate>
+        </div>
       )
     }
   }

app/components/review-wizard/AnnotatorStyle.jsx

@@ -15,6 +15,12 @@ const AnnotatorStyles = createGlobalStyle`
     font-size: ${th('fontSizeBaseSmall')} !important;
     font-style: normal !important;
   }
+  ::selection {
+    background-color: ${lighten('colorWarning', 60)} !important;
+  }
+  ::-moz-selection {
+    background-color: ${lighten('colorWarning', 60)} !important;
+  }
   body {
     /* Base Reset
     -------------------------------------------------------------------- */