From e08432816aa3c3c805e36ddb5ada81344af39276 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 19 Dec 2022 19:01:17 +0100
Subject: [PATCH 1/2] Improve notification and stopwatch styles

---
 templates/base/head_navbar.tmpl | 48 ++++++++++++++++-----------------
 web_src/less/_base.less         | 28 +++++++++++++++++++
 web_src/less/helpers.less       |  1 +
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 4fc61cf36909b..c396f1ca36bc9 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -3,22 +3,24 @@
 	{{if .IsSigned}}
 		{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
 	{{end}}
-	<div class="item brand" style="justify-content: space-between;">
+	<div class="item brand sb">
 		<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
 			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
 		</a>
-		{{if .IsSigned}}
-		<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.locale.Tr "notifications"}}'>
-			<span class="text black">
-				<span class="fitted">{{svg "octicon-bell"}}</span>
-				<span class="ui red label mini{{if not $notificationUnreadCount}} hidden{{end}} notification_count">
-					{{$notificationUnreadCount}}
+		<div class="df ac">
+			{{if .IsSigned}}
+			<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only mr-4 mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+				<span class="fitted item">
+					{{svg "octicon-bell"}}
+					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
+						{{$notificationUnreadCount}}
+					</span>
 				</span>
-			</span>
-		</a>
-		{{end}}
-		<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
-			<i class="sidebar icon"></i>
+			</a>
+			{{end}}
+			<div class="ui icon button mobile-only" id="navbar-expand-toggle">
+				{{svg "octicon-three-bars"}}
+			</div>
 		</div>
 	</div>
 
@@ -77,12 +79,10 @@
 		</div>
 	{{else if .IsSigned}}
 		<div class="right stackable menu">
-			<a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
-				<span class="text">
-					<span class="fitted item">
-						{{svg "octicon-stopwatch"}}
-						<span class="red" style="position:absolute; right:-0.6em; top:-0.6em;">{{svg "octicon-dot-fill"}}</span>
-					</span>
+			<a class="active-stopwatch-trigger item ui mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
+				<span class="fitted relative">
+					{{svg "octicon-stopwatch"}}
+					<span class="header-stopwatch-dot"></span>
 					<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
 				</span>
 			</a>
@@ -116,16 +116,16 @@
 				</div>
 			</div>
 
-			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
-				<span class="text">
-					<span class="fitted">{{svg "octicon-bell"}}</span>
-					<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
+			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+				<span class="fitted item">
+					{{svg "octicon-bell"}}
+					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
 						{{$notificationUnreadCount}}
 					</span>
 				</span>
 			</a>
 
-			<div class="ui dropdown jump item tooltip" data-content="{{.locale.Tr "create_new"}}">
+			<div class="ui dropdown jump item tooltip mx-0" data-content="{{.locale.Tr "create_new"}}">
 				<span class="text">
 					<span class="fitted">{{svg "octicon-plus"}}</span>
 					<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
@@ -148,7 +148,7 @@
 				</div><!-- end content create new menu -->
 			</div><!-- end dropdown menu create new -->
 
-			<div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
+			<div class="ui dropdown jump item tooltip mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
 				<span class="text">
 					{{avatar .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 697bc0ee7459e..e906cece84310 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1364,6 +1364,7 @@ a.ui.card:hover,
   visibility: hidden;
 }
 
+.text.primary { color: var(--color-primary) !important; }
 .text.red { color: var(--color-red) !important; }
 .text.orange { color: var(--color-orange) !important; }
 .text.yellow { color: var(--color-yellow) !important; }
@@ -2427,6 +2428,33 @@ a.ui.basic.label:hover {
   margin-top: 1rem;
 }
 
+.header-stopwatch-dot {
+  position: absolute;
+  left: 7px;
+  top: -8px;
+  width: 14px;
+  height: 14px;
+  background: var(--color-primary);
+  border: 2px solid var(--color-header-bar);
+  border-radius: 100%;
+}
+
+.notification_count {
+  position: absolute;
+  left: 5px;
+  top: -8px;
+  min-width: 1.5em;
+  text-align: center;
+  background: var(--color-primary);
+  border: 2px solid var(--color-header-bar);
+  color: var(--color-header-bar);
+  padding: 2px;
+  border-radius: 1em;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: .7;
+}
+
 table th[data-sortt-asc],
 table th[data-sortt-desc] {
   &:hover {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 46284811eeba2..20670a378670b 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -21,6 +21,7 @@
 
 /* below class names match Tailwind CSS */
 .pointer-events-none { pointer-events: none !important; }
+.relative { position: relative !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;

From d0e2597b243d0723c03eb96b0b22e2ebc9b4b22b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 19 Dec 2022 19:40:09 +0100
Subject: [PATCH 2/2] tweak stopwatch dot

---
 web_src/less/_base.less | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index e906cece84310..450aa3014934d 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -2430,10 +2430,10 @@ a.ui.basic.label:hover {
 
 .header-stopwatch-dot {
   position: absolute;
-  left: 7px;
+  left: 8px;
   top: -8px;
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
   background: var(--color-primary);
   border: 2px solid var(--color-header-bar);
   border-radius: 100%;