fix(SyCheckmark): change highlight class name with it tests

app/analysis/index/template.hbs

@@ -374,10 +374,10 @@
                           report.verifiedBy
                           report.verifiedBy.username
                         }}</td>
-                      <td><SyCheckmark @checked={{report.rejected}} /></td>
-                      <td><SyCheckmark @checked={{report.review}} /></td>
-                      <td><SyCheckmark @checked={{report.notBillable}} /></td>
-                      <td><SyCheckmark @checked={{report.billed}} /></td>
+                      <td><SyCheckmark @checked={{report.rejected}} @highlight={{true}} /></td>
+                      <td><SyCheckmark @checked={{report.review}} @highlight={{true}} /></td>
+                      <td><SyCheckmark @checked={{report.notBillable}} @highlight={{true}} /></td>
+                      <td><SyCheckmark @checked={{report.billed}} @highlight={{true}} /></td>
                     </tr>
                   {{/each}}
                   {{#if this._canLoadMore}}

app/components/sy-checkmark/template.hbs

@@ -1 +1 @@
-<FaIcon class="{{if @checked "blue-checked"}}" ...attributes @icon={{this.icon}} />
+<FaIcon class="{{if (and @highlight @checked) "highlight"}}" ...attributes @icon={{this.icon}} />

app/index/activities/template.hbs

@@ -57,9 +57,9 @@
                 {{/if}}
               </td>
               <td>
-                <div><SyCheckmark @checked={{activity.review}} />
+                <div><SyCheckmark @checked={{activity.review}} @highlight={{true}} />
                   Needs review</div>
-                <div><SyCheckmark @checked={{activity.notBillable}} />
+                <div><SyCheckmark @checked={{activity.notBillable}} @highlight={{true}} />
                   Not billable</div>
               </td>
               <td>

app/styles/analysis.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .table--analysis {
   margin-bottom: 0;
   table-layout: fixed;
@@ -77,6 +79,6 @@
 .table--analysis tr.selected td {
   border-color: lighten($color-primary, 20%) !important;
 }
-.blue-checked {
-  color: darken($color-primary, 10);
+.highlight {
+  color: color.adjust($color-primary, $lightness: -10%);
 }

app/styles/components/sy-toggle.scss

@@ -1,11 +1,13 @@
+@use "sass:color";
+
 .sy-toggle {
   display: flex;
   align-items: center;
   cursor: pointer;
   margin: auto;
 
   &.active {
-    color: darken($color-primary, 10);
+    color: color.adjust($color-primary, $lightness: -10%);
   }
 
   &.inactive {

tests/integration/components/sy-checkmark/component-test.js

@@ -15,4 +15,10 @@ module("Integration | Component | sy checkmark", function (hooks) {
     await render(hbs`<SyCheckmark @checked={{true}} />`);
     assert.dom(".fa-square-check").exists({ count: 1 });
   });
+
+  test("works highlight", async function (assert) {
+    await render(hbs`<SyCheckmark @checked={{true}} @highlight={{true}} />`);
+    assert.dom(".fa-square-check").exists({ count: 1 });
+    assert.dom(".highlight").exists({ count: 1 });
+  });
 });