Merge pull request #46787 from nextcloud/backport/46773/stable29

[stable29] style(settings): align icons at legacy help navigation

Author: Antreesy

apps/settings/css/help.css

@@ -2,8 +2,16 @@
 	overflow: hidden !important;
 }
 
+.help-list__link {
+	display: flex;
+	align-items: center;
+	height: var(--default-clickable-area);
+	margin: 0 8px;
+	background-position: left center;
+}
+
 .help-list__text {
-	margin-left: 24px;
+	margin-left: 20px;
 }
 
 .help-iframe {

apps/settings/templates/help.php

@@ -5,7 +5,7 @@
 	<div id="app-navigation" role="navigation" tabindex="0">
 		<ul>
 			<li>
-				<a class="icon-user <?php if ($_['mode'] === 'user') {
+				<a class="help-list__link icon-user <?php if ($_['mode'] === 'user') {
 					p('active');
 				} ?>" <?php if ($_['mode'] === 'user') {
 					print_unescaped('aria-current="page"');
@@ -18,7 +18,7 @@
 			</li>
 		<?php if ($_['admin']) { ?>
 			<li>
-				<a class="icon-user-admin <?php if ($_['mode'] === 'admin') {
+				<a class="help-list__link icon-user-admin <?php if ($_['mode'] === 'admin') {
 					p('active');
 				} ?>" <?php if ($_['mode'] === 'admin') {
 					print_unescaped('aria-current="page"');
@@ -32,14 +32,14 @@
 		<?php } ?>
 
 			<li>
-				<a href="https://docs.nextcloud.com" class="icon-category-office" target="_blank" rel="noreferrer noopener">
+				<a href="https://docs.nextcloud.com" class="help-list__link icon-category-office" target="_blank" rel="noreferrer noopener">
 					<span class="help-list__text">
 						<?php p($l->t('Documentation')); ?> ↗
 					</span>
 				</a>
 			</li>
 			<li>
-				<a href="https://help.nextcloud.com" class="icon-comment" target="_blank" rel="noreferrer noopener">
+				<a href="https://help.nextcloud.com" class="help-list__link icon-comment" target="_blank" rel="noreferrer noopener">
 					<span class="help-list__text">
 						<?php p($l->t('Forum')); ?> ↗
 					</span>