fix: Fix "Reasons to use Nextcloud" design

Signed-off-by: Christopher Ng <chrng8@gmail.com>

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 210d46c649109a2393d5d98a7f040f1118d7bd5c..e2745c40611b3fb05029541f5826c7e6cd8a9317 100644 (file)
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -132,7 +132,7 @@ 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);
@@ -140,6 +140,8 @@ select {
        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;

diff --git a/apps/settings/templates/settings/personal/development.notice.php b/apps/settings/templates/settings/personal/development.notice.php
index e0f66863efa92711fd952441aa8b74e12041a5c2..723f954ecc51a59bec183e969ae00b43b1cb437b 100644 (file)
--- a/apps/settings/templates/settings/personal/development.notice.php
+++ b/apps/settings/templates/settings/personal/development.notice.php
@@ -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(