adding bracket-mark component

Author: ToBinio

app/components/bracket-mark.hbs

@@ -0,0 +1,3 @@
+<span local-class='mark-wrapper'>
+  <mark local-class="{{@color}}">{{yield}}</mark>
+</span>

app/components/bracket-mark.module.css

@@ -0,0 +1,30 @@
+mark {
+    background-color: transparent;
+
+    &.orange {
+        color: hsl(39, 98%, 47%);
+    }
+
+    &.yellow {
+        color: hsl(39, 71%, 45%);
+    }
+
+    &.green {
+        color: hsl(136, 67%, 38%);
+    }
+}
+
+.mark-wrapper {
+    margin: 0;
+    word-break: break-all;
+
+    &:before {
+        content: "(";
+        margin-right: -3px;
+    }
+
+    &:after {
+        content: ")";
+        margin-left: -3px;
+    }
+}

app/components/version-list/row.hbs

@@ -23,17 +23,15 @@
       <EmberTooltip @side="right" data-test-release-track-title>
         {{this.releaseTrackTitle}}
         {{#if this.displaysReleaseTrackModifiers}}
-          <p local-class='mark-wrapper'>
-            {{#if @version.isPrerelease}}
-              <mark local-class="yellow">prerelease</mark>
-            {{/if}}
-            {{#if this.hasAllReleaseTrackModifiers}}
-              ,
-            {{/if}}
-            {{#if @version.isHighestOfReleaseTrack}}
-              <mark local-class="green">latest</mark>
-            {{/if}}
-          </p>
+          {{#if @version.isPrerelease}}
+            <BracketMark @color='yellow'>prerelease</BracketMark>
+          {{/if}}
+          {{#if this.hasAllReleaseTrackModifiers}}
+            ,
+          {{/if}}
+          {{#if @version.isHighestOfReleaseTrack}}
+            <BracketMark @color='green'>latest</BracketMark>
+          {{/if}}
         {{/if}}
       </EmberTooltip>
     </div>
@@ -72,9 +70,7 @@
         <EmberTooltip>
           {{date-format @version.created_at 'PPP'}}
           {{#if @version.isNew}}
-            <p local-class='mark-wrapper'>
-              <mark local-class="orange">recent</mark>
-            </p>
+            <BracketMark @color='orange'>recent</BracketMark>
           {{/if}}
         </EmberTooltip>
       </time>

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

@@ -190,38 +190,6 @@
     }
 }
 
-mark{
-    background-color: transparent;
-
-    &.orange{
-         color: hsl(39, 98%, 47%);
-     }
-
-    &.yellow{
-         color: hsl(39, 71%, 45%);
-     }
-
-    &.green{
-         color: hsl(136, 67%, 38%);
-     }
-}
-
-.mark-wrapper{
-    display: inline;
-    margin: 0;
-    word-break: break-all;
-
-    &:before{
-        content: "(";
-        margin-right: -3px;
-    }
-
-    &:after{
-        content: ")";
-        margin-left: -3px;
-    }
-}
-
 .msrv {
     text-transform: initial;