Style cleanup

src/editor/widgets/comment/Comment.jsx

@@ -23,11 +23,11 @@ const Comment = props => {
   }
 
   return props.readOnly ? (
-    <div className="r6o-section comment">
+    <div className="r6o-widget comment">
       {props.body.value}
     </div>
   ) : (
-    <div className={ isEditable ? "r6o-section comment editable" : "r6o-section comment"}>
+    <div className={ isEditable ? "r6o-widget comment editable" : "r6o-widget comment"}>
       <TextEntryField 
         editable={isEditable}
         content={props.body.value} 

src/editor/widgets/comment/CommentWidget.jsx

@@ -25,7 +25,7 @@ const CommentWidget = props => {
       )}
 
       { !props.readOnly && props.annotation &&
-        <div className="r6o-section comment editable">
+        <div className="r6o-widget comment editable">
           <TextEntryField
             content={props.currentReply}
             editable={true}

src/highlighter/Highlighter.js

@@ -34,14 +34,14 @@ export default class Highlighter {
 
   _findAnnotationSpans = annotation => {
     // TODO index annotation to make this faster
-    const allAnnotationSpans = document.querySelectorAll('.annotation');
+    const allAnnotationSpans = document.querySelectorAll('.r6o-annotation');
     return Array.prototype.slice.call(allAnnotationSpans)
       .filter(span => span.annotation.isEqual(annotation));
   }
 
   getAllAnnotations = () => {
     // TODO index annotation to make this faster
-    const allAnnotationSpans = document.querySelectorAll('.annotation');
+    const allAnnotationSpans = document.querySelectorAll('.r6o-annotation');
     return Array.prototype.slice.call(allAnnotationSpans)
       .map(span => span.annotation);
   }
@@ -80,7 +80,7 @@ export default class Highlighter {
 
   applyStyles = (annotation, spans) => {
     const extraClasses = this.formatter ? this.formatter(annotation) : '';
-    spans.forEach(span => span.className = `annotation ${extraClasses}`.trim());
+    spans.forEach(span => span.className = `r6o-annotation ${extraClasses}`.trim());
   }
 
   bindAnnotation = (annotation, elements) => {
@@ -245,7 +245,7 @@ export default class Highlighter {
 
           annotations.push(element.annotation);
 
-          return (parent.classList.contains('annotation')) ?
+          return (parent.classList.contains('r6o-annotation')) ?
             getAnnotationsRecursive(parent, annotations) : annotations;
         },
 

src/selection/SelectionHandler.js

@@ -37,7 +37,7 @@ export default class SelectionHandler extends EventEmitter {
       const selection = getSelection();
 
       if (selection.isCollapsed) {
-        const annotationSpan = evt.target.closest('.annotation');
+        const annotationSpan = evt.target.closest('.r6o-annotation');
         if (annotationSpan) {
           this.emit('select', { 
             selection: this.highlighter.getAnnotationsAt(annotationSpan)[0],

themes/default/editor/_editor.scss

@@ -1,3 +1,4 @@
+@import "widgets/textentry";
 @import "widgets/comment/comment";
 @import "widgets/tag/tag";
 @import "widgets/type/typeSelector";
@@ -35,11 +36,11 @@
     @include rounded-corners(2px);
     @include box-shadow(2px, 2px, 42px, 0.4);
 
-    .r6o-section:first-child {
+    .r6o-widget:first-child {
       @include rounded-corners-top(2px);
     }
 
-    .r6o-section {
+    .r6o-widget {
       border-bottom:1px solid $lightgrey-border-darker;
     }
   }

themes/default/editor/widgets/comment/_comment.scss

@@ -1,4 +1,4 @@
-.r6o-section.comment {
+.r6o-widget.comment {
   font-size:14px;
   min-height:3em;
   background-color:#fff;
@@ -56,6 +56,6 @@
 
 }
 
-.r6o-section.comment.editable {
+.r6o-widget.comment.editable {
   background-color:$blueish-white;
 }

themes/default/globals/_globals.scss

@@ -1,4 +1,3 @@
 @import "includes/colors";
-@import "includes/fonts";
 @import "includes/mixins";
 @import "includes/buttons";

themes/default/globals/includes/_fonts.scss

@@ -1,6 +0,0 @@
-@font-face {
-  font-family:'FontAwesome';
-  src:url('/fontawesome-webfont.ttf');
-  font-weight:normal;
-  font-style:normal;
-}

themes/default/highlights/_highlights.scss

@@ -1,10 +1,10 @@
-.annotation {
+.r6o-annotation {
   background-color:#ffa50033;
   border-bottom:2px solid orange;
   cursor:pointer;
 }
       
-.selection {
+.r6o-selection {
   background-color:#cfcfffa1;
   cursor:pointer;
 }