diff --git a/images/icons/v2/sound-off-outline-24.svg b/images/icons/v2/sound-off-outline-24.svg
deleted file mode 100644
index 43aefe49c..000000000
--- a/images/icons/v2/sound-off-outline-24.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 023b314cd..a6047b7d0 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5848,6 +5848,8 @@ button.module-image__border-overlay:focus {
}
&__name {
+ align-items: center;
+ display: flex;
flex-grow: 1;
flex-shrink: 1;
@@ -5863,6 +5865,34 @@ button.module-image__border-overlay:focus {
@include dark-theme {
color: $color-gray-05;
}
+
+ &__contact-name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__mute-icon {
+ $size: 14px;
+
+ height: $size;
+ margin-inline-start: 8px;
+ min-width: $size;
+ width: $size;
+
+ @include light-theme {
+ @include color-svg(
+ '../images/icons/v2/bell-disabled-outline-24.svg',
+ $color-gray-45
+ );
+ }
+
+ @include dark-theme {
+ @include color-svg(
+ '../images/icons/v2/bell-disabled-solid-24.svg',
+ $color-gray-25
+ );
+ }
+ }
}
&__date {
@@ -5926,27 +5956,6 @@ button.module-image__border-overlay:focus {
height: 36px; // two lines
}
- &__muted {
- display: inline-block;
- height: 14px;
- margin-right: 4px;
- vertical-align: middle;
- width: 14px;
-
- @include light-theme {
- @include color-svg(
- '../images/icons/v2/sound-off-outline-24.svg',
- $color-gray-60
- );
- }
- @include dark-theme {
- @include color-svg(
- '../images/icons/v2/sound-off-outline-24.svg',
- $color-gray-25
- );
- }
- }
-
&__message-request {
@include font-body-2-bold;
diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
index 99bf89b6c..1b6d2e1b2 100644
--- a/ts/components/conversationList/BaseConversationListItem.tsx
+++ b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -16,6 +16,8 @@ const BASE_CLASS_NAME =
'module-conversation-list__item--contact-or-conversation';
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
+export const HEADER_NAME_CLASS_NAME = `${HEADER_CLASS_NAME}__name`;
+export const HEADER_CONTACT_NAME_CLASS_NAME = `${HEADER_NAME_CLASS_NAME}__contact-name`;
export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
const TIMESTAMP_CLASS_NAME = `${DATE_CLASS_NAME}__timestamp`;
const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
diff --git a/ts/components/conversationList/ContactCheckbox.tsx b/ts/components/conversationList/ContactCheckbox.tsx
index 138d9e6aa..5f88ae993 100644
--- a/ts/components/conversationList/ContactCheckbox.tsx
+++ b/ts/components/conversationList/ContactCheckbox.tsx
@@ -3,7 +3,10 @@
import React, { FunctionComponent, ReactNode } from 'react';
-import { BaseConversationListItem } from './BaseConversationListItem';
+import {
+ BaseConversationListItem,
+ HEADER_CONTACT_NAME_CLASS_NAME,
+} from './BaseConversationListItem';
import { ConversationType } from '../../state/ducks/conversations';
import { LocalizerType } from '../../types/Util';
import { ContactName } from '../conversation/ContactName';
@@ -69,9 +72,11 @@ export const ContactCheckbox: FunctionComponent = React.memo(
const disabled = Boolean(disabledReason);
const headerName = isMe ? (
- i18n('noteToSelf')
+
+ {i18n('noteToSelf')}
+
) : (
-
+
);
let messageText: ReactNode;
diff --git a/ts/components/conversationList/ContactListItem.tsx b/ts/components/conversationList/ContactListItem.tsx
index 6c0614ee2..93d70cb0f 100644
--- a/ts/components/conversationList/ContactListItem.tsx
+++ b/ts/components/conversationList/ContactListItem.tsx
@@ -3,7 +3,10 @@
import React, { FunctionComponent } from 'react';
-import { BaseConversationListItem } from './BaseConversationListItem';
+import {
+ BaseConversationListItem,
+ HEADER_CONTACT_NAME_CLASS_NAME,
+} from './BaseConversationListItem';
import { ConversationType } from '../../state/ducks/conversations';
import { LocalizerType } from '../../types/Util';
import { ContactName } from '../conversation/ContactName';
@@ -52,9 +55,11 @@ export const ContactListItem: FunctionComponent = React.memo(
unblurredAvatarPath,
}) {
const headerName = isMe ? (
- i18n('noteToSelf')
+
+ {i18n('noteToSelf')}
+
) : (
-
+
);
const messageText =
diff --git a/ts/components/conversationList/ConversationListItem.tsx b/ts/components/conversationList/ConversationListItem.tsx
index 09beb9370..9c32abb7d 100644
--- a/ts/components/conversationList/ConversationListItem.tsx
+++ b/ts/components/conversationList/ConversationListItem.tsx
@@ -6,6 +6,8 @@ import classNames from 'classnames';
import {
BaseConversationListItem,
+ HEADER_NAME_CLASS_NAME,
+ HEADER_CONTACT_NAME_CLASS_NAME,
MESSAGE_TEXT_CLASS_NAME,
} from './BaseConversationListItem';
import { MessageBody } from '../conversation/MessageBody';
@@ -88,10 +90,18 @@ export const ConversationListItem: FunctionComponent = React.memo(
unblurredAvatarPath,
unreadCount,
}) {
- const headerName = isMe ? (
- i18n('noteToSelf')
- ) : (
-
+ const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt);
+ const headerName = (
+ <>
+ {isMe ? (
+
+ {i18n('noteToSelf')}
+
+ ) : (
+
+ )}
+ {isMuted && }
+
);
let messageText: ReactNode = null;
@@ -146,16 +156,6 @@ export const ConversationListItem: FunctionComponent = React.memo(
}
}
- const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt);
- if (isMuted) {
- messageText = (
- <>
-
- {messageText}
-
- );
- }
-
const onClickItem = useCallback(() => onClick(id), [onClick, id]);
return (