From 984f26c98e08e2b4706292beaa9422cafac81f07 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Wed, 24 Aug 2022 20:33:16 -0400
Subject: [PATCH] Polish up the My Stories page

---
 stylesheets/components/MyStories.scss     | 37 ++++++++++----
 stylesheets/components/Stories.scss       |  4 +-
 stylesheets/components/StoryListItem.scss |  5 +-
 ts/components/MyStories.tsx               | 59 ++++++++++++-----------
 ts/components/TextAttachment.tsx          |  7 ++-
 5 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/stylesheets/components/MyStories.scss b/stylesheets/components/MyStories.scss
index fec508d57..39b195fe3 100644
--- a/stylesheets/components/MyStories.scss
+++ b/stylesheets/components/MyStories.scss
@@ -3,19 +3,32 @@
 
 .MyStories {
   &__distribution {
-    padding: 0 14px;
-
     &__title {
       @include font-body-1-bold;
       color: $color-gray-05;
-      margin: 24px 0 8px 0;
+      margin: 24px 10px 8px 10px;
     }
   }
 
+  &__story-button {
+    flex: 1;
+  }
+
   &__story {
     align-items: center;
+    border-radius: 10px;
     display: flex;
     height: 96px;
+    padding-right: 10px;
+
+    &:hover {
+      background: $color-gray-65;
+
+      & .MyStories__story__download,
+      .MyStories__story__more__button {
+        background: $color-gray-60;
+      }
+    }
 
     &__details {
       @include font-body-1-bold;
@@ -23,11 +36,7 @@
       display: flex;
       flex-direction: column;
       flex: 1;
-    }
-
-    &__preview {
-      @include button-reset;
-      margin-right: 12px;
+      margin-left: 12px;
     }
 
     &__timestamp {
@@ -48,12 +57,16 @@
       &::after {
         @include color-svg(
           '../images/icons/v2/save-outline-24.svg',
-          $color-gray-25
+          $color-gray-15
         );
         content: '';
         height: 18px;
         width: 18px;
       }
+
+      &:hover {
+        background: $color-gray-75 !important;
+      }
     }
 
     &__more__button {
@@ -69,12 +82,16 @@
       &::after {
         @include color-svg(
           '../images/icons/v2/more-horiz-24.svg',
-          $color-gray-25
+          $color-gray-15
         );
         content: '';
         height: 18px;
         width: 18px;
       }
+
+      &:hover {
+        background: $color-gray-75 !important;
+      }
     }
   }
 
diff --git a/stylesheets/components/Stories.scss b/stylesheets/components/Stories.scss
index d05d6ad0a..42f283164 100644
--- a/stylesheets/components/Stories.scss
+++ b/stylesheets/components/Stories.scss
@@ -41,7 +41,7 @@
       margin-left: 24px;
       opacity: 1;
       position: absolute;
-      right: 14px;
+      right: 16px;
       top: 0px;
       width: 22px;
     }
@@ -114,7 +114,7 @@
   }
 
   &__search__container {
-    margin: 14px 16px 8px 16px;
+    margin: 14px 16px 10px 16px;
   }
 
   &__placeholder {
diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index 3e3546344..de182135b 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -8,6 +8,7 @@
     border-radius: 10px;
     display: flex;
     height: 96px;
+    min-height: 96px;
     padding: 0 10px;
     width: 100%;
 
@@ -87,14 +88,16 @@
       @include button-reset;
 
       align-items: center;
-      background-size: cover;
       background-color: $color-gray-60;
+      background-size: cover;
       border-radius: 8px;
       display: flex;
       height: 72px;
       justify-content: center;
+      left: 0;
       overflow: hidden;
       position: absolute;
+      top: 0;
       width: 46px;
       z-index: $z-index-base;
     }
diff --git a/ts/components/MyStories.tsx b/ts/components/MyStories.tsx
index 9741a1543..e2038a08a 100644
--- a/ts/components/MyStories.tsx
+++ b/ts/components/MyStories.tsx
@@ -78,18 +78,18 @@ export const MyStories = ({
             </div>
             {list.stories.map(story => (
               <div className="MyStories__story" key={story.timestamp}>
-                {story.attachment && (
-                  <button
-                    aria-label={i18n('MyStories__story')}
-                    className="MyStories__story__preview"
-                    onClick={() =>
-                      viewStory({
-                        storyId: story.messageId,
-                        storyViewMode: StoryViewModeType.User,
-                      })
-                    }
-                    type="button"
-                  >
+                <button
+                  aria-label={i18n('MyStories__story')}
+                  className="StoryListItem__button MyStories__story-button"
+                  onClick={() =>
+                    viewStory({
+                      storyId: story.messageId,
+                      storyViewMode: StoryViewModeType.User,
+                    })
+                  }
+                  type="button"
+                >
+                  <div className="StoryListItem__previews">
                     <StoryImage
                       attachment={story.attachment}
                       firstName={i18n('you')}
@@ -97,26 +97,27 @@ export const MyStories = ({
                       isMe
                       isThumbnail
                       label={i18n('MyStories__story')}
-                      moduleClassName="MyStories__story__preview"
+                      moduleClassName="StoryListItem__previews--image"
                       queueStoryDownload={queueStoryDownload}
                       storyId={story.messageId}
                     />
-                  </button>
-                )}
-                <div className="MyStories__story__details">
-                  {story.views === 1
-                    ? i18n('MyStories__views--singular', [String(story.views)])
-                    : i18n('MyStories__views--plural', [
-                        String(story.views || 0),
-                      ])}
-                  <MessageTimestamp
-                    i18n={i18n}
-                    isRelativeTime
-                    module="MyStories__story__timestamp"
-                    timestamp={story.timestamp}
-                  />
-                </div>
-
+                  </div>
+                  <div className="MyStories__story__details">
+                    {story.views === 1
+                      ? i18n('MyStories__views--singular', [
+                          String(story.views),
+                        ])
+                      : i18n('MyStories__views--plural', [
+                          String(story.views || 0),
+                        ])}
+                    <MessageTimestamp
+                      i18n={i18n}
+                      isRelativeTime
+                      module="MyStories__story__timestamp"
+                      timestamp={story.timestamp}
+                    />
+                  </div>
+                </button>
                 <button
                   aria-label={i18n('MyStories__download')}
                   className="MyStories__story__download"
diff --git a/ts/components/TextAttachment.tsx b/ts/components/TextAttachment.tsx
index 4a53cee7b..433349d9a 100644
--- a/ts/components/TextAttachment.tsx
+++ b/ts/components/TextAttachment.tsx
@@ -133,6 +133,10 @@ export const TextAttachment = ({
     node.setSelectionRange(node.value.length, node.value.length);
   }, [isEditingText]);
 
+  const storyBackgroundColor = {
+    background: getBackgroundColor(textAttachment),
+  };
+
   return (
     <Measure bounds>
       {({ contentRect, measureRef }) => (
@@ -151,11 +155,12 @@ export const TextAttachment = ({
             }
           }}
           ref={measureRef}
+          style={isThumbnail ? storyBackgroundColor : undefined}
         >
           <div
             className="TextAttachment__story"
             style={{
-              background: getBackgroundColor(textAttachment),
+              ...(isThumbnail ? {} : storyBackgroundColor),
               transform: `scale(${(contentRect.bounds?.height || 1) / 1280})`,
             }}
           >