Draftail comment styling

* Add right hand alignment and teal colour to Draftail comment control

* Add css fix for empty comment styles

* Update comment highlight colours

client/scss/elements/_root.scss

@@ -2,8 +2,8 @@
     @include define-color('color-primary', #007d7e);
     @include define-color('color-primary-darker', css-darken(css-adjust-hue(get-color('color-primary'), 1), 4%));
     @include define-color('color-primary-dark', css-darken(css-adjust-hue(get-color('color-primary'), 1), 7%));
-    @include define-color('color-primary-lighter', css-lighten(css-adjust-hue(get-color('color-primary'), 1), 10%));
-    @include define-color('color-primary-light', css-lighten(css-adjust-hue(get-color('color-primary'), 1), 15%));
+    @include define-color('color-primary-lighter', css-lighten(css-desaturate(css-adjust-hue(get-color('color-primary'), 1), 46%), 48%));
+    @include define-color('color-primary-light', css-lighten(css-desaturate(css-adjust-hue(get-color('color-primary'), 1), 44%), 58%));
 
     @include define-color('color-input-focus', css-lighten(css-desaturate(get-color('color-primary'), 40%), 72%));
     @include define-color('color-input-focus-border', css-lighten(css-saturate(get-color('color-primary'), 12%), 10%));

client/src/components/Draftail/CommentableEditor/CommentableEditor.scss

@@ -0,0 +1,21 @@
+.Draftail-Toolbar {
+    display: flex;
+    flex-wrap: wrap;
+
+    .Draftail-ToolbarButton[name^='COMMENT-'] {
+        // This is necessary because all inline styles added to Draftail currently
+        // get a toolbar icon, even if empty. This causes the programmatically
+        // added comment styles to get empty icons. This should be fixed in Draftail
+        // soon - when it is, this can be removed
+        display: none;
+    }
+
+    .Draftail-ToolbarGroup:last-child {
+        flex-grow: 1;
+    }
+
+    .Draftail-CommentControl {
+        float: right;
+        color: $color-teal;
+    }
+}

client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx

@@ -174,22 +174,24 @@ interface ControlProps {
 
 function getCommentControl(commentApp: CommentApp, contentPath: string, fieldNode: Element) {
   return ({ getEditorState, onChange }: ControlProps) => (
-    <ToolbarButton
-      name="comment"
-      active={false}
-      title={STRINGS.ADD_A_COMMENT}
-      icon={<Icon name="comment" />}
-      onClick={() => {
-        const annotation = new DraftailInlineAnnotation(fieldNode);
-        const commentId = commentApp.makeComment(annotation, contentPath, '[]');
-        onChange(
-          RichUtils.toggleInlineStyle(
-            getEditorState(),
-            `${COMMENT_STYLE_IDENTIFIER}${commentId}`
-          )
-        );
-      }}
-    />
+    <span className="Draftail-CommentControl">
+      <ToolbarButton
+        name="comment"
+        active={false}
+        title={STRINGS.ADD_A_COMMENT}
+        icon={<Icon name="comment" />}
+        onClick={() => {
+          const annotation = new DraftailInlineAnnotation(fieldNode);
+          const commentId = commentApp.makeComment(annotation, contentPath, '[]');
+          onChange(
+            RichUtils.toggleInlineStyle(
+              getEditorState(),
+              `${COMMENT_STYLE_IDENTIFIER}${commentId}`
+            )
+          );
+        }}
+      />
+    </span>
   );
 }
 
@@ -599,6 +601,10 @@ function CommentableEditor({
             if (focusedId && commentIds.has(focusedId)) {
               // Use the focused colour if one of the comments is focused
               background = focusedHighlight;
+              return {
+                'background-color': background,
+                'color': standardHighlight
+              };
             } else if (numStyles > 1) {
               // Otherwise if we're in a region with overlapping comments, use a slightly darker colour than usual
               // to indicate that

client/src/components/Draftail/Draftail.scss

@@ -18,6 +18,7 @@ $draftail-editor-font-family: $font-serif;
 @import '../../../../node_modules/draftail/lib/index';
 
 @import './Tooltip/Tooltip';
+@import './CommentableEditor/CommentableEditor';
 @import './EditorFallback/EditorFallback';
 
 @import './decorators/TooltipEntity';