diff --git a/client/src/components/CommentApp/components/CommentHeader/index.tsx b/client/src/components/CommentApp/components/CommentHeader/index.tsx index a1278f8161..058f5d05f3 100644 --- a/client/src/components/CommentApp/components/CommentHeader/index.tsx +++ b/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 = ({ {onResolve &&
} @@ -64,6 +66,7 @@ export const CommentHeader: FunctionComponent = ({
+
diff --git a/client/src/components/CommentApp/components/CommentHeader/style.scss b/client/src/components/CommentApp/components/CommentHeader/style.scss index 901e6866aa..92b9f3520a 100644 --- a/client/src/components/CommentApp/components/CommentHeader/style.scss +++ b/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; } } } diff --git a/client/src/components/CommentApp/icons/check-solid.svg b/client/src/components/CommentApp/icons/check-solid.svg deleted file mode 100644 index 15d7ab5e84..0000000000 --- a/client/src/components/CommentApp/icons/check-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/components/CommentApp/icons/ellipsis-v-solid.svg b/client/src/components/CommentApp/icons/ellipsis-v-solid.svg deleted file mode 100644 index 45f8e37064..0000000000 --- a/client/src/components/CommentApp/icons/ellipsis-v-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/wagtail/admin/templates/wagtailadmin/icons/check.svg b/wagtail/admin/templates/wagtailadmin/icons/check.svg new file mode 100644 index 0000000000..0c73da9e60 --- /dev/null +++ b/wagtail/admin/templates/wagtailadmin/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/wagtail/admin/templates/wagtailadmin/icons/ellipsis-v.svg b/wagtail/admin/templates/wagtailadmin/icons/ellipsis-v.svg new file mode 100644 index 0000000000..eda6f52d34 --- /dev/null +++ b/wagtail/admin/templates/wagtailadmin/icons/ellipsis-v.svg @@ -0,0 +1,3 @@ + + + diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py index 60a108eb28..4be7d144c4 100644 --- a/wagtail/admin/wagtail_hooks.py +++ b/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',