From 8a8b7536475bea0146298177affb74dddd8c6f6a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 14 May 2023 04:38:22 +0800
Subject: [PATCH] Improve button-ghost, remove tertiary button (#24692)

<img width="474" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/7fd231f9-71c3-4769-ba96-37a5b77cf224">

<img width="557" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/c9945f61-39b4-4711-aea8-c34ef1d714c5">

<img width="641" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/691be76e-74fd-420d-9b9e-ba1f3b08e0b4">

And a page to test buttons:

<details>

<img width="451" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/5f61da24-2f36-40ad-a9bb-2205da5f5f04">

</details>

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
---
 templates/devtest/gitea-ui.tmpl               | 33 +++++++++++++++++++
 templates/repo/branch/list.tmpl               | 20 +++++------
 templates/repo/home.tmpl                      |  2 +-
 .../applications_oauth2_edit_form.tmpl        |  2 +-
 web_src/css/base.css                          | 20 +++--------
 web_src/css/user.css                          |  4 ---
 6 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 2fe478a07..c00d12217 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -1,5 +1,38 @@
 {{template "base/head" .}}
 <div class="page-content devtest ui container">
+	<div>
+		<h1>Button</h1>
+		<div>
+			Style:
+			<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
+			<label><input type="radio" name="button-style-size" value="">(normal)</label>
+			<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
+			<label><input type="radio" name="button-style-size" value="mini">mini</label>
+		</div>
+		<div>
+			State:
+			<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
+		</div>
+		<div id="devtest-button-samples">
+			<div>
+				<button class="ui primary button">Primary</button>
+				<button class="ui secondary button">Secondary</button>
+				<button class="ui basic secondary button">Basic Secondary</button>
+				<button class="ui red button">Red</button>
+				<button class="ui basic red button">Basic Red</button>
+			</div>
+			<div>This is a <button class="ui button button-ghost">Ghost</button> button</div>
+		</div>
+		<script type="module">
+			const $buttons = $('#devtest-button-samples').find('button');
+
+			const $buttonStyles = $('input[name*="button-style"]');
+			$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
+
+			const $buttonStates = $('input[name*="button-state"]');
+			$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
+		</script>
+	</div>
 
 	<div>
 		<h1>Tooltip</h1>
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 199d4489a..938825892 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -27,7 +27,7 @@
 							</td>
 							<td class="right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-									<button class="ui tertiary button show-create-branch-modal gt-mx-3"
+									<button class="ui button button-ghost show-create-branch-modal gt-mx-3"
 										data-modal="#create-branch-modal"
 										data-branch-from="{{$.DefaultBranch}}"
 										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,12 @@
 									</button>
 								{{end}}
 								{{if .EnableFeed}}
-									<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
+									<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
 										{{svg "octicon-rss"}}
 									</a>
 								{{end}}
 								{{if not $.DisableDownloadSourceArchives}}
-									<div class="ui dropdown tertiary button gt-mx-3"  data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
+									<div class="ui dropdown button button-ghost gt-mx-3"  data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
 										{{svg "octicon-download"}}
 										<div class="menu">
 											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +51,7 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-									<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3"
+									<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
 										data-is-default-branch="true"
 										data-modal="#rename-branch-modal"
 										data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +134,7 @@
 									</td>
 									<td class="three wide right aligned overflow-visible">
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-											<button class="ui tertiary button show-modal show-create-branch-modal gt-mx-3"
+											<button class="ui button button-ghost show-modal show-create-branch-modal gt-mx-3"
 												data-branch-from="{{.Name}}"
 												data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
 												data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +144,12 @@
 											</button>
 										{{end}}
 										{{if $.EnableFeed}}
-											<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
+											<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
 												{{svg "octicon-rss"}}
 											</a>
 										{{end}}
 										{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
-											<div class="ui dropdown tertiary button gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
+											<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
 												{{svg "octicon-download"}}
 												<div class="menu">
 													<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +158,7 @@
 											</div>
 										{{end}}
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-											<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3"
+											<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
 												data-is-default-branch="false"
 												data-old-branch-name="{{.Name}}"
 												data-modal="#rename-branch-modal"
@@ -169,13 +169,13 @@
 										{{end}}
 										{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
 											{{if .IsDeleted}}
-												<button class="ui tertiary button undo-button gt-mx-3" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
+												<button class="ui button button-ghost undo-button gt-mx-3" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
 													<span class="text blue">
 														{{svg "octicon-reply"}}
 													</span>
 												</button>
 											{{else}}
-												<button class="ui tertiary button delete-button delete-branch-button gt-mx-3" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
+												<button class="ui button button-ghost delete-button delete-branch-button gt-mx-3" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
 													{{svg "octicon-trash"}}
 												</button>
 											{{end}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index e7a76cdaf..7c084b068 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui button tiny tertiary gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-ghost gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/templates/user/settings/applications_oauth2_edit_form.tmpl b/templates/user/settings/applications_oauth2_edit_form.tmpl
index 1a8336b15..8a9579c5c 100644
--- a/templates/user/settings/applications_oauth2_edit_form.tmpl
+++ b/templates/user/settings/applications_oauth2_edit_form.tmpl
@@ -27,7 +27,7 @@
 			<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
 				{{.CsrfTokenHtml}}
 				{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}}
-				<button class="ui tertiary button" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
+				<button class="ui button button-ghost" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
 			</form>
 		</div>
 	</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 6c1bbb00c..4c8d30c1b 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2180,13 +2180,16 @@ a.ui.active.label:hover {
   border-left: none;
 }
 
-.ui.button.button-ghost {
+/* a ghost button can be used as inline text, it doesn't have obvious styles */
+.button.button-ghost {
   background: transparent;
   border: none;
   color: inherit;
+  margin: 0;
+  padding: 0;
 }
 
-.ui.button.button-ghost:hover {
+.button.button-ghost:hover {
   color: var(--color-primary);
 }
 
@@ -2283,19 +2286,6 @@ a.ui.active.label:hover {
   border-color: var(--color-secondary-dark-3) !important;
 }
 
-.ui.tertiary.button {
-  color: var(--color-text-light);
-  border: none;
-}
-
-.ui.tertiary.button:hover {
-  color: var(--color-text);
-}
-
-.ui.tertiary.button:focus {
-  color: var(--color-text-dark);
-}
-
 .ui.primary.label,
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label {
diff --git a/web_src/css/user.css b/web_src/css/user.css
index 648480d71..a7106599d 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -121,10 +121,6 @@
   object-fit: contain;
 }
 
-.user.notification table button {
-  padding: 3px 3px 3px 5px;
-}
-
 #notification_div .tab.segment {
   overflow-x: auto;
 }