diff --git a/images/icons/v2/chevron-right-20.svg b/images/icons/v2/chevron-right-20.svg new file mode 100644 index 0000000000..ffb51c12df --- /dev/null +++ b/images/icons/v2/chevron-right-20.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss index 4643b6e4a6..ebbda99a33 100644 --- a/stylesheets/components/StoryViewer.scss +++ b/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 ); } diff --git a/ts/components/StoryViewer.stories.tsx b/ts/components/StoryViewer.stories.tsx index cf63f41733..0d992ddf58 100644 --- a/ts/components/StoryViewer.stories.tsx +++ b/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 { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; +import { SendStatus } from '../messages/MessageSendState'; +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'; diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx index ec21ad5349..d2569634b9 100644 --- a/ts/components/StoryViewer.tsx +++ b/ts/components/StoryViewer.tsx @@ -610,7 +610,7 @@ export const StoryViewer = ({ ))}
- {canReply && ( + {(canReply || sendState) && (