Add success dialog after key backup (#10177)

src/components/views/dialogs/BaseDialog.tsx

@@ -50,6 +50,9 @@ interface IProps extends IDialogProps {
     // determine its size. Default: true.
     "fixedWidth"?: boolean;
 
+    // To be displayed at the top of the dialog. Even above the title.
+    "top"?: React.ReactNode;
+
     // Title for the dialog.
     "title"?: JSX.Element | string;
     // Specific aria label to use, if not provided will set aria-labelledBy to mx_Dialog_title
@@ -161,6 +164,7 @@ export default class BaseDialog extends React.Component<IProps> {
                         mx_Dialog_fixedWidth: this.props.fixedWidth,
                     })}
                 >
+                    {this.props.top}
                     <div
                         className={classNames("mx_Dialog_header", {
                             mx_Dialog_headerWithButton: !!this.props.headerButton,

src/components/views/dialogs/InfoDialog.tsx

@@ -24,6 +24,7 @@ import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
 interface IProps extends IDialogProps {
+    top?: ReactNode;
     title?: string;
     description?: ReactNode;
     className?: string;
@@ -49,6 +50,7 @@ export default class InfoDialog extends React.Component<IProps> {
             <BaseDialog
                 className="mx_InfoDialog"
                 onFinished={this.props.onFinished}
+                top={this.props.top}
                 title={this.props.title}
                 contentId="mx_Dialog_content"
                 hasCancel={this.props.hasCloseButton}