Add success dialog after key backup (#10177)

res/css/_components.pcss

@@ -50,6 +50,7 @@
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./components/views/typography/_Caption.pcss";
 @import "./compound/_Icon.pcss";
+@import "./compound/_SuccessDialog.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
 @import "./structures/_AutocompleteInput.pcss";
 @import "./structures/_BackdropPanel.pcss";

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;
+            }
+        }
+    }
+}

res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss

@@ -23,6 +23,14 @@ limitations under the License.
     /* never asked. */
     width: 560px;
 
+    &.mx_SuccessDialog {
+        padding: 56px; /* 80px from design - 24px wrapper padding */
+
+        .mx_Dialog_title {
+            margin-bottom: $spacing-16;
+        }
+    }
+
     .mx_SettingsFlag {
         display: flex;
     }

res/img/element-icons/check.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="18.86364"
+   height="14.318086"
+   viewBox="0 0 18.86364 14.318086"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <path
+     d="M 1.25,8.03668 6.13636,13.06814 17.61364,1.25"
+     stroke="currentColor"
+     stroke-width="2.5"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path2" />
+</svg>