Add success dialog after key backup (#10177)

res/css/compound/_Icon.pcss

@@ -29,10 +29,22 @@ limitations under the License.
     color: $accent;
 }
 
+.mx_Icon_bg-accent-light {
+    background-color: rgba($accent, 0.1);
+}
+
 .mx_Icon_alert {
     color: $alert;
 }
 
+.mx_Icon_circle-40 {
+    border-radius: 20px;
+    flex: 0 0 40px;
+    height: 40px;
+    padding: 0 12px;
+    width: 40px;
+}
+
 .mx_Icon_8 {
     flex: 0 0 8px;
     height: 8px;

res/css/compound/_SuccessDialog.pcss

@@ -0,0 +1,48 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SuccessDialog {
+    text-align: center;
+
+    .mx_Icon {
+        mask-border: $spacing-16;
+    }
+
+    .mx_Dialog_header {
+        margin: 0 0 $spacing-16;
+        padding: 0;
+    }
+
+    .mx_Dialog_title {
+        margin: 0;
+    }
+
+    .mx_Dialog_content {
+        color: $secondary-content;
+        margin: 0 0 $spacing-40;
+    }
+
+    .mx_Dialog_buttons {
+        .mx_Dialog_buttons_row {
+            justify-content: center;
+
+            button.mx_Dialog_primary {
+                height: 48px;
+                min-width: 328px;
+            }
+        }
+    }
+}