diff --git a/client/blocks/comments/comment-actions.jsx b/client/blocks/comments/comment-actions.jsx
index 7e4a948d166a9..626d555f02ca9 100644
--- a/client/blocks/comments/comment-actions.jsx
+++ b/client/blocks/comments/comment-actions.jsx
@@ -8,6 +8,11 @@ import Gridicon from 'components/gridicon';
import classnames from 'classnames';
import { noop } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
/**
* Internal dependencies
*/
@@ -55,34 +60,34 @@ const CommentActions = ( {
return (
{ showReadMore && (
-
) }
{ showReplyButton && (
-
+
{ translate( 'Reply' ) }
-
+
) }
{ showCancelReplyButton && (
-
+
{ translate( 'Cancel reply' ) }
-
+
) }
{ showCancelEditButton && (
-
+
{ translate( 'Cancel' ) }
-
+
) }
-
+
{ translate( 'Trash' ) }
-
-
+
+
{ translate( 'Spam' ) }
-
-
+
+
{ translate( 'Edit' ) }
-
+
:only-child {
left: -3px;
top: 3px;
}
-
+
.comments__comment-actions-approve,
.comments__comment-actions-trash,
.comments__comment-actions-spam,
@@ -84,16 +96,6 @@
}
}
-.comments__comment-actions .comments__comment-actions-read-more {
- color: var( --color-primary );
- margin: 0 10px 0 -3px;
- padding-left: 0;
-}
-
-.comments__comment-actions-read-more-icon {
- fill: var( --color-primary );
-}
-
.comments__comment-actions-moderation-tools {
display: inline-block;
}
diff --git a/client/blocks/comments/comment-approve-action.jsx b/client/blocks/comments/comment-approve-action.jsx
index 0ae8b371b97ab..67dcf47ab53b7 100644
--- a/client/blocks/comments/comment-approve-action.jsx
+++ b/client/blocks/comments/comment-approve-action.jsx
@@ -9,6 +9,11 @@ import { localize } from 'i18n-calypso';
import Gridicon from 'components/gridicon';
import classnames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import { Button } from '@wordpress/components';
+
/**
* Style dependencies
*/
@@ -21,12 +26,12 @@ const CommentApproveAction = ( { translate, status, approveComment, unapproveCom
} );
return (
-
+
{ isApproved ? translate( 'Approved' ) : translate( 'Approve' ) }
-
+
);
};
diff --git a/client/blocks/comments/comment-approve-action.scss b/client/blocks/comments/comment-approve-action.scss
index 06bc0b839aa39..c28d83cec94c5 100644
--- a/client/blocks/comments/comment-approve-action.scss
+++ b/client/blocks/comments/comment-approve-action.scss
@@ -1,4 +1,4 @@
-.comments__comment-actions-approve {
+.comments__comment-actions-approve.components-button {
.gridicon .gridicon-checkmark,
&.is-approved {
color: var( --color-success );