From 85df5cf1d830f21921ecc8c7c106f7e8ff8269cb Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 6 May 2022 12:17:33 -0400
Subject: [PATCH] Updates button styles for replies and views

---
 _locales/en/messages.json                 |  6 +-
 stylesheets/components/StoryViewer.scss   | 29 ++++++++++
 ts/components/StoryViewer.stories.tsx     | 16 ++++++
 ts/components/StoryViewer.tsx             | 70 +++++++++++++----------
 ts/components/StoryViewsNRepliesModal.tsx |  6 +-
 5 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 0c83b3fd7376..b021e5263739 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -7022,9 +7022,9 @@
     "message": "Reply",
     "description": "Button label to reply to a story"
   },
-  "StoryViewsNRepliesModal__placeholder": {
-    "message": "Type a reply...",
-    "description": "Placeholder text for the story reply modal"
+  "StoryViewer__reply-group": {
+    "message": "Reply to Group",
+    "description": "Button label to reply to a group story"
   },
   "StoryViewsNRepliesModal__no-replies": {
     "message": "No replies yet",
diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
index 8af9a70ca95f..8e4a39919f20 100644
--- a/stylesheets/components/StoryViewer.scss
+++ b/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 {
diff --git a/ts/components/StoryViewer.stories.tsx b/ts/components/StoryViewer.stories.tsx
index b69cb33ed27a..f64c6695d547 100644
--- a/ts/components/StoryViewer.stories.tsx
+++ b/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({
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index 968eca1eeff6..a682bfe4b141 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -513,36 +513,46 @@ export const StoryViewer = ({
                   type="button"
                 >
                   <>
-                    {viewCount > 0 &&
-                      (viewCount === 1 ? (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__views--singular"
-                          components={[<strong>{viewCount}</strong>]}
-                        />
-                      ) : (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__views--plural"
-                          components={[<strong>{viewCount}</strong>]}
-                        />
-                      ))}
-                    {viewCount > 0 && replyCount > 0 && ' '}
-                    {replyCount > 0 &&
-                      (replyCount === 1 ? (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__replies--singular"
-                          components={[<strong>{replyCount}</strong>]}
-                        />
-                      ) : (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__replies--plural"
-                          components={[<strong>{replyCount}</strong>]}
-                        />
-                      ))}
-                    {!viewCount && !replyCount && i18n('StoryViewer__reply')}
+                    {viewCount > 0 || replyCount > 0 ? (
+                      <span className="StoryViewer__reply__chevron">
+                        {viewCount > 0 &&
+                          (viewCount === 1 ? (
+                            <Intl
+                              i18n={i18n}
+                              id="MyStories__views--singular"
+                              components={[<strong>{viewCount}</strong>]}
+                            />
+                          ) : (
+                            <Intl
+                              i18n={i18n}
+                              id="MyStories__views--plural"
+                              components={[<strong>{viewCount}</strong>]}
+                            />
+                          ))}
+                        {viewCount > 0 && replyCount > 0 && ' '}
+                        {replyCount > 0 &&
+                          (replyCount === 1 ? (
+                            <Intl
+                              i18n={i18n}
+                              id="MyStories__replies--singular"
+                              components={[<strong>{replyCount}</strong>]}
+                            />
+                          ) : (
+                            <Intl
+                              i18n={i18n}
+                              id="MyStories__replies--plural"
+                              components={[<strong>{replyCount}</strong>]}
+                            />
+                          ))}
+                      </span>
+                    ) : null}
+                    {!viewCount && !replyCount && (
+                      <span className="StoryViewer__reply__arrow">
+                        {isGroupStory
+                          ? i18n('StoryViewer__reply-group')
+                          : i18n('StoryViewer__reply')}
+                      </span>
+                    )}
                   </>
                 </button>
               )}
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index cb09d35dda84..dc04f7622870 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/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