De-emphasize issue sidebar buttons (#26171)

I find the colored buttons in the issue sidebar distracting, given that
they are not primary actions, I think we can de-colorize them.

Before:
<img width="285" alt="Screenshot 2023-07-26 at 19 42 22"
src="https://github.com/go-gitea/gitea/assets/115237/7e784805-4e01-4199-94bb-0538a0130264">
<img width="288" alt="Screenshot 2023-07-26 at 19 43 06"
src="https://github.com/go-gitea/gitea/assets/115237/3a89c661-e24a-4ebf-a585-d404d0a6a78a">
<img width="285" alt="Screenshot 2023-07-26 at 19 44 36"
src="https://github.com/go-gitea/gitea/assets/115237/c1aa8c13-6f41-4763-8149-d1c07cb4be5c">:

After:
<img width="286" alt="Screenshot 2023-07-26 at 19 42 04"
src="https://github.com/go-gitea/gitea/assets/115237/74d640c2-e0ab-4fef-87aa-9e788e9010e2">
<img width="285" alt="Screenshot 2023-07-26 at 19 42 51"
src="https://github.com/go-gitea/gitea/assets/115237/3b69976a-9aa4-4e1c-8df3-4168f4a9fcf9">
<img width="286" alt="Screenshot 2023-07-26 at 19 45 15"
src="https://github.com/go-gitea/gitea/assets/115237/897222fd-4df2-4d99-98eb-e5f8fb77c4d6">

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index c3a405d8557db598ab52183466b27654d71c95dc..c89df8626a2a4c4f9f93c983ecb95023a5599905 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -299,19 +299,28 @@
                                                {{$.CsrfTokenHtml}}
                                        </form>
                                        {{if $.IsStopwatchRunning}}
-                                               <button class="ui fluid button issue-stop-time">{{.locale.Tr "repo.issues.stop_tracking"}}</button>
-                                               <button class="ui fluid negative button issue-cancel-time gt-mt-3">{{.locale.Tr "repo.issues.cancel_tracking"}}</button>
+                                               <button class="ui fluid button issue-stop-time">
+                                                       {{svg "octicon-stopwatch" 16 "gt-mr-3"}}
+                                                       {{.locale.Tr "repo.issues.stop_tracking"}}
+                                               </button>
+                                               <button class="ui fluid button issue-cancel-time gt-mt-3">
+                                                       {{svg "octicon-trash" 16 "gt-mr-3"}}
+                                                       {{.locale.Tr "repo.issues.cancel_tracking"}}
+                                               </button>
                                        {{else}}
                                                {{if .HasUserStopwatch}}
                                                        <div class="ui warning message">
                                                                {{.locale.Tr "repo.issues.tracking_already_started" (.OtherStopwatchURL|Escape) | Safe}}
                                                        </div>
                                                {{end}}
-                                               <button class="ui fluid button issue-start-time" data-tooltip-content='{{.locale.Tr "repo.issues.start_tracking"}}'>{{.locale.Tr "repo.issues.start_tracking_short"}}</button>
+                                               <button class="ui fluid button issue-start-time" data-tooltip-content='{{.locale.Tr "repo.issues.start_tracking"}}'>
+                                                       {{svg "octicon-stopwatch" 16 "gt-mr-3"}}
+                                                       {{.locale.Tr "repo.issues.start_tracking_short"}}
+                                               </button>
                                                <div class="ui mini modal issue-start-time-modal">
                                                        <div class="header">{{.locale.Tr "repo.issues.add_time"}}</div>
                                                        <div class="content">
-                                                               <form method="post" id="add_time_manual_form" action="{{.Issue.Link}}/times/add" class="ui action input fluid">
+                                                               <form method="post" id="add_time_manual_form" action="{{.Issue.Link}}/times/add" class="ui input fluid gt-gap-3">
                                                                        {{$.CsrfTokenHtml}}
                                                                        <input placeholder='{{.locale.Tr "repo.issues.add_time_hours"}}' type="number" name="hours">
                                                                        <input placeholder='{{.locale.Tr "repo.issues.add_time_minutes"}}' type="number" name="minutes" class="ui compact">
@@ -322,7 +331,10 @@
                                                                <button class="ui red cancel button">{{.locale.Tr "repo.issues.add_time_cancel"}}</button>
                                                        </div>
                                                </div>
-                                               <button class="ui fluid button green issue-add-time gt-mt-3" data-tooltip-content='{{.locale.Tr "repo.issues.add_time"}}'>{{.locale.Tr "repo.issues.add_time_short"}}</button>
+                                               <button class="ui fluid button issue-add-time gt-mt-3" data-tooltip-content='{{.locale.Tr "repo.issues.add_time"}}'>
+                                                       {{svg "octicon-plus" 16 "gt-mr-3"}}
+                                                       {{.locale.Tr "repo.issues.add_time_short"}}
+                                               </button>
                                        {{end}}
                                </div>
                        </div>
@@ -381,7 +393,7 @@
                                <form class="ui fluid action input issue-due-form" action="{{AppSubUrl}}/{{PathEscape .Repository.Owner.Name}}/{{PathEscape .Repository.Name}}/issues/{{.Issue.Index}}/deadline" method="post" id="update-issue-deadline-form">
                                        {{$.CsrfTokenHtml}}
                                        <input required placeholder="{{.locale.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
-                                       <button class="ui green icon button">
+                                       <button class="ui icon button">
                                                {{if ne .Issue.DeadlineUnix 0}}
                                                        {{svg "octicon-pencil"}}
                                                {{else}}
@@ -417,7 +429,7 @@
                                        {{range .BlockingDependencies}}
                                                <div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} gt-df gt-ac gt-sb">
                                                        <div class="item-left gt-df gt-jc gt-fc gt-f1">
-                                                               <a class="title" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | RenderEmoji $.Context}}">
+                                                               <a class="title muted" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | RenderEmoji $.Context}}">
                                                                        #{{.Issue.Index}} {{.Issue.Title | RenderEmoji $.Context}}
                                                                </a>
                                                                <div class="text small">
@@ -449,7 +461,7 @@
                                        {{range .BlockedByDependencies}}
                                                <div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} gt-df gt-ac gt-sb">
                                                        <div class="item-left gt-df gt-jc gt-fc gt-f1">
-                                                               <a class="title" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | RenderEmoji $.Context}}">
+                                                               <a class="title muted" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | RenderEmoji $.Context}}">
                                                                        #{{.Issue.Index}} {{.Issue.Title | RenderEmoji $.Context}}
                                                                </a>
                                                                <div class="text small">
@@ -507,7 +519,7 @@
                                                                <input type="text" class="search">
                                                                <div class="default text">{{.locale.Tr "repo.issues.dependency.add"}}</div>
                                                        </div>
-                                                       <button class="ui green icon button">
+                                                       <button class="ui icon button">
                                                                {{svg "octicon-plus"}}
                                                        </button>
                                                </div>
@@ -643,7 +655,7 @@
                                </form>
                        </div>
                </div>
-               <button class="gt-mt-2 fluid ui show-modal button negative" data-modal="#delete">
+               <button class="gt-mt-2 fluid ui show-modal button" data-modal="#delete">
                        {{svg "octicon-trash"}}
                        {{.locale.Tr "repo.issues.delete"}}
                </button>