From 9296baf65a73ccdda329b45770d22390ead7905f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 17 Dec 2021 21:29:00 -0800
Subject: [PATCH] Change <a> elements to underline on hover (#17898)

Fomantic brings a opinionated style that removed underline on mouse
hover which I think is important UX to have.

This re-enables the underline in the Fomantic config and fixes a few
cases where underline was deemed disruptive.
---
 templates/shared/issuelist.tmpl               | 16 +++++++-------
 web_src/fomantic/_site/globals/site.variables |  1 +
 web_src/fomantic/build/semantic.css           |  2 +-
 web_src/less/_base.less                       | 15 ++++++++++++-
 web_src/less/_repository.less                 | 21 +++----------------
 web_src/less/helpers.less                     |  1 +
 6 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index d0ac4b9507..0b68a03414 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -31,14 +31,12 @@
 			</div>
 			<div class="issue-item-main f1 fc df">
 				<div class="issue-item-top-row">
-					<a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
-						{{RenderEmoji .Title}}
-						{{if .IsPull }}
-							{{if (index $.CommitStatus .PullRequest.ID)}}
-								{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
-							{{end}}
+					<a class="title tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title}}</a>
+					{{if .IsPull}}
+						{{if (index $.CommitStatus .PullRequest.ID)}}
+							{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
 						{{end}}
-					</a>
+					{{end}}
 					<span class="labels-list ml-2">
 						{{range .Labels}}
 							<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
@@ -126,14 +124,14 @@
 				</div>
 				<div class="issue-item-icon-right text grey">
 					{{range .Assignees}}
-						<a class="ui assignee tooltip" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-position="left center">
+						<a class="ui assignee tooltip tdn" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-position="left center">
 							{{avatar .}}
 						</a>
 					{{end}}
 				</div>
 				<div class="issue-item-icon-right text grey">
 					{{if .NumComments}}
-						<a href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+						<a class="tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 							{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
 						</a>
 					{{end}}
diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index e7e0b82918..dcd9c2f08c 100644
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@@ -6,3 +6,4 @@
 @useCustomScrollbars: false;
 @disabledOpacity: var(--opacity-disabled);
 @variationPopupTooltip: false;
+@linkHoverUnderline: underline;
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 457c3e93bd..56134e4c0d 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -37826,7 +37826,7 @@ a {
 
 a:hover {
   color: #1e70bf;
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 /*******************************
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 1d6b65e945..300323b2e8 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -236,6 +236,7 @@ a,
 .ui.breadcrumb a {
   color: var(--color-primary);
   cursor: pointer;
+  text-decoration-skip-ink: all;
 }
 
 a.muted {
@@ -245,7 +246,19 @@ a.muted {
 a:hover,
 a.muted:hover,
 .ui.breadcrumb a:hover {
-  color: var(--color-primary-dark-2);
+  color: var(--color-primary);
+}
+
+a.label,
+.repository-menu a,
+.ui.search .results a,
+.ui .menu a,
+.issue-keyword a {
+  text-decoration: none !important;
+}
+
+.ui.breadcrumb a:hover {
+  text-decoration: underline !important;
 }
 
 .ui.breadcrumb .divider {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 94ab67ef47..bf8722690c 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2837,20 +2837,6 @@ tbody.commit-list {
   }
 }
 
-.commit-summary a {
-  &:hover {
-    text-decoration: underline solid;
-  }
-
-  &.default-link {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline solid;
-    }
-  }
-}
-
 .commit-list .commit-status-link {
   display: inline-block;
   vertical-align: middle;
@@ -3012,13 +2998,12 @@ td.blob-excerpt {
   background-color: #fafafa;
 }
 
-.issue-keyword,
-.commit-body .issue-keyword:hover {
-  border-bottom: 1px dotted var(--color-text-light-2);
+.issue-keyword {
+  border-bottom: 1px dotted var(--color-text-light-3) !important;
 }
 
 .issue-keyword:hover {
-  border-bottom: none;
+  border-bottom: none !important;
 }
 
 .file-header {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index f35412fd0e..6904083da8 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -6,6 +6,7 @@
 .ac { align-items: center !important; }
 .tc { text-align: center !important; }
 .tl { text-align: left !important; }
+.tdn { text-decoration: none !important; }
 .jc { justify-content: center !important; }
 .js { justify-content: flex-start !important; }
 .je { justify-content: flex-end !important; }