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 fec508d577d7..39b195fe3b24 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 d05d6ad0afb8..42f283164a07 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 3e354634494a..de182135b181 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 9741a1543a20..e2038a08aa66 100644 --- a/ts/components/MyStories.tsx +++ b/ts/components/MyStories.tsx @@ -78,18 +78,18 @@ export const MyStories = ({ {list.stories.map(story => (