Merge pull request #16189 from guardian/update-icon-for-view-more-comments

update view more comments icon and Show more replies icon

Author: williammead

dotcom-rendering/src/components/Discussion.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { isUndefined, storage } from '@guardian/libs';
 import { space } from '@guardian/source/foundations';
-import { SvgPlus } from '@guardian/source/react-components';
+import { SvgChevronDownSingle } from '@guardian/source/react-components';
 import { useEffect, useReducer } from 'react';
 import { assertUnreachable } from '../lib/assert-unreachable';
 import type {
@@ -536,7 +536,7 @@ export const Discussion = ({
 					onClick={() => {
 						dispatch({ type: 'expandComments' });
 					}}
-					icon={<SvgPlus />}
+					icon={<SvgChevronDownSingle />}
 					linkName="view-more-comments"
 				>
 					View more comments

dotcom-rendering/src/components/Discussion/CommentContainer.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source/foundations';
-import { SvgPlus } from '@guardian/source/react-components';
+import { SvgChevronDownSingle } from '@guardian/source/react-components';
 import { useState } from 'react';
 import type {
 	CommentType,
@@ -199,7 +199,7 @@ export const CommentContainer = ({
 							>
 								<PillarButton
 									priority="secondary"
-									icon={<SvgPlus />}
+									icon={<SvgChevronDownSingle />}
 									iconSide="left"
 									linkName="Show more replies"
 									onClick={() => expand(comment.id)}

dotcom-rendering/src/components/PinnedPost.tsx

@@ -12,9 +12,9 @@ import {
 	visuallyHidden,
 } from '@guardian/source/foundations';
 import {
-	SvgMinus,
+	SvgChevronDownSingle,
+	SvgChevronUpSingle,
 	SvgPinned,
-	SvgPlus,
 } from '@guardian/source/react-components';
 import { palette } from '../palette';
 import type { Block } from '../types/blocks';
@@ -36,12 +36,12 @@ const pinnedPostContainer = css`
 		margin-bottom: ${space[1]}px;
 	}
 	#pinned-post-checkbox:checked ~ #pinned-post-overlay,
-	#pinned-post-checkbox ~ label #svgminus,
-	#pinned-post-checkbox:checked ~ label #svgplus {
+	#pinned-post-checkbox ~ label #svgchevronupsingle,
+	#pinned-post-checkbox:checked ~ label #svgchevrondownsingle {
 		display: none;
 	}
-	#pinned-post-checkbox ~ label #svgplus,
-	#pinned-post-checkbox:checked ~ label #svgminus {
+	#pinned-post-checkbox ~ label #svgchevrondownsingle,
+	#pinned-post-checkbox:checked ~ label #svgchevronupsingle {
 		display: block;
 	}
 	#pinned-post-checkbox ~ label::after {
@@ -188,11 +188,11 @@ export const PinnedPost = ({ pinnedPost, children, serverTime }: Props) => {
 				id="pinned-post-button"
 			>
 				<>
-					<span id="svgminus" css={buttonIcon}>
-						<SvgMinus />
+					<span id="svgchevronupsingle" css={buttonIcon}>
+						<SvgChevronUpSingle />
 					</span>
-					<span id="svgplus" css={buttonIcon}>
-						<SvgPlus />
+					<span id="svgchevrondownsingle" css={buttonIcon}>
+						<SvgChevronDownSingle />
 					</span>
 				</>
 			</label>