Message Phone Call: Design improvements

src/components/middle/helpers/groupMessages.ts

@@ -72,8 +72,8 @@ export function groupMessages(messages: ApiMessage[], firstUnreadId?: number) {
         nextMessage.id === firstUnreadId
         || message.senderId !== nextMessage.senderId
         || message.isOutgoing !== nextMessage.isOutgoing
-        || isActionMessage(message)
-        || isActionMessage(nextMessage)
+        || (isActionMessage(message) && !message.content.action?.phoneCall)
+        || (isActionMessage(nextMessage) && !nextMessage.content.action?.phoneCall)
         || (
           message.forwardInfo && nextMessage.forwardInfo
           && (

src/components/middle/message/MessagePhoneCall.module.scss

@@ -4,7 +4,11 @@
 
 .button {
   margin-inline-end: 0.5rem;
-  color: var(--color-text) !important;
+  color: var(--color-accent) !important;
+
+  :global(.own) & {
+    color: var(--color-accent-own) !important;
+  }
 }
 
 .info {
@@ -26,26 +30,29 @@
 
   &.incoming {
     transform: rotateZ(135deg);
+  }
 
-    &.missed {
-      color: var(--color-error);
-    }
+  :global(.own) & {
+    color: var(--color-accent-own);
+  }
+
+  &.missed, &.canceled {
+    color: var(--color-error);
   }
 }
 
 .meta {
   display: flex;
   align-items: center;
-  position: relative;
-  left: -3px;
+  margin-left: -0.1875rem;
 }
 
 .duration {
   margin-inline-start: 0.25rem;
   font-size: 0.875rem;
-  color: var(--color-text-secondary)
-}
+  color: var(--color-text-secondary);
 
-:global(.own) .duration {
-  color: var(--color-message-meta-own);
+  :global(.own) & {
+    color: var(--color-message-meta-own);
+  }
 }

src/components/middle/message/MessagePhoneCall.tsx

@@ -29,9 +29,11 @@ const MessagePhoneCall: FC<OwnProps> = ({
   const { requestMasterAndRequestCall } = getActions();
 
   const lang = useLang();
-  const { isOutgoing, isVideo, reason } = phoneCall;
+  const {
+    isOutgoing, isVideo, reason, duration,
+  } = phoneCall;
   const isMissed = reason === 'missed';
-  const isCancelled = reason === 'busy' && !isOutgoing;
+  const isCancelled = reason === 'busy' || duration === undefined;
 
   const handleCall = useLastCallback(() => {
     requestMasterAndRequestCall({ isVideo, userId: chatId });
@@ -39,19 +41,19 @@ const MessagePhoneCall: FC<OwnProps> = ({
 
   const reasonText = useMemo(() => {
     if (isVideo) {
-      if (isCancelled) return 'CallMessageVideoIncomingDeclined';
       if (isMissed) return isOutgoing ? 'CallMessageVideoOutgoingMissed' : 'CallMessageVideoIncomingMissed';
+      if (isCancelled) return 'CallMessageVideoIncomingDeclined';
 
       return isOutgoing ? 'CallMessageVideoOutgoing' : 'CallMessageVideoIncoming';
     } else {
-      if (isCancelled) return 'CallMessageIncomingDeclined';
       if (isMissed) return isOutgoing ? 'CallMessageOutgoingMissed' : 'CallMessageIncomingMissed';
+      if (isCancelled) return 'CallMessageIncomingDeclined';
 
       return isOutgoing ? 'CallMessageOutgoing' : 'CallMessageIncoming';
     }
   }, [isCancelled, isMissed, isOutgoing, isVideo]);
 
-  const duration = useMemo(() => {
+  const formattedDuration = useMemo(() => {
     return phoneCall.duration ? formatTimeDuration(lang, phoneCall.duration) : undefined;
   }, [lang, phoneCall.duration]);
 
@@ -79,11 +81,12 @@ const MessagePhoneCall: FC<OwnProps> = ({
               'icon-arrow-right',
               styles.arrow,
               isMissed && styles.missed,
+              isCancelled && styles.canceled,
               !isOutgoing && styles.incoming,
             )}
           />
           <span className={styles.duration}>
-            {duration ? lang('CallMessageWithDuration', [timeFormatted, duration]) : timeFormatted}
+            {formattedDuration ? lang('CallMessageWithDuration', [timeFormatted, formattedDuration]) : timeFormatted}
           </span>
         </div>
       </div>