My stories button improvements
This commit is contained in:
parent
984f26c98e
commit
76e73f63dc
2 changed files with 23 additions and 3 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue