Improve notification and stopwatch styles (#22169)

- Add dot-style indicators to notification and time tracker
- Slightly reduce whitespace between right-aligned icons
- Move notification icon to right on mobile
- Switch menu icon to SVG

<img width="270" alt="Screenshot 2022-12-19 at 19 40 32"
src="https://user-images.githubusercontent.com/115237/208496795-ce8734a0-f109-47b7-8eb8-96931e867b23.png">
<img width="607" alt="Screenshot 2022-12-19 at 19 41 04"
src="https://user-images.githubusercontent.com/115237/208496797-2ff68197-f520-4174-927e-ead15addd63e.png">

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

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; }
@@ -2434,6 +2435,33 @@ a.ui.basic.label:hover {
   margin-top: 1rem;
 }
 
+.header-stopwatch-dot {
+  position: absolute;
+  left: 8px;
+  top: -8px;
+  width: 13px;
+  height: 13px;
+  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 {

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;