VersionList::Row: Simplify tooltip color highlights

Author: Turbo87

app/components/bracket-mark.hbs

@@ -20,20 +20,7 @@
         {{@version.releaseTrack}}
       {{/if}}
 
-      <EmberTooltip @side="right" data-test-release-track-title>
-        {{this.releaseTrackTitle}}
-        {{#if this.displaysReleaseTrackModifiers}}
-          {{#if @version.isPrerelease}}
-            <BracketMark @color='yellow'>prerelease</BracketMark>
-          {{/if}}
-          {{#if this.hasAllReleaseTrackModifiers}}
-            ,
-          {{/if}}
-          {{#if @version.isHighestOfReleaseTrack}}
-            <BracketMark @color='green'>latest</BracketMark>
-          {{/if}}
-        {{/if}}
-      </EmberTooltip>
+      <EmberTooltip @text={{this.releaseTrackTitle}} @side="right" data-test-release-track-title/>
     </div>
 
     <LinkTo
@@ -70,7 +57,7 @@
         <EmberTooltip>
           {{date-format @version.created_at 'PPP'}}
           {{#if @version.isNew}}
-            <BracketMark @color='orange'>recent</BracketMark>
+            (<span local-class="new">new</span>)
           {{/if}}
         </EmberTooltip>
       </time>

app/components/bracket-mark.module.css

@@ -1,8 +1,11 @@
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
+import styles from './row.module.css';
+
 export default class VersionRow extends Component {
   @service session;
 
@@ -11,7 +14,7 @@ export default class VersionRow extends Component {
   get releaseTrackTitle() {
     let { version } = this.args;
     if (version.yanked) {
-      return 'This version was yanked';
+      return htmlSafe(`This version was <span class="${styles['rt-yanked']}">yanked</span>`);
     }
     if (version.invalidSemver) {
       return `Failed to parse version ${version.num}`;
@@ -22,19 +25,26 @@ export default class VersionRow extends Component {
 
     let { releaseTrack } = version;
 
-    return `Release Track: ${releaseTrack}`;
-  }
-
-  get displaysReleaseTrackModifiers() {
-    let { version } = this.args;
-
-    return (version.isPrerelease || version.isHighestOfReleaseTrack) && !version.yanked;
-  }
+    let modifiers = [];
+    if (version.isPrerelease) {
+      modifiers.push('prerelease');
+    }
+    if (version.isHighestOfReleaseTrack) {
+      modifiers.push('latest');
+    }
 
-  get hasAllReleaseTrackModifiers() {
-    let { version } = this.args;
+    let title = `Release Track: ${releaseTrack}`;
+    if (modifiers.length !== 0) {
+      let formattedModifiers = modifiers
+        .map(modifier => {
+          let klass = styles[`rt-${modifier}`];
+          return klass ? `<span class='${klass}'>${modifier}</span>` : modifier;
+        })
+        .join(', ');
 
-    return version.isPrerelease && version.isHighestOfReleaseTrack;
+      title += ` (${formattedModifiers})`;
+    }
+    return htmlSafe(title);
   }
 
   get isOwner() {

app/components/version-list/row.hbs

@@ -94,6 +94,18 @@
     }
 }
 
+.rt-latest {
+    color: hsl(136, 67%, 38%);
+}
+
+.rt-prerelease {
+    color: hsl(35, 95%, 59%);
+}
+
+.rt-yanked {
+    color: hsl(0, 87%, 58%);
+}
+
 .num-link {
     color: var(--fg-color);
     font-weight: 500;
@@ -184,10 +196,8 @@
     }
 }
 
-.date {
-    &.new {
-        color: hsl(39, 98%, 47%);
-    }
+.date.new, :global(.tooltip) .new {
+    color: hsl(39, 98%, 47%);
 }
 
 .msrv {