From fe16f224eaa3d4769ac71e3c2bbe38ab7fb37f93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 10 Jan 2022 11:02:03 +0100
Subject: [PATCH] Fix look of the untrusted device dialog (#7487)

---
 res/css/views/dialogs/_UntrustedDeviceDialog.scss      | 6 ++++++
 src/components/views/dialogs/UntrustedDeviceDialog.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/res/css/views/dialogs/_UntrustedDeviceDialog.scss b/res/css/views/dialogs/_UntrustedDeviceDialog.scss
index 0ecd9d4f71..905919e792 100644
--- 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
index 8c503e340d..8039a67511 100644
--- 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)}>