Update toast styles to match Figma (#12833)

* Warn users on unsupported browsers before they lack features

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Learn more link

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update toast styles to match Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove test code

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/toasts/GenericExpiringToast.tsx

@@ -31,9 +31,9 @@ const SECOND = 1000;
 
 const GenericExpiringToast: React.FC<IProps> = ({
     description,
-    acceptLabel,
+    primaryLabel,
     dismissLabel,
-    onAccept,
+    onPrimaryClick,
     onDismiss,
     toastKey,
     numSeconds,
@@ -52,10 +52,10 @@ const GenericExpiringToast: React.FC<IProps> = ({
     return (
         <GenericToast
             description={description}
-            acceptLabel={acceptLabel}
-            onAccept={onAccept}
-            rejectLabel={rejectLabel}
-            onReject={onReject}
+            primaryLabel={primaryLabel}
+            onPrimaryClick={onPrimaryClick}
+            secondaryLabel={rejectLabel}
+            onSecondaryClick={onReject}
         />
     );
 };

src/components/views/toasts/GenericToast.tsx

@@ -14,31 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React, { ComponentType, ReactNode } from "react";
+import { Button } from "@vector-im/compound-web";
 
-import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
 
 export interface IProps {
     description: ReactNode;
     detail?: ReactNode;
-    acceptLabel: string;
+    primaryLabel: string;
+    PrimaryIcon?: ComponentType<React.SVGAttributes<SVGElement>>;
 
-    onAccept(): void;
+    onPrimaryClick(): void;
 }
 
 interface IPropsExtended extends IProps {
-    rejectLabel: string;
-    onReject(): void;
+    secondaryLabel: string;
+    SecondaryIcon?: ComponentType<React.SVGAttributes<SVGElement>>;
+    destructive?: "primary" | "secondary";
+    onSecondaryClick(): void;
 }
 
 const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     description,
     detail,
-    acceptLabel,
-    rejectLabel,
-    onAccept,
-    onReject,
+    primaryLabel,
+    PrimaryIcon,
+    secondaryLabel,
+    SecondaryIcon,
+    destructive,
+    onPrimaryClick,
+    onSecondaryClick,
 }) => {
     const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
 
@@ -49,14 +55,24 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                 {detailContent}
             </div>
             <div className="mx_Toast_buttons" aria-live="off">
-                {onReject && rejectLabel && (
-                    <AccessibleButton kind="danger_outline" onClick={onReject}>
-                        {rejectLabel}
-                    </AccessibleButton>
+                {onSecondaryClick && secondaryLabel && (
+                    <Button
+                        onClick={onSecondaryClick}
+                        kind={destructive === "secondary" ? "destructive" : "secondary"}
+                        Icon={SecondaryIcon}
+                        size="sm"
+                    >
+                        {secondaryLabel}
+                    </Button>
                 )}
-                <AccessibleButton onClick={onAccept} kind="primary">
-                    {acceptLabel}
-                </AccessibleButton>
+                <Button
+                    onClick={onPrimaryClick}
+                    kind={destructive === "primary" ? "destructive" : "primary"}
+                    Icon={PrimaryIcon}
+                    size="sm"
+                >
+                    {primaryLabel}
+                </Button>
             </div>
         </div>
     );

src/components/views/toasts/VerificationRequestToast.tsx

@@ -185,14 +185,14 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
             <GenericToast
                 description={description}
                 detail={detail}
-                acceptLabel={
+                primaryLabel={
                     request.isSelfVerification || !request.roomId
                         ? _t("encryption|verification|request_toast_accept")
                         : _t("encryption|verification|request_toast_accept_user")
                 }
-                onAccept={this.accept}
-                rejectLabel={declineLabel}
-                onReject={this.cancel}
+                onPrimaryClick={this.accept}
+                secondaryLabel={declineLabel}
+                onSecondaryClick={this.cancel}
             />
         );
     }