Fix look of the untrusted device dialog (#7487)

matrix-org · Jan 10, 2022 · fe16f22 · fe16f22
1 parent 9cb8ce7
commit fe16f22
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/res/css/views/dialogs/_UntrustedDeviceDialog.scss b/res/css/views/dialogs/_UntrustedDeviceDialog.scss
@@ -23,4 +23,10 @@ limitations under the License.
             margin-left: 0;
         }
     }
+
+    .mx_Dialog_buttons {
+        display: flex;
+        justify-content: end;
+        gap: 8px;
+    }
 }
diff --git a/src/components/views/dialogs/UntrustedDeviceDialog.tsx b/src/components/views/dialogs/UntrustedDeviceDialog.tsx
@@ -57,10 +57,10 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) =
             <p>{ askToVerifyText }</p>
         </div>
         <div className='mx_Dialog_buttons'>
-            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>
+            <AccessibleButton kind="primary_outline" onClick={() => onFinished("legacy")}>
                 { _t("Manually Verify by Text") }
             </AccessibleButton>
-            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("sas")}>
+            <AccessibleButton kind="primary_outline" onClick={() => onFinished("sas")}>
                 { _t("Interactively verify by Emoji") }
             </AccessibleButton>
             <AccessibleButton kind="primary" onClick={() => onFinished(false)}>