From 0132fe679519aa4a50e467d2f7e9005c041e47b9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 7 Jul 2021 17:14:55 +0200
Subject: [PATCH] Improved the visuals of the list of MFA options

The content is now vertically centered and the somewhat tiny smartphone icon is enlarged to better match the other icons.
---
 com.woltlab.wcf/templates/accountSecurity.tpl        | 2 +-
 wcfsetup/install/files/style/ui/accountSecurity.scss | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/com.woltlab.wcf/templates/accountSecurity.tpl b/com.woltlab.wcf/templates/accountSecurity.tpl
index 758acfc26a..41cbb24f93 100644
--- a/com.woltlab.wcf/templates/accountSecurity.tpl
+++ b/com.woltlab.wcf/templates/accountSecurity.tpl
@@ -13,7 +13,7 @@
 			{if $method->objectType !== 'com.woltlab.wcf.multifactor.backup' || $enabledMultifactorMethods[$method->objectTypeID]|isset}
 				<li class="box64">
 					<div>
-						<span class="icon icon64 fa-{if $method->icon}{$method->icon}{else}lock{/if}"></span>
+						<span class="icon icon64 fa-{if $method->icon}{$method->icon}{else}lock{/if} accountSecurityInformationIcon"></span>
 					</div>
 					
 					<div class="accountSecurityContainer">
diff --git a/wcfsetup/install/files/style/ui/accountSecurity.scss b/wcfsetup/install/files/style/ui/accountSecurity.scss
index fc89403185..52fd5beba0 100644
--- a/wcfsetup/install/files/style/ui/accountSecurity.scss
+++ b/wcfsetup/install/files/style/ui/accountSecurity.scss
@@ -1,4 +1,5 @@
 .accountSecurityContainer {
+	align-items: center;
 	display: flex;
 
 	@include screen-sm-down {
@@ -6,6 +7,11 @@
 	}
 }
 
+/* The smartphone icon is noticbly smaller than all other icons being used. */
+.accountSecurityInformationIcon.fa-mobile {
+	font-size: 70px;
+}
+
 .accountSecurityInformation {
 	flex: 1 auto;
 }
-- 
2.20.1