"Verify this device" redesign (#30596)

* add variant of ResetIdentityBody for when the user has no verif. methods

* no longer distinguish between the using having a passphrase or not

* use vertical stack of buttons via EncryptionCard

and update wording

* swap logic order to match rendering order

* use the same dialog when no verification options available

* make it agree with the design more

* allow signing out on initial login

* apply styling changes and remove duplicate elements

* fix and add tests

* add missing snapshot

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* use a boolean property to disable blurring instead of adding a class

* change string identifiers

* apply changes from review -- simplify logic

* change class name to avoid confusion

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

res/css/structures/auth/_SetupEncryptionBody.pcss

@@ -6,13 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_SetupEncryptionBody_reset {
-    color: $light-fg-color;
-    margin-top: $font-14px;
-
-    .mx_SetupEncryptionBody_reset_link {
-        &.mx_AccessibleButton_kind_link_inline {
-            color: $alert;
-        }
-    }
+.mx_SetupEncryptionBody {
+    width: 600px;
 }

res/css/views/auth/_AuthPage.pcss

@@ -19,7 +19,6 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     margin: 100px auto auto;
     border-radius: 4px;
-    box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
     background-color: $authpage-modal-bg-color;
 
     @media only screen and (max-height: 768px) {
@@ -29,4 +28,9 @@ Please see LICENSE files in the repository root for full details.
     @media only screen and (max-width: 480px) {
         margin-top: 0;
     }
+
+    /* Apply a blurred shadow around the modal */
+    &.mx_AuthPage_modal_withBlur {
+        box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
+    }
 }

res/css/views/auth/_CompleteSecurityBody.pcss

@@ -8,11 +8,10 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_CompleteSecurityBody {
-    width: 600px;
     color: $authpage-primary-color;
     background-color: $background;
     border-radius: 4px;
-    padding: 20px;
+    padding: 20px 20px 60px 20px;
     box-sizing: border-box;
 
     h2 {

res/css/views/settings/encryption/_EncryptionCard.pcss

@@ -30,6 +30,13 @@
             text-align: center;
         }
     }
+
+    /* extra class for specifying that we don't need a border */
+    &.mx_EncryptionCard_noBorder {
+        border: 0px none;
+        box-shadow: none;
+        padding: 0px;
+    }
 }
 
 .mx_EncryptionCard_buttons {