Versions: Add color explanations on hover (#6433)

Co-authored-by: Tobias Bieniek <[email protected]>

Author: ToBinio

app/components/version-list/row.hbs

@@ -54,7 +54,12 @@
         {{svg-jar "calendar"}}
         {{date-format-distance-to-now @version.created_at addSuffix=true}}
 
-        <EmberTooltip @text={{date-format @version.created_at 'PPP'}} />
+        <EmberTooltip>
+          {{date-format @version.created_at 'PPP'}}
+          {{#if @version.isNew}}
+            (<span local-class="new">new</span>)
+          {{/if}}
+        </EmberTooltip>
       </time>
     </div>
 

app/components/version-list/row.js

@@ -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}`;
@@ -32,9 +35,16 @@ export default class VersionRow extends Component {
 
     let title = `Release Track: ${releaseTrack}`;
     if (modifiers.length !== 0) {
-      title += ` (${modifiers.join(', ')})`;
+      let formattedModifiers = modifiers
+        .map(modifier => {
+          let klass = styles[`rt-${modifier}`];
+          return klass ? `<span class='${klass}'>${modifier}</span>` : modifier;
+        })
+        .join(', ');
+
+      title += ` (${formattedModifiers})`;
     }
-    return title;
+    return htmlSafe(title);
   }
 
   get isOwner() {

app/components/version-list/row.module.css

@@ -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 {