Revert "Implement new toast UI (#10467)" (#10740)

weeman1337 · web-flow · commit 35376996b035 · 2023-04-28T14:56:26.000Z
This reverts commit 7632f36.
diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss
@@ -24,10 +24,6 @@ limitations under the License.
     box-sizing: border-box;
 }
 
-.mx_Icon_secondary-content {
-    color: $secondary-content;
-}
-
 .mx_Icon_accent {
     color: $accent;
 }
diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
@@ -16,9 +16,10 @@ limitations under the License.
 
 .mx_ToastContainer {
     position: absolute;
-    top: $spacing-4;
+    top: 0;
     left: 70px;
     z-index: 101;
+    padding: 4px;
     display: grid;
     grid-template-rows: 1fr 14px 6px;
 
@@ -33,29 +34,25 @@ limitations under the License.
     }
 
     .mx_Toast_toast {
+        grid-row: 1 / 3;
+        grid-column: 1;
         background-color: $system;
-        border-radius: 8px;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         color: $primary-content;
-        column-gap: $spacing-8;
-        display: grid;
-        grid-column: 1;
-        grid-row: 1 / 3;
-        grid-template-columns: 24px 1fr;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
         overflow: hidden;
-        padding: $spacing-16;
+        display: grid;
+        grid-template-columns: 22px 1fr;
+        column-gap: 8px;
+        row-gap: 4px;
+        padding: 8px;
 
         &.mx_Toast_hasIcon {
-            .mx_Toast_icon {
-                grid-column: 1;
-                grid-row: 1;
-            }
-
             &::before,
             &::after {
                 content: "";
-                width: 24px;
-                height: 24px;
+                width: 22px;
+                height: 22px;
                 grid-column: 1;
                 grid-row: 1;
                 mask-size: 100%;
@@ -65,6 +62,11 @@ limitations under the License.
                 background-repeat: no-repeat;
             }
 
+            &.mx_Toast_icon_verification::after {
+                mask-image: url("$(res)/img/e2e/normal.svg");
+                background-color: $primary-content;
+            }
+
             &.mx_Toast_icon_verification_warning {
                 /* white infill for the hollow svg mask */
                 &::before {
@@ -94,7 +96,6 @@ limitations under the License.
                 grid-column: 2;
             }
         }
-
         &:not(.mx_Toast_hasIcon) {
             padding-left: 12px;
 
@@ -103,19 +104,24 @@ limitations under the License.
             }
         }
 
+        .mx_Toast_title,
+        .mx_Toast_description {
+            padding-right: 8px;
+        }
+
         .mx_Toast_title {
+            display: flex;
             align-items: center;
-            box-sizing: border-box;
             column-gap: 8px;
-            display: flex;
-            margin-bottom: $spacing-16;
             width: 100%;
+            box-sizing: border-box;
 
             h2 {
-                color: $primary-content;
                 margin: 0;
-                font-size: $font-18px;
+                font-size: $font-15px;
                 font-weight: var(--font-semi-bold);
+                display: inline;
+                width: auto;
             }
 
             .mx_Toast_title_countIndicator {
@@ -129,32 +135,33 @@ limitations under the License.
         .mx_Toast_body {
             grid-column: 1 / 3;
             grid-row: 2;
-            position: relative;
         }
 
         .mx_Toast_buttons {
-            column-gap: $spacing-8;
             display: flex;
             justify-content: flex-end;
-            margin-top: $spacing-32;
+            column-gap: 5px;
+
+            .mx_AccessibleButton {
+                min-width: 96px;
+                box-sizing: border-box;
+            }
         }
 
         .mx_Toast_description {
-            color: $primary-content;
-            font-size: $font-15px;
-            font-weight: var(--font-semi-bold);
-            max-width: 300px;
+            max-width: 272px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 4px 0 11px 0;
+            font-size: $font-12px;
 
             a {
                 text-decoration: none;
             }
         }
 
         .mx_Toast_detail {
-            display: block;
-            font-weight: var(--font-normal);
-            margin-top: $spacing-4;
-            max-width: 300px;
+            color: $secondary-content;
         }
 
         .mx_Toast_deviceID {
diff --git a/res/css/views/toasts/_IncomingLegacyCallToast.pcss b/res/css/views/toasts/_IncomingLegacyCallToast.pcss
@@ -84,19 +84,20 @@ limitations under the License.
         }
 
         .mx_IncomingLegacyCallToast_buttons {
+            margin-top: 8px;
+            display: flex;
+            flex-direction: row;
+            gap: 12px;
+
             .mx_IncomingLegacyCallToast_button {
+                @mixin LegacyCallButton;
+                padding: 0px 8px;
+                flex-shrink: 0;
+                flex-grow: 1;
+                font-size: $font-15px;
+
                 span {
-                    align-items: center;
-                    display: flex;
-
-                    &::before {
-                        background-color: $button-fg-color;
-                        content: "";
-                        display: inline-block;
-                        margin-right: 8px;
-                        mask-position: center;
-                        mask-repeat: no-repeat;
-                    }
+                    padding: 8px 0;
                 }
 
                 &.mx_IncomingLegacyCallToast_button_accept span::before {
@@ -132,13 +133,6 @@ limitations under the License.
         }
     }
 
-    .mx_IncomingLegacyCallToast_silence,
-    .mx_IncomingLegacyCallToast_unSilence {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-
     .mx_IncomingLegacyCallToast_silence::before {
         mask-image: url("$(res)/img/voip/silence.svg");
     }
diff --git a/res/img/compound/encryption-24px.svg b/res/img/compound/encryption-24px.svg
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
@@ -143,7 +143,7 @@ import { findDMForUser } from "../../utils/dm/findDMForUser";
 import { Linkify } from "../../HtmlUtils";
 import { NotificationColor } from "../../stores/notifications/NotificationColor";
 import { UserTab } from "../views/dialogs/UserTab";
-import { Icon as EncryptionIcon } from "../../../res/img/compound/encryption-24px.svg";
+
 // legacy export
 export { default as Views } from "../../Views";
 
@@ -1668,9 +1668,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: "verifreq_" + request.channel.transactionId,
                     title: _t("Verification requested"),
-                    iconElement: (
-                        <EncryptionIcon className="mx_Icon mx_Icon_24 mx_Icon_secondary-content mx_Toast_icon" />
-                    ),
+                    icon: "verification",
                     props: { request },
                     component: VerificationRequestToast,
                     priority: 90,
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
@@ -57,10 +57,10 @@ export default class ToastContainer extends React.Component<{}, IState> {
         let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
-            const { title, icon, iconElement, key, component, className, bodyClassName, props } = topToast;
+            const { title, icon, key, component, className, bodyClassName, props } = topToast;
             const bodyClasses = classNames("mx_Toast_body", bodyClassName);
             const toastClasses = classNames("mx_Toast_toast", className, {
-                mx_Toast_hasIcon: icon || iconElement,
+                mx_Toast_hasIcon: icon,
                 [`mx_Toast_icon_${icon}`]: icon,
             });
             const toastProps = Object.assign({}, props, {
@@ -86,7 +86,6 @@ export default class ToastContainer extends React.Component<{}, IState> {
 
             toast = (
                 <div className={toastClasses}>
-                    {iconElement}
                     {titleElement}
                     <div className={bodyClasses}>{content}</div>
                 </div>
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
@@ -18,7 +18,6 @@ import React, { ReactNode } from "react";
 
 import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
-import { Caption } from "../typography/Caption";
 
 export interface IProps {
     description: ReactNode;
@@ -41,7 +40,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     onAccept,
     onReject,
 }) => {
-    const detailContent = detail ? <Caption className="mx_Toast_detail">{detail}</Caption> : null;
+    const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
 
     return (
         <div>
diff --git a/src/components/views/typography/Caption.tsx b/src/components/views/typography/Caption.tsx
@@ -19,14 +19,13 @@ import React, { HTMLAttributes } from "react";
 
 interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
     children: React.ReactNode;
-    className?: string;
     isError?: boolean;
 }
 
-export const Caption: React.FC<Props> = ({ children, className, isError, ...rest }) => {
+export const Caption: React.FC<Props> = ({ children, isError, ...rest }) => {
     return (
         <span
-            className={classNames("mx_Caption", className, {
+            className={classNames("mx_Caption", {
                 mx_Caption_error: isError,
             })}
             {...rest}
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EventEmitter from "events";
-import React, { ReactElement } from "react";
+import React from "react";
 
 import { ComponentClass } from "../@types/common";
 
@@ -24,14 +24,7 @@ export interface IToast<C extends ComponentClass> {
     // higher priority number will be shown on top of lower priority
     priority: number;
     title?: string;
-    /**
-     * Icon class.
-     *
-     * @deprecated Use iconElement instead.
-     */
     icon?: string;
-    /** Icon element. Displayed left of the title. */
-    iconElement?: ReactElement;
     component: C;
     className?: string;
     bodyClassName?: string;
diff --git a/src/toasts/IncomingLegacyCallToast.tsx b/src/toasts/IncomingLegacyCallToast.tsx
@@ -119,7 +119,7 @@ export default class IncomingLegacyCallToast extends React.Component<IProps, ISt
                         <div className="mx_LegacyCallEvent_type_icon" />
                         {isVoice ? _t("Voice call") : _t("Video call")}
                     </div>
-                    <div className="mx_Toast_buttons mx_IncomingLegacyCallToast_buttons">
+                    <div className="mx_IncomingLegacyCallToast_buttons">
                         <AccessibleButton
                             className="mx_IncomingLegacyCallToast_button mx_IncomingLegacyCallToast_button_decline"
                             onClick={this.onRejectClick}
diff --git a/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap b/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
@@ -42,11 +42,11 @@ exports[`GenericToast should render as expected without detail content 1`] = `
       <div>
         Description
       </div>
-      <span
-        class="mx_Caption mx_Toast_detail"
+      <div
+        class="mx_Toast_detail"
       >
         Detail
-      </span>
+      </div>
     </div>
     <div
       aria-live="off"
diff --git a/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
@@ -27,8 +27,8 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
             <div
               class="mx_Toast_description"
             >
-              <span
-                class="mx_Caption mx_Toast_detail"
+              <div
+                class="mx_Toast_detail"
               >
                 <span
                   data-testid="device-metadata-isVerified"
@@ -41,7 +41,7 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
                 >
                   ABC123
                 </span>
-              </span>
+              </div>
             </div>
             <div
               aria-live="off"

Original file line number	Diff line number	Diff line change
`@@ -24,10 +24,6 @@ limitations under the License.`
`24`	`24`	`box-sizing: border-box;`
`25`	`25`	`}`
`26`	`26`
`27`		`-.mx_Icon_secondary-content {`
`28`		`- color: $secondary-content;`
`29`		`-}`
`30`		`-`
`31`	`27`	`.mx_Icon_accent {`
`32`	`28`	`color: $accent;`
`33`	`29`	`}`