My stories button improvements

This commit is contained in:
Josh Perez 2022-08-24 20:34:17 -04:00 committed by GitHub
parent 984f26c98e
commit 76e73f63dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 3 deletions

View file

@ -23,6 +23,13 @@
}
}
&--active-opacity,
&--active-opacity__button {
&:active {
opacity: 0.3;
}
}
&__click-container {
align-items: center;
display: flex;
@ -139,4 +146,14 @@
);
}
}
&__chevron::after {
content: '';
display: inline-block;
height: 20px;
margin-left: 6px;
vertical-align: middle;
width: 12px;
@include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
}
}

View file

@ -8,6 +8,7 @@ import type { LocalizerType } from '../types/Util';
import type { ShowToastActionCreatorType } from '../state/ducks/toast';
import type { StoryViewType } from '../types/Stories';
import { Avatar, AvatarSize } from './Avatar';
import { HasStories } from '../types/Stories';
import { StoryImage } from './StoryImage';
import { getAvatarColor } from '../types/Colors';
import { MessageTimestamp } from './conversation/MessageTimestamp';
@ -50,7 +51,7 @@ export const MyStoriesButton = ({
return (
<StoriesAddStoryButton
i18n={i18n}
moduleClassName="StoryListItem"
moduleClassName="StoryListItem StoryListItem--active-opactiy"
onAddStory={onAddStory}
showToast={showToast}
>
@ -93,6 +94,7 @@ export const MyStoriesButton = ({
<div className="MyStories__avatar-container">
<StoriesAddStoryButton
i18n={i18n}
moduleClassName="StoryListItem--active-opacity"
onAddStory={onAddStory}
showToast={showToast}
>
@ -108,6 +110,7 @@ export const MyStoriesButton = ({
profileName={profileName}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.FORTY_EIGHT}
storyRing={HasStories.Read}
title={title}
/>
<div
@ -117,7 +120,7 @@ export const MyStoriesButton = ({
</StoriesAddStoryButton>
</div>
<div
className="StoryListItem__click-container"
className="StoryListItem__click-container StoryListItem--active-opacity"
onClick={onClick}
onKeyDown={ev => {
if (ev.key === 'Enter') {
@ -130,7 +133,7 @@ export const MyStoriesButton = ({
tabIndex={0}
>
<div className="StoryListItem__info">
<div className="StoryListItem__info--title">
<div className="StoryListItem__info--title StoryListItem__chevron">
{i18n('Stories__mine')}
</div>
<MessageTimestamp