Fix icons in comments

client/src/components/CommentApp/components/CommentHeader/index.tsx

@@ -2,6 +2,7 @@
 
 import dateFormat from 'dateformat';
 import React, { FunctionComponent } from 'react';
+import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
 import { TranslatableStrings } from '../../main';
 
@@ -57,6 +58,7 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
         {onResolve &&
           <div className="comment-header__action comment-header__action--resolve">
             <button type="button" aria-label={strings.RESOLVE} onClick={onClickResolve}>
+              <Icon name="check" />
             </button>
           </div>
         }
@@ -64,6 +66,7 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
           <div className="comment-header__action comment-header__action--more">
             <details>
               <summary aria-label={strings.MORE_ACTIONS} aria-haspopup="menu" role="button">
+                <Icon name="ellipsis-v" />
               </summary>
 
               <div className="comment-header__more-actions">

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -47,16 +47,12 @@
             border: unset;
             -moz-outline-radius: 10px;
 
-            &::before {
-                content: '';
+            svg {
                 position: absolute;
-                top: 0;
-                left: 0;
-                width: 50px;
-                height: 50px;
-                mask-position: center;
-                mask-size: 25px 25px;
-                mask-repeat: no-repeat;
+                top: 12.5px;
+                left: 12.5px;
+                width: 25px;
+                height: 25px;
             }
 
             &:hover {
@@ -75,19 +71,16 @@
         }
 
         &--resolve {
-            > button::before,
-            > details > summary::before {
-                background-color: $color-teal;
-                mask-image: url('./icons/check-solid.svg');
+            > button,
+            > details > summary {
+                color: $color-teal;
             }
         }
 
         &--more {
-            > button::before,
-            > details > summary::before {
-                background-color: $color-grey-25;
-                background-position: center;
-                mask-image: url('./icons/ellipsis-v-solid.svg');
+            > button,
+            > details > summary {
+                color: $color-grey-25;
             }
         }
     }

client/src/components/CommentApp/icons/check-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>

client/src/components/CommentApp/icons/ellipsis-v-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-v" class="svg-inline--fa fa-ellipsis-v fa-w-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path></svg>

wagtail/admin/templates/wagtailadmin/icons/check.svg

@@ -0,0 +1,3 @@
+<symbol id="icon-check" viewBox="0 0 512 512">
+    <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+</symbol>

wagtail/admin/templates/wagtailadmin/icons/ellipsis-v.svg

@@ -0,0 +1,3 @@
+<symbol id="icon-ellipsis-v" viewBox="0 0 192 512">
+    <path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path>
+</symbol>

wagtail/admin/wagtail_hooks.py

@@ -718,6 +718,7 @@ def register_icons(icons):
         'bin.svg',
         'bold.svg',
         'chain-broken.svg',
+        'check.svg',
         'clipboard-list.svg',
         'code.svg',
         'cog.svg',
@@ -736,6 +737,7 @@ def register_icons(icons):
         'draft.svg',
         'duplicate.svg',
         'edit.svg',
+        'ellipsis-v.svg',
         'error.svg',
         'folder-inverse.svg',
         'folder-open-1.svg',