Move the safety number viewer into modal

stylesheets/components/SafetyNumberViewer.scss

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-SafetyNumberViewer {
+  text-align: center;
+
   &__icon {
     height: 1.25em;
     width: 1.25em;
@@ -9,10 +11,6 @@
     display: inline-block;
   }
 
-  &__verification-label {
-    margin: 10px 0;
-  }
-
   &__icon--verified {
     display: inline-block;
     height: 1.25em;
@@ -55,33 +53,14 @@
     }
   }
 
-  &__verify-container {
-    text-align: center;
-  }
-
-  &__button--verify {
-    border-radius: 5px;
-    font-weight: bold;
-    margin: 0;
-    outline: none;
-    padding: 10px;
-  }
-
   &__number {
-    background: #f6f6f6;
-    border-radius: 5px;
-    border: solid 1px #dedede;
+    background: $color-gray-02;
+    border-radius: 8px;
     font-family: monospace;
-    margin: 20px auto 20px auto;
-    padding: 10px;
-    text-align: center;
-    width: 16em;
-
-    @include dark-theme {
-      background: #1b1b1b;
-      border: solid 1px #848484;
-      color: #f6f6f6;
-    }
+    height: 100px;
+    margin: 24px auto;
+    padding: 24px;
+    width: 240px;
   }
 
   &__verification-status {
@@ -119,4 +98,12 @@
       }
     }
   }
+
+  &__button {
+    margin-top: 30px;
+  }
+
+  &__modal.module-Modal {
+    max-width: 500px;
+  }
 }