more colors

Author: ToBinio

app/components/version-list/row.hbs

@@ -20,7 +20,9 @@
         {{@version.releaseTrack}}
       {{/if}}
 
-      <EmberTooltip @text={{this.releaseTrackTitle}} @side="right" data-test-release-track-title/>
+      <EmberTooltip @side="right" data-test-release-track-title>
+        {{{this.releaseTrackTitle}}}
+      </EmberTooltip>
     </div>
 
     <LinkTo
@@ -57,7 +59,7 @@
         <EmberTooltip>
           {{date-format @version.created_at 'PPP'}}
           {{#if @version.isNew}}
-            (<mark local-class="new">recent</mark>)
+            (<mark local-class="orange">recent</mark>)
           {{/if}}
         </EmberTooltip>
       </time>

app/components/version-list/row.js

@@ -11,7 +11,7 @@ export default class VersionRow extends Component {
   get releaseTrackTitle() {
     let { version } = this.args;
     if (version.yanked) {
-      return 'This version was yanked';
+      return 'This version was <mark style="color: hsl(0, 84%, 32%)">yanked</mark>';
     }
     if (version.invalidSemver) {
       return `Failed to parse version ${version.num}`;
@@ -24,10 +24,10 @@ export default class VersionRow extends Component {
 
     let modifiers = [];
     if (version.isPrerelease) {
-      modifiers.push('prerelease');
+      modifiers.push('<mark style="color: hsl(39, 71%, 45%)">prerelease</mark>');
     }
     if (version.isHighestOfReleaseTrack) {
-      modifiers.push('latest');
+      modifiers.push('<mark style="color: hsl(136, 67%, 38%)">latest</mark>');
     }
 
     let title = `Release Track: ${releaseTrack}`;

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

@@ -190,11 +190,14 @@
     }
 }
 
-mark.new{
-    background-color: transparent;
+mark.orange{
     color: hsl(39, 98%, 47%);
 }
 
+mark{
+    background-color: transparent;
+}
+
 .msrv {
     text-transform: initial;