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 758acfc26a12572b28ae59650aaa2503eda1b200..41cbb24f930c818d93054ceb690f849fbbe2cb92 100644 (file)
--- 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 fc8940318540214593baecbf09dd7ccc531efb4f..52fd5beba004ca9596b78975c00e489579642098 100644 (file)
--- 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;
 }