Update views/replies chevron in story viewer

images/icons/v2/chevron-right-20.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 12 20" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m10.2832 9.71191c0-.24902-.0952-.46142-.28564-.65185l-5.71289-5.58838c-.16113-.16113-.35889-.2417-.59326-.2417-.47608 0-.85694.36621-.85694.84229 0 .23437.09522.44677.25635.61523l5.15625 5.02441-5.15625 5.02439c-.15381.1612-.25635.3736-.25635.6079 0 .4834.38086.8496.85694.8496.23437 0 .43213-.0805.59326-.2417l5.71289-5.5883c.19774-.1905.28564-.40286.28564-.65189z" fill="#000"/></svg>

stylesheets/components/StoryViewer.scss

@@ -136,11 +136,11 @@
       content: '';
       display: inline-block;
       height: 20px;
-      margin-left: 12px;
+      margin-left: 6px;
       vertical-align: middle;
       width: 20px;
       @include color-svg(
-        '../images/icons/v2/chevron-right-24.svg',
+        '../images/icons/v2/chevron-right-20.svg',
         $color-white
       );
     }

ts/components/StoryViewer.stories.tsx

@@ -5,12 +5,13 @@ import type { Meta, Story } from '@storybook/react';
 import React from 'react';
 
 import type { PropsType } from './StoryViewer';
-import { StoryViewer } from './StoryViewer';
 import enMessages from '../../_locales/en/messages.json';
-import { setupI18n } from '../util/setupI18n';
+import { SendStatus } from '../messages/MessageSendState';
-import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+import { StoryViewer } from './StoryViewer';
 import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { getFakeStoryView } from '../test-both/helpers/getFakeStory';
+import { setupI18n } from '../util/setupI18n';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -135,7 +136,20 @@ export const YourStory = Template.bind({});
         ...storyView.sender,
         isMe: true,
       },
-      sendState: [],
+      sendState: [
+        {
+          recipient: getDefaultConversation(),
+          status: SendStatus.Viewed,
+        },
+        {
+          recipient: getDefaultConversation(),
+          status: SendStatus.Delivered,
+        },
+        {
+          recipient: getDefaultConversation(),
+          status: SendStatus.Pending,
+        },
+      ],
     },
   };
   YourStory.storyName = 'Your story';

ts/components/StoryViewer.tsx

@@ -610,7 +610,7 @@ export const StoryViewer = ({
               ))}
             </div>
             <div className="StoryViewer__actions">
-              {canReply && (
+              {(canReply || sendState) && (
                 <button
                   className="StoryViewer__reply"
                   onClick={() => setHasStoryViewsNRepliesModal(true)}