From ec8ea58dbe31e3d483b358ca725ca243851bdf29 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 12 May 2023 22:58:44 +0800
Subject: [PATCH] Rename ".button-link" to ".button-ghost" (#24670)

Mainstream frameworks:

* https://getbootstrap.com/docs/5.0/components/buttons/
* https://primer.style/css/components/buttons#link-button
* https://nextui.org/docs/components/button#light
* https://coreui.io/react/docs/components/button/
* https://design-system.hpe.design/components/button
* https://chakra-ui.com/docs/components/button/usage#button-variants
* https://mui.com/material-ui/react-button/

All (at least most?) of them make "link" button have "underline" when
hovering.

So, a "link" is a "link", when it's hovered, it should have the
underline by default. To be strict, Gitea's "button-link" is not
link-style, so it needs a better name.

Actually, for the "plain" button, there are some different approaches:

* Some frameworks just make "default" button as no style (not feasible
in Gitea/Fomantic UI)
* Primer uses "btn-invisible", which is not a proper word
* NextUI uses "light", which is not a proper word, either ...
* CoreUI / ChakraUI uses "ghost", I think this name is acceptable.


Welcome to suggest better name for such button.

Or, we just call it ".button-plain" or ".button-simple", in fact I
prefer such simple and clear name.
---
 templates/user/notification/notification_div.tmpl | 6 +++---
 web_src/css/base.css                              | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 6047f3458..6693b2e57 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -82,7 +82,7 @@
 											{{$.CsrfTokenHtml}}
 											<input type="hidden" name="notification_id" value="{{.ID}}">
 											<input type="hidden" name="status" value="pinned">
-											<button class="ui mini button button-link" title='{{$.locale.Tr "notification.pin"}}'
+											<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.pin"}}'
 												data-url="{{AppSubUrl}}/notifications/status"
 												data-status="pinned"
 												data-page="{{$.Page.Paginater.Current}}"
@@ -100,7 +100,7 @@
 											<input type="hidden" name="notification_id" value="{{.ID}}">
 											<input type="hidden" name="status" value="read">
 											<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-											<button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_read"}}'
+											<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_read"}}'
 												data-url="{{AppSubUrl}}/notifications/status"
 												data-status="read"
 												data-page="{{$.Page.Paginater.Current}}"
@@ -115,7 +115,7 @@
 											<input type="hidden" name="notification_id" value="{{.ID}}">
 											<input type="hidden" name="status" value="unread">
 											<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-											<button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_unread"}}'
+											<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_unread"}}'
 												data-url="{{AppSubUrl}}/notifications/status"
 												data-status="unread"
 												data-page="{{$.Page.Paginater.Current}}"
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3663511fe..507d92b01 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2238,13 +2238,13 @@ a.ui.active.label:hover {
   border-left: none;
 }
 
-.ui.button.button-link {
+.ui.button.button-ghost {
   background: transparent;
   border: none;
   color: inherit;
 }
 
-.ui.button.button-link:hover {
+.ui.button.button-ghost:hover {
   color: var(--color-primary);
 }