UX: Remove the link from the title; add external icon; style adjustment (#27571)

* Removed the link from the title, so the settings can only be accessed via the settings button on the right
* Added an icon to the "Learn more" link to indicate that it opens a new window
* Made various styling adjustments

app/assets/javascripts/admin/addon/components/admin-plugins-list-item.gjs

@@ -67,15 +67,7 @@ export default class AdminPluginsListItem extends Component {
       <td class="admin-plugins-list__name-details">
         <div class="admin-plugins-list__name-with-badges">
           <div class="admin-plugins-list__name">
-            {{#if @plugin.linkUrl}}
-              <a
-                href={{@plugin.linkUrl}}
-                rel="noopener noreferrer"
-                target="_blank"
-              >{{@plugin.nameTitleized}}</a>
-            {{else}}
             {{@plugin.nameTitleized}}
-            {{/if}}
           </div>
 
           <div class="badges">
@@ -98,6 +90,7 @@ export default class AdminPluginsListItem extends Component {
               target="_blank"
             >
               {{i18n "admin.plugins.learn_more"}}
+              {{icon "external-link-alt"}}
             </a>
           {{/if}}
         </div>
@@ -122,19 +115,18 @@ export default class AdminPluginsListItem extends Component {
         {{#if this.showPluginSettingsButton}}
           {{#if @plugin.useNewShowRoute}}
             <LinkTo
-              class="btn-default btn btn-icon-text"
+              class="btn btn-text btn-small"
               @route="adminPlugins.show"
               @model={{@plugin}}
               @disabled={{this.disablePluginSettingsButton}}
               title={{this.settingsButtonTitle}}
               data-plugin-setting-button={{@plugin.name}}
             >
-              {{icon "cog"}}
               {{i18n "admin.plugins.change_settings_short"}}
             </LinkTo>
           {{else}}
             <LinkTo
-              class="btn-default btn btn-icon-text"
+              class="btn btn-text btn-small"
               @route="adminSiteSettingsCategory"
               @model={{@plugin.settingCategoryName}}
               @query={{hash filter=(concat "plugin:" @plugin.name)}}
@@ -142,7 +134,6 @@ export default class AdminPluginsListItem extends Component {
               title={{this.settingsButtonTitle}}
               data-plugin-setting-button={{@plugin.name}}
             >
-              {{icon "cog"}}
               {{i18n "admin.plugins.change_settings_short"}}
             </LinkTo>
           {{/if}}

app/assets/stylesheets/common/admin/plugins.scss

@@ -58,6 +58,7 @@
 
     &__name-with-badges {
       display: flex;
+      padding: 8px 0 4px;
     }
 
     &__name {
@@ -70,11 +71,7 @@
       font-size: var(--font-down-2);
       background-color: var(--primary-low);
       color: var(--primary-medium);
-      padding: 0.2em 0.8em;
-
-      .d-icon {
-        font-size: 0.8em;
-      }
+      padding: 4px 8px;
 
       & + .admin-plugins-list__badge {
         margin-left: 0.5em;
@@ -86,6 +83,15 @@
         font-size: var(--font-down-1);
       }
     }
+
+    &__about {
+      padding: 8px 0;
+
+      .d-icon {
+        font-size: var(--font-down-3);
+        margin-bottom: 0.1em;
+      }
+    }
   }
 }
 
@@ -136,18 +142,18 @@
           calc(0.5rem + var(--active-border-width));
 
         &:hover {
-          color: var(--quaternary);
+          color: var(--tertiary);
           background-color: transparent;
           border-color: transparent;
         }
 
         &.active {
-          color: var(--quaternary);
+          color: var(--tertiary);
           background-color: transparent;
           border-bottom-left-radius: 0;
           border-bottom-right-radius: 0;
           border-width: 0;
-          border-bottom: var(--active-border-width) solid var(--quaternary);
+          border-bottom: var(--active-border-width) solid var(--tertiary);
           padding-bottom: var(--space-2);
         }
       }

spec/system/admin_plugins_list_spec.rb

@@ -28,9 +28,6 @@ describe "Admin Plugins List", type: :system, js: true do
       ".admin-plugins-list__author",
       text: I18n.t("admin_js.admin.plugins.author", { author: "Discourse" }),
     )
-    expect(plugin_row).to have_css(
-      ".admin-plugins-list__name-with-badges .admin-plugins-list__name a[href=\"https://meta.discourse.org/t/12650\"]",
-    )
     expect(plugin_row).to have_css(
       ".admin-plugins-list__about",
       text: spoiler_alert_plugin.metadata.about,