From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 7 Jul 2021 15:14:55 +0000 (+0200)
Subject: Improved the visuals of the list of MFA options
X-Git-Tag: 5.4.0_RC_2~7
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0132fe679519aa4a50e467d2f7e9005c041e47b9;p=GitHub%2FWoltLab%2FWCF.git

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.
---

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