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>