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/structures/ToastContainer.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import * as React from "react";
 import classNames from "classnames";
+import { Text } from "@vector-im/compound-web";
 
 import ToastStore, { IToast } from "../../stores/ToastStore";
 
@@ -78,7 +79,9 @@ export default class ToastContainer extends React.Component<{}, IState> {
             if (title) {
                 titleElement = (
                     <div className="mx_Toast_title">
-                        <h2>{title}</h2>
+                        <Text size="lg" weight="semibold" as="h2">
+                            {title}
+                        </Text>
                         <span className="mx_Toast_title_countIndicator">{countIndicator}</span>
                     </div>
                 );