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

This reverts commit 7632f36624.

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,

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>

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>

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}