Add icon to the left pane archive button

This commit is contained in:
Evan Hahn 2021-10-06 10:45:25 -05:00 committed by GitHub
parent 6f7e5d6242
commit 0f9608d9a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 3 deletions

View File

@ -5656,9 +5656,10 @@ button.module-image__border-overlay:focus {
&--archive-button {
@include button-reset;
@include font-body-1-bold;
align-items: center;
display: flex;
height: 64px;
justify-content: center;
line-height: 64px;
text-align: center;
width: 100%;
@ -5679,6 +5680,34 @@ button.module-image__border-overlay:focus {
}
}
&__icon {
&::before {
display: block;
content: '';
width: 24px;
height: 24px;
@include light-theme {
@include color-svg(
'../images/icons/v2/archive-outline-16.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/archive-solid-16.svg',
$color-gray-25
);
}
}
}
&__text {
@include font-body-1-bold;
margin-left: 8px;
margin-right: 8px;
}
&__archived-count {
@include font-body-2-bold;

View File

@ -197,7 +197,10 @@ export const ConversationList: React.FC<PropsType> = ({
onClick={onClickArchiveButton}
type="button"
>
{i18n('archivedConversations')}{' '}
<div className="module-conversation-list__item--archive-button__icon" />
<span className="module-conversation-list__item--archive-button__text">
{i18n('archivedConversations')}
</span>
<span className="module-conversation-list__item--archive-button__archived-count">
{row.archivedConversationsCount}
</span>