From 779f50aa3c93b4b602be4d6a24a27cea052c1dd7 Mon Sep 17 00:00:00 2001
From: Jacob Topp-Mugglestone <55137073+jacobtoppm@users.noreply.github.com>
Date: Wed, 7 Apr 2021 10:26:50 +0100
Subject: [PATCH] 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               |  4 +-
 .../CommentableEditor/CommentableEditor.scss  | 21 ++++++++++
 .../CommentableEditor/CommentableEditor.tsx   | 38 +++++++++++--------
 client/src/components/Draftail/Draftail.scss  |  1 +
 4 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/Draftail/CommentableEditor/CommentableEditor.scss

diff --git a/client/scss/elements/_root.scss b/client/scss/elements/_root.scss
index 9b8a36a1fd..485f40a4f4 100644
--- a/client/scss/elements/_root.scss
+++ b/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%));
diff --git a/client/src/components/Draftail/CommentableEditor/CommentableEditor.scss b/client/src/components/Draftail/CommentableEditor/CommentableEditor.scss
new file mode 100644
index 0000000000..489e23485e
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx b/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx
index 9b4919e2e0..e69aab08fd 100644
--- a/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx
+++ b/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
diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss
index d8c3d6e665..0ed85f14bf 100644
--- a/client/src/components/Draftail/Draftail.scss
+++ b/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';