Fix look of the untrusted device dialog (#7487)

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

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)}>