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;
-    }
+      margin-left: 12px;
-
-    &__preview {
-      @include button-reset;
-      margin-right: 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,18 +78,18 @@ export const MyStories = ({
             </div>
             {list.stories.map(story => (
               <div className="MyStories__story" key={story.timestamp}>
-                {story.attachment && (
+                <button
-                  <button
+                  aria-label={i18n('MyStories__story')}
-                    aria-label={i18n('MyStories__story')}
+                  className="StoryListItem__button MyStories__story-button"
-                    className="MyStories__story__preview"
+                  onClick={() =>
-                    onClick={() =>
+                    viewStory({
-                      viewStory({
+                      storyId: story.messageId,
-                        storyId: story.messageId,
+                      storyViewMode: StoryViewModeType.User,
-                        storyViewMode: StoryViewModeType.User,
+                    })
-                      })
+                  }
-                    }
+                  type="button"
-                    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>
-                )}
+                  <div className="MyStories__story__details">
-                <div className="MyStories__story__details">
+                    {story.views === 1
-                  {story.views === 1
+                      ? i18n('MyStories__views--singular', [
-                    ? i18n('MyStories__views--singular', [String(story.views)])
+                          String(story.views),
-                    : i18n('MyStories__views--plural', [
+                        ])
-                        String(story.views || 0),
+                      : i18n('MyStories__views--plural', [
-                      ])}
+                          String(story.views || 0),
-                  <MessageTimestamp
+                        ])}
-                    i18n={i18n}
+                    <MessageTimestamp
-                    isRelativeTime
+                      i18n={i18n}
-                    module="MyStories__story__timestamp"
+                      isRelativeTime
-                    timestamp={story.timestamp}
+                      module="MyStories__story__timestamp"
-                  />
+                      timestamp={story.timestamp}
-                </div>
+                    />
-
+                  </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})`,
             }}
           >