Updates button styles for replies and views

_locales/en/messages.json

@@ -7022,9 +7022,9 @@
     "message": "Reply",
     "description": "Button label to reply to a story"
   },
-  "StoryViewsNRepliesModal__placeholder": {
+  "StoryViewer__reply-group": {
-    "message": "Type a reply...",
+    "message": "Reply to Group",
-    "description": "Placeholder text for the story reply modal"
+    "description": "Button label to reply to a group story"
   },
   "StoryViewsNRepliesModal__no-replies": {
     "message": "No replies yet",

stylesheets/components/StoryViewer.scss

@@ -123,6 +123,35 @@
         color: $color-ultramarine;
       }
     }
+
+    &__arrow {
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        height: 20px;
+        margin-right: 12px;
+        width: 20px;
+        @include color-svg(
+          '../images/icons/v2/reply-outline-24.svg',
+          $color-white
+        );
+      }
+    }
+
+    &__chevron::after {
+      content: '';
+      display: inline-block;
+      height: 20px;
+      margin-left: 12px;
+      vertical-align: middle;
+      width: 20px;
+      @include color-svg(
+        '../images/icons/v2/chevron-right-24.svg',
+        $color-white
+      );
+    }
   }
 
   &__progress {

ts/components/StoryViewer.stories.tsx

@@ -118,6 +118,22 @@ story.add('Multi story', () => {
 story.add('Caption', () => (
   <StoryViewer
     {...getDefaultProps()}
+    group={getDefaultConversation({
+      avatarPath: '/fixtures/kitten-4-112-112.jpg',
+      title: 'Broskis',
+      type: 'group',
+    })}
+    replyState={{
+      messageId: '123',
+      replies: [
+        {
+          ...getDefaultConversation(),
+          body: 'Cool',
+          id: 'abc',
+          timestamp: Date.now(),
+        },
+      ],
+    }}
     stories={[
       {
         attachment: fakeAttachment({

ts/components/StoryViewer.tsx

@@ -513,36 +513,46 @@ export const StoryViewer = ({
                   type="button"
                 >
                   <>
-                    {viewCount > 0 &&
+                    {viewCount > 0 || replyCount > 0 ? (
-                      (viewCount === 1 ? (
+                      <span className="StoryViewer__reply__chevron">
-                        <Intl
+                        {viewCount > 0 &&
-                          i18n={i18n}
+                          (viewCount === 1 ? (
-                          id="MyStories__views--singular"
+                            <Intl
-                          components={[<strong>{viewCount}</strong>]}
+                              i18n={i18n}
-                        />
+                              id="MyStories__views--singular"
-                      ) : (
+                              components={[<strong>{viewCount}</strong>]}
-                        <Intl
+                            />
-                          i18n={i18n}
+                          ) : (
-                          id="MyStories__views--plural"
+                            <Intl
-                          components={[<strong>{viewCount}</strong>]}
+                              i18n={i18n}
-                        />
+                              id="MyStories__views--plural"
-                      ))}
+                              components={[<strong>{viewCount}</strong>]}
-                    {viewCount > 0 && replyCount > 0 && ' '}
+                            />
-                    {replyCount > 0 &&
+                          ))}
-                      (replyCount === 1 ? (
+                        {viewCount > 0 && replyCount > 0 && ' '}
-                        <Intl
+                        {replyCount > 0 &&
-                          i18n={i18n}
+                          (replyCount === 1 ? (
-                          id="MyStories__replies--singular"
+                            <Intl
-                          components={[<strong>{replyCount}</strong>]}
+                              i18n={i18n}
-                        />
+                              id="MyStories__replies--singular"
-                      ) : (
+                              components={[<strong>{replyCount}</strong>]}
-                        <Intl
+                            />
-                          i18n={i18n}
+                          ) : (
-                          id="MyStories__replies--plural"
+                            <Intl
-                          components={[<strong>{replyCount}</strong>]}
+                              i18n={i18n}
-                        />
+                              id="MyStories__replies--plural"
-                      ))}
+                              components={[<strong>{replyCount}</strong>]}
-                    {!viewCount && !replyCount && i18n('StoryViewer__reply')}
+                            />
+                          ))}
+                      </span>
+                    ) : null}
+                    {!viewCount && !replyCount && (
+                      <span className="StoryViewer__reply__arrow">
+                        {isGroupStory
+                          ? i18n('StoryViewer__reply-group')
+                          : i18n('StoryViewer__reply')}
+                      </span>
+                    )}
                   </>
                 </button>
               )}

ts/components/StoryViewsNRepliesModal.tsx

@@ -168,7 +168,11 @@ export const StoryViewsNRepliesModal = ({
               onReply(...args);
             }}
             onTextTooLong={onTextTooLong}
-            placeholder={i18n('StoryViewsNRepliesModal__placeholder')}
+            placeholder={
+              isGroupStory
+                ? i18n('StoryViewer__reply-group')
+                : i18n('StoryViewer__reply')
+            }
             theme={ThemeType.dark}
           >
             <EmojiButton