From 58fa04ad6627610fa8f7c028ce1cffacc367ee33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:32:38 +0100
Subject: [PATCH] fix(editor): More dark-mode fixes (no-changelog) (#7624)

This fixes:
1. The `OR` divider background when SSO Login is enabled
2. Scanning of QR code in settings in dark mode
---
 packages/editor-ui/src/components/MfaSetupModal.vue | 8 ++++++++
 packages/editor-ui/src/components/SSOLogin.vue      | 2 +-
 packages/editor-ui/src/views/MfaView.vue            | 8 --------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/MfaSetupModal.vue b/packages/editor-ui/src/components/MfaSetupModal.vue
index c7240d833c9f0..ddb507ee953fe 100644
--- a/packages/editor-ui/src/components/MfaSetupModal.vue
+++ b/packages/editor-ui/src/components/MfaSetupModal.vue
@@ -289,6 +289,14 @@ export default defineComponent({
 	padding-bottom: var(--spacing-xl);
 }
 
+.qrContainer {
+	text-align: center;
+
+	canvas {
+		border: 4px solid var(--prim-gray-10);
+	}
+}
+
 .headerContainer {
 	text-align: center;
 }
diff --git a/packages/editor-ui/src/components/SSOLogin.vue b/packages/editor-ui/src/components/SSOLogin.vue
index 2c36ca656d3fe..aecacdc3b7cfa 100644
--- a/packages/editor-ui/src/components/SSOLogin.vue
+++ b/packages/editor-ui/src/components/SSOLogin.vue
@@ -53,7 +53,7 @@ const onSSOLogin = async () => {
 		position: relative;
 		display: inline-block;
 		padding: var(--spacing-xl) var(--spacing-l);
-		background: var(--color-foreground-xlight);
+		background: var(--color-background-xlight);
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/views/MfaView.vue b/packages/editor-ui/src/views/MfaView.vue
index 5aa8b2985413b..8a13f22d722e1 100644
--- a/packages/editor-ui/src/views/MfaView.vue
+++ b/packages/editor-ui/src/views/MfaView.vue
@@ -218,18 +218,10 @@ body {
 	justify-content: center;
 }
 
-.textContainer {
-	text-align: center;
-}
-
 .formContainer {
 	padding-bottom: var(--spacing-xl);
 }
 
-.qrContainer {
-	text-align: center;
-}
-
 .headerContainer {
 	text-align: center;
 	margin-bottom: var(--spacing-xl);