Implement new toast UI (#10467)

* Implement new toast UI

* Use PCSS vars and Caption component

* Add GenericToast-test

* Tweak call toast

* Fix code style

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";
 
@@ -1669,7 +1669,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: "verifreq_" + request.channel.transactionId,
                     title: _t("Verification requested"),
-                    icon: "verification",
+                    iconElement: (
+                        <EncryptionIcon className="mx_Icon mx_Icon_24 mx_Icon_secondary-content mx_Toast_icon" />
+                    ),
                     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, key, component, className, bodyClassName, props } = topToast;
+            const { title, icon, iconElement, key, component, className, bodyClassName, props } = topToast;
             const bodyClasses = classNames("mx_Toast_body", bodyClassName);
             const toastClasses = classNames("mx_Toast_toast", className, {
-                mx_Toast_hasIcon: icon,
+                mx_Toast_hasIcon: icon || iconElement,
                 [`mx_Toast_icon_${icon}`]: icon,
             });
             const toastProps = Object.assign({}, props, {
@@ -86,6 +86,7 @@ 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,6 +18,7 @@ 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;
@@ -40,7 +41,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     onAccept,
     onReject,
 }) => {
-    const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
+    const detailContent = detail ? <Caption className="mx_Toast_detail">{detail}</Caption> : null;
 
     return (
         <div>

src/components/views/typography/Caption.tsx

@@ -19,13 +19,14 @@ 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, isError, ...rest }) => {
+export const Caption: React.FC<Props> = ({ children, className, isError, ...rest }) => {
     return (
         <span
-            className={classNames("mx_Caption", {
+            className={classNames("mx_Caption", className, {
                 mx_Caption_error: isError,
             })}
             {...rest}

src/stores/ToastStore.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EventEmitter from "events";
-import React from "react";
+import React, { ReactElement } from "react";
 
 import { ComponentClass } from "../@types/common";
 
@@ -24,7 +24,14 @@ 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;

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_IncomingLegacyCallToast_buttons">
+                    <div className="mx_Toast_buttons mx_IncomingLegacyCallToast_buttons">
                         <AccessibleButton
                             className="mx_IncomingLegacyCallToast_button mx_IncomingLegacyCallToast_button_decline"
                             onClick={this.onRejectClick}