Fix image in AvatarLightbox for Note to Self

stylesheets/components/AvatarPreview.scss

@@ -48,6 +48,13 @@
     width: 100%;
   }
 
+  &__note_to_self {
+    -webkit-mask: url('../images/icons/v3/note/note.svg') no-repeat center;
+    -webkit-mask-size: 70%;
+    height: 100%;
+    width: 100%;
+  }
+
   &__upload {
     align-items: center;
     background: $color-gray-02;

ts/components/AvatarLightbox.tsx

@@ -15,6 +15,7 @@ export type PropsType = {
   conversationTitle?: string;
   i18n: LocalizerType;
   isGroup?: boolean;
+  noteToSelf?: boolean;
   onClose: () => unknown;
 };
 
@@ -24,6 +25,7 @@ export function AvatarLightbox({
   conversationTitle,
   i18n,
   isGroup,
+  noteToSelf,
   onClose,
 }: PropsType): JSX.Element {
   return (
@@ -47,6 +49,7 @@ export function AvatarLightbox({
         conversationTitle={conversationTitle}
         i18n={i18n}
         isGroup={isGroup}
+        noteToSelf={noteToSelf}
         style={{
           fontSize: '16em',
           width: 'auto',

ts/components/AvatarPreview.tsx

@@ -21,6 +21,7 @@ export type PropsType = {
   i18n: LocalizerType;
   isEditable?: boolean;
   isGroup?: boolean;
+  noteToSelf?: boolean;
   onAvatarLoaded?: (avatarBuffer: Uint8Array) => unknown;
   onClear?: () => unknown;
   onClick?: () => unknown;
@@ -41,6 +42,7 @@ export function AvatarPreview({
   i18n,
   isEditable,
   isGroup,
+  noteToSelf,
   onAvatarLoaded,
   onClear,
   onClick,
@@ -117,6 +119,8 @@ export function AvatarPreview({
   let encodedPath: string | undefined;
   if (avatarValue && !objectUrl) {
     imageStatus = ImageStatus.Loading;
+  } else if (noteToSelf) {
+    imageStatus = ImageStatus.Nothing;
   } else if (objectUrl) {
     encodedPath = objectUrl;
     imageStatus = ImageStatus.HasImage;
@@ -149,6 +153,23 @@ export function AvatarPreview({
   }
 
   if (imageStatus === ImageStatus.Nothing) {
+    let content: JSX.Element | string | undefined;
+    if (isGroup) {
+      content = (
+        <div
+          className={`BetterAvatarBubble--${avatarColor}--icon AvatarPreview__group`}
+        />
+      );
+    } else if (noteToSelf) {
+      content = (
+        <div
+          className={`BetterAvatarBubble--${avatarColor}--icon AvatarPreview__note_to_self`}
+        />
+      );
+    } else {
+      content = getInitials(conversationTitle);
+    }
+
     return (
       <div className="AvatarPreview">
         <div
@@ -156,13 +177,7 @@ export function AvatarPreview({
           {...clickProps}
           style={componentStyle}
         >
-          {isGroup ? (
-            <div
-              className={`BetterAvatarBubble--${avatarColor}--icon AvatarPreview__group`}
-            />
-          ) : (
-            getInitials(conversationTitle)
-          )}
+          {content}
           {isEditable && <div className="AvatarPreview__upload" />}
         </div>
       </div>

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -111,6 +111,7 @@ export function ConversationDetailsHeader({
           conversationTitle={conversation.title}
           i18n={i18n}
           isGroup={isGroup}
+          noteToSelf={isMe}
           onClose={() => {
             setActiveModal(undefined);
           }}