Restyle Call Link 'join call' button

ts/components/conversation/Message.tsx

@@ -96,6 +96,10 @@ import { PanelType } from '../../types/Panels';
 import { openLinkInWebBrowser } from '../../util/openLinkInWebBrowser';
 import { RenderLocation } from './MessageTextRenderer';
 import { UserText } from '../UserText';
+import {
+  getColorForCallLink,
+  getKeyFromCallLink,
+} from '../../util/getColorForCallLink';
 
 const GUESS_METADATA_WIDTH_TIMESTAMP_SIZE = 16;
 const GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE = 18;
@@ -618,6 +622,10 @@ export class Message extends React.PureComponent<Props, State> {
       return MetadataPlacement.Bottom;
     }
 
+    if (this.shouldShowJoinButton()) {
+      return MetadataPlacement.Bottom;
+    }
+
     return MetadataPlacement.InlineWithText;
   }
 
@@ -1239,7 +1247,21 @@ export class Message extends React.PureComponent<Props, State> {
             </div>
           ) : null}
           {first.isCallLink && (
-            <div className="module-message__link-preview__call-link-icon" />
+            <div className="module-message__link-preview__call-link-icon">
+              <Avatar
+                acceptedMessageRequest
+                badge={undefined}
+                color={getColorForCallLink(getKeyFromCallLink(first.url))}
+                conversationType="callLink"
+                i18n={i18n}
+                isMe={false}
+                sharedGroupNames={[]}
+                size={64}
+                title={
+                  first.title ?? i18n('icu:calling__call-link-default-title')
+                }
+              />
+            </div>
           )}
           <div
             className={classNames(
@@ -1945,14 +1967,23 @@ export class Message extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderAction(): JSX.Element | null {
-    const { direction, i18n, previews } = this.props;
+  private shouldShowJoinButton(): boolean {
+    const { previews } = this.props;
+
     if (previews?.length !== 1) {
-      return null;
+      return false;
     }
 
     const onlyPreview = previews[0];
-    if (onlyPreview.isCallLink) {
+    return Boolean(onlyPreview.isCallLink);
+  }
+
+  private renderAction(): JSX.Element | null {
+    const { direction, i18n, previews } = this.props;
+
+    if (this.shouldShowJoinButton()) {
+      const firstPreview = previews[0];
+
       return (
         <button
           type="button"
@@ -1960,7 +1991,7 @@ export class Message extends React.PureComponent<Props, State> {
             'module-message__action--incoming': direction === 'incoming',
             'module-message__action--outgoing': direction === 'outgoing',
           })}
-          onClick={() => openLinkInWebBrowser(onlyPreview.url)}
+          onClick={() => openLinkInWebBrowser(firstPreview?.url)}
         >
           {i18n('icu:calling__join')}
         </button>
@@ -2030,6 +2061,10 @@ export class Message extends React.PureComponent<Props, State> {
       }
     }
 
+    if (firstLinkPreview && firstLinkPreview.isCallLink) {
+      return 300;
+    }
+
     return undefined;
   }
 
@@ -2656,7 +2691,6 @@ export class Message extends React.PureComponent<Props, State> {
       customColor,
       deletedForEveryone,
       direction,
-      giftBadge,
       id,
       isSticker,
       isTapToView,
@@ -2670,10 +2704,7 @@ export class Message extends React.PureComponent<Props, State> {
     const { isTargeted } = this.state;
 
     const isAttachmentPending = this.isAttachmentPending();
-
     const width = this.getWidth();
-    const shouldUseWidth = Boolean(giftBadge || this.isShowingImage());
-
     const isEmojiOnly = this.canRenderStickerLikeEmoji();
     const isStickerLike = isSticker || isEmojiOnly;
 
@@ -2713,7 +2744,7 @@ export class Message extends React.PureComponent<Props, State> {
         : null
     );
     const containerStyles = {
-      width: shouldUseWidth ? width : undefined,
+      width,
     };
     if (
       !isStickerLike &&