Merge pull request #48638 from nextcloud/fix/reasons-to-use

fix: Fix "Reasons to use Nextcloud" design

Author: Pytal

apps/settings/css/settings.css

@@ -132,14 +132,16 @@ select {
 }
 
 .link-button {
-	display: inline-block;
+	display: inline-flex;
 	margin: calc(2 * var(--default-grid-baseline));
 	padding: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
 	background-color: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	border-radius: var(--border-radius-element);
 	border: 1px solid var(--color-primary-element);
 	box-shadow: 0 2px 9px var(--color-box-shadow);
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
 
 	&:hover,
 	&:focus {
@@ -152,19 +154,13 @@ select {
 		outline: 2px solid var(--color-main-text) !important;
 	}
 
-	&.icon-file {
-		padding-inline-start: calc(var(--default-grid-baseline) + var(--default-clickable-area));
-		background-position: calc(2 * var(--default-grid-baseline));
+	.icon-file-text {
+		filter: var(--primary-invert-if-dark);
+		width: 20px;
+		height: 20px;
 	}
 }
 
-body[dir='ltr'] .link-button.icon-file {
-	background-position: left 24px center;
-}
-body[dir='rtl'] .link-button.icon-file {
-	background-position: right 24px center;
-}
-
 .personal-settings-container {
 	display: inline-grid;
 	grid-template-columns: 1fr 1fr 1fr;

apps/settings/css/settings.css.map

@@ -6,7 +6,10 @@
 ?>
 <div class="section development-notice">
 	<p>
-		<a href="<?php p($_['reasons-use-nextcloud-pdf-link']); ?>" id="open-reasons-use-nextcloud-pdf" class="link-button icon-file" target="_blank"><?php p($l->t('Reasons to use Nextcloud in your organization'));?></a>
+		<a href="<?php p($_['reasons-use-nextcloud-pdf-link']); ?>" id="open-reasons-use-nextcloud-pdf" class="link-button" target="_blank">
+			<span class="icon-file-text" aria-hidden="true"></span>
+			<?php p($l->t('Reasons to use Nextcloud in your organization'));?>
+		</a>
 	</p>
 	<p>
 		<?php print_unescaped(str_replace(

apps/settings/css/settings.scss

@@ -179,6 +179,10 @@ const iconsColor = {
 		path: path.join(__dirname, '../img', 'filetypes', 'text.svg'),
 		color: 'grey',
 	},
+	'file-text': {
+		path: path.join(__dirname, '../img', 'filetypes', 'text.svg'),
+		color: 'black',
+	},
 }
 
 // use this to define aliases to existing icons