Restyle Call Link 'join call' button

stylesheets/_modules.scss

@@ -953,7 +953,7 @@ $message-padding-horizontal: 12px;
   padding-inline: $message-padding-horizontal;
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
 
   @include light-theme {
     background-color: $color-gray-02;
@@ -992,6 +992,7 @@ $message-padding-horizontal: 12px;
 .module-message__link-preview__description {
   @include font-body-2;
 
+  margin-top: 4px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 5;
@@ -7598,22 +7599,35 @@ button.module-calling-participants-list__contact {
 
 .module-message__action {
   @include button-reset();
-  margin-top: 5px;
-  padding: 10px;
+  border-radius: 30px;
+  margin-top: 14px;
+  margin-bottom: 4px;
+  padding: 8px;
   text-align: center;
   width: 100%;
+
   @include font-body-1-bold();
-  border-top: 1px solid;
 }
 .module-message__action--outgoing {
-  border-top-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba($color-white, 0.22);
+  &:hover {
+    background-color: rgba($color-white, 0.36);
+  }
 }
 .module-message__action--incoming {
   @include light-theme {
-    border-top-color: rgba(0, 0, 0, 0.25);
+    color: $color-link;
+    background-color: $color-white-alpha-70;
+    &:hover {
+      background-color: $color-white;
+    }
   }
   @include dark-theme {
-    border-top-color: rgba(255, 255, 255, 0.25);
+    color: $color-white;
+    background-color: rgba($color-white, 0.07);
+    &:hover {
+      background-color: rgba($color-white, 0.17);
+    }
   }
 }
 
@@ -7621,19 +7635,7 @@ button.module-calling-participants-list__contact {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 64px;
-  height: 64px;
   margin-inline-end: 12px;
-  background: #e5e5fe;
-  @include rounded-corners();
-  &::before {
-    content: '';
-    display: block;
-    width: 36px;
-    height: 36px;
-    @include color-svg(
-      '../images/icons/v3/video/video-display-bold.svg',
-      #5151f6
-    );
-  }
+  margin-top: 4px;
+  margin-bottom: 4px;
 }

stylesheets/_variables.scss

@@ -70,6 +70,7 @@ $color-ultramarine-light: #6191f3;
 $color-ultramarine-dawn: #406ec9;
 $color-ultramarine-pastel: #abc4f8;
 $color-ultramarine: #2c6bed;
+$color-link: #315ff4;
 
 // Flat colors
 

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 &&

ts/components/conversation/TimelineMessage.stories.tsx

@@ -1122,6 +1122,25 @@ LinkPreviewWithCallLink.args = {
   text: 'Use this link to join a Signal call: https://signal.link/call/#key=hzcn-pcff-ctsc-bdbf-stcr-tzpc-bhqx-kghh',
 };
 
+export const LinkPreviewWithCallLinkInGroup = Template.bind({});
+LinkPreviewWithCallLinkInGroup.args = {
+  previews: [
+    {
+      url: 'https://signal.link/call/#key=hzcn-pcff-ctsc-bdbf-stcr-tzpc-bhqx-kghh',
+      domain: 'signal.link',
+      title: 'Camping Prep',
+      description: 'Use this link to join a Signal call',
+      image: undefined,
+      date: undefined,
+      isCallLink: true,
+      isStickerPack: false,
+    },
+  ],
+  conversationType: 'group',
+  status: 'sent',
+  text: 'Use this link to join a Signal call: https://signal.link/call/#key=hzcn-pcff-ctsc-bdbf-stcr-tzpc-bhqx-kghh',
+};
+
 export function Image(): JSX.Element {
   const darkImageProps = createProps({
     attachments: [

ts/util/getColorForCallLink.ts

@@ -18,3 +18,11 @@ export function getColorForCallLink(rootKey: string): string {
 
   return AvatarColors[index];
 }
+
+export function getKeyFromCallLink(callLink: string): string {
+  const url = new URL(callLink);
+  const hash = url.hash.slice(1);
+  const hashParams = new URLSearchParams(hash);
+
+  return hashParams.get('key') || '';
+}