Update design of incoming call notifications

Author: robintown

apps/web/res/css/structures/_ToastContainer.pcss

@@ -32,40 +32,32 @@ Please see LICENSE files in the repository root for full details.
         color: $primary-content;
         box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
         border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        border-radius: 12px;
+        border-radius: calc(var(--cpd-space-6x) - var(--cpd-border-width-1));
         overflow: hidden;
         display: grid;
-        grid-template-columns: 22px 1fr;
-        column-gap: 8px;
+        grid-template-columns: 20px 1fr;
+        column-gap: var(--cpd-space-2x);
         row-gap: 4px;
         align-items: center;
-        padding: var(--cpd-space-3x);
+        padding: calc(var(--cpd-space-5x) - var(--cpd-border-width-1));
 
         &.mx_Toast_hasIcon {
             svg {
-                width: 22px;
-                height: 22px;
+                width: 20px;
+                height: 20px;
                 grid-column: 1;
             }
 
             .mx_Toast_title {
                 grid-column: 2;
             }
 
-            .mx_Toast_body {
-                grid-column: 2 / 4;
-            }
-
             .mx_Toast_closebutton {
                 grid-column: 3;
             }
         }
-        &:not(.mx_Toast_hasIcon) {
-            padding-left: 12px;
-
-            .mx_Toast_title {
-                grid-column: 1 / -1;
-            }
+        &:not(.mx_Toast_hasIcon) .mx_Toast_title {
+            grid-column: 1 / -1;
         }
 
         .mx_Toast_title,
@@ -96,7 +88,7 @@ Please see LICENSE files in the repository root for full details.
         .mx_Toast_buttons {
             display: flex;
             justify-content: flex-end;
-            column-gap: 5px;
+            column-gap: var(--cpd-space-2x);
 
             .mx_AccessibleButton {
                 min-width: 96px;

apps/web/res/css/views/toasts/_IncomingCallToast.pcss

@@ -9,64 +9,46 @@ Please see LICENSE files in the repository root for full details.
 .mx_IncomingCallToast {
     position: relative;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     pointer-events: initial; /* restore pointer events so the user can accept/decline */
 
-    $closeButtonSize: var(--cpd-space-4x);
-
     .mx_IncomingCallToast_content {
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-4x);
-        padding: var(--cpd-space-3x);
         width: 100%;
         overflow: hidden;
 
-        .mx_IncomingCallToast_message {
-            font-size: var(--cpd-font-size-body-lg);
-            line-height: var(--cpd-font-size-heading-sm);
-            width: calc(100% - $closeButtonSize - 2 * var(--cpd-space-1x));
-            font-weight: var(--cpd-font-weight-semibold);
+        .mx_IncomingCallToast_title {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            align-items: center;
+            gap: var(--cpd-space-2x);
+
+            h2 {
+                margin: 0;
+            }
+
+            .mx_IncomingCallToast_expandButton {
+                padding: var(--cpd-space-1x);
+                color: var(--cpd-color-icon-secondary);
+                transition: color 0.1s;
+
+                &:hover {
+                    color: var(--cpd-color-icon-primary);
+                }
+            }
         }
 
         .mx_IncomingCallToast_buttons {
             display: flex;
             gap: var(--cpd-space-2x);
+            padding-block-start: var(--cpd-space-2x);
         }
 
         .mx_IncomingCallToast_actionButton {
-            position: relative;
-
-            align-self: flex-end;
-
             box-sizing: border-box;
-            min-width: 120px;
-
-            padding: var(--cpd-space-1x) 0;
-            padding-right: var(--cpd-space-4x);
-            line-height: var(--cpd-space-6x);
-        }
-    }
-
-    .mx_IncomingCallToast_closeButton {
-        position: absolute;
-
-        right: 0;
-
-        display: flex;
-        height: $closeButtonSize;
-        width: $closeButtonSize;
-
-        svg {
-            height: inherit;
-            width: inherit;
-            color: $secondary-content;
-        }
-    }
-    .mx_IncomingCallToast_toggleWithLabel {
-        display: flex;
-        span {
-            flex-grow: 1;
+            min-width: 131px;
         }
     }
 }

apps/web/src/i18n/strings/en_EN.json

@@ -3900,7 +3900,6 @@
         "connection_lost": "Connectivity to the server has been lost",
         "connection_lost_description": "You cannot place calls without a connection to the server.",
         "consulting": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
-        "decline_call": "Decline",
         "default_device": "Default Device",
         "dial": "Dial",
         "dialpad": "Dialpad",
@@ -3914,10 +3913,12 @@
         "enable_microphone": "Unmute microphone",
         "expand": "Return to call",
         "get_call_link": "Share call link",
+        "group_call_started": "Group call started",
         "hangup": "Hangup",
         "hide_sidebar_button": "Hide sidebar",
         "input_devices": "Input devices",
         "jitsi_call": "Jitsi Conference",
+        "join_with_video": "Join with video",
         "legacy_call": "Legacy Call",
         "maximise": "Fill screen",
         "maximise_call": "Maximise call",
@@ -3951,7 +3952,6 @@
         "show_sidebar_button": "Show sidebar",
         "silence": "Silence call",
         "silenced": "Notifications silenced",
-        "skip_lobby_toggle_option": "Join immediately",
         "start_screenshare": "Start sharing your screen",
         "stop_screenshare": "Stop sharing your screen",
         "too_many_calls": "Too Many Calls",
@@ -3973,7 +3973,6 @@
         "user_is_presenting": "%(sharerName)s is presenting",
         "video_call": "Video call",
         "video_call_incoming": "Incoming video call",
-        "video_call_started": "Video call started",
         "video_call_using": "Video call using:",
         "voice_call": "Voice call",
         "voice_call_incoming": "Incoming voice call",

apps/web/src/models/Call.ts

@@ -592,6 +592,8 @@ export class JitsiCall extends Call {
 export enum ElementCallIntent {
     StartCall = "start_call",
     JoinExisting = "join_existing",
+    StartCallVoice = "start_call_voice",
+    JoinExistingVoice = "join_existing_voice",
     StartCallDM = "start_call_dm",
     StartCallDMVoice = "start_call_dm_voice",
     JoinExistingDM = "join_existing_dm",
@@ -685,11 +687,13 @@ export class ElementCall extends Call {
                 params.append("intent", voiceOnly ? ElementCallIntent.StartCallDMVoice : ElementCallIntent.StartCallDM);
             }
         } else {
-            // Group chats do not have a voice option.
             if (hasCallStarted) {
-                params.append("intent", ElementCallIntent.JoinExisting);
+                params.append(
+                    "intent",
+                    voiceOnly ? ElementCallIntent.JoinExistingVoice : ElementCallIntent.JoinExisting,
+                );
             } else {
-                params.append("intent", ElementCallIntent.StartCall);
+                params.append("intent", voiceOnly ? ElementCallIntent.StartCallVoice : ElementCallIntent.StartCall);
             }
         }
     }