Polish up the My Stories page

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;
+      }
     }
   }
 

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 {

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;
     }

ts/components/MyStories.tsx

@@ -78,10 +78,9 @@ 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"
+                  className="StoryListItem__button MyStories__story-button"
                   onClick={() =>
                     viewStory({
                       storyId: story.messageId,
@@ -90,6 +89,7 @@ export const MyStories = ({
                   }
                   type="button"
                 >
+                  <div className="StoryListItem__previews">
                     <StoryImage
                       attachment={story.attachment}
                       firstName={i18n('you')}
@@ -97,15 +97,16 @@ export const MyStories = ({
                       isMe
                       isThumbnail
                       label={i18n('MyStories__story')}
-                      moduleClassName="MyStories__story__preview"
+                      moduleClassName="StoryListItem__previews--image"
                       queueStoryDownload={queueStoryDownload}
                       storyId={story.messageId}
                     />
-                  </button>
-                )}
+                  </div>
                   <div className="MyStories__story__details">
                     {story.views === 1
-                    ? i18n('MyStories__views--singular', [String(story.views)])
+                      ? i18n('MyStories__views--singular', [
+                          String(story.views),
+                        ])
                       : i18n('MyStories__views--plural', [
                           String(story.views || 0),
                         ])}
@@ -116,7 +117,7 @@ export const MyStories = ({
                       timestamp={story.timestamp}
                     />
                   </div>
-
+                </button>
                 <button
                   aria-label={i18n('MyStories__download')}
                   className="MyStories__story__download"

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})`,
             }}
           >