From 95e88667682e5873c1a857ee45720347d11c463a Mon Sep 17 00:00:00 2001
From: Mitan Omar <mitan@gmx.ch>
Date: Mon, 22 May 2023 16:33:57 +0200
Subject: [PATCH] fix: add glimming to the checked boxes in analysis &
 timesheet (#919)

* fix: add glimming to the checked boxes in analysis & timesheet

* fix(sy-checkmark): change highlight class name with it tests
---
 app/analysis/index/template.hbs                           | 8 ++++----
 app/components/sy-checkmark/template.hbs                  | 2 +-
 app/index/activities/template.hbs                         | 4 ++--
 app/styles/analysis.scss                                  | 5 +++++
 app/styles/components/sy-toggle.scss                      | 4 +++-
 .../integration/components/sy-checkmark/component-test.js | 6 ++++++
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/analysis/index/template.hbs b/app/analysis/index/template.hbs
index ed0c9d22d..2a03b3db2 100644
--- a/app/analysis/index/template.hbs
+++ b/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}}
diff --git a/app/components/sy-checkmark/template.hbs b/app/components/sy-checkmark/template.hbs
index 9f0abac13..d3bb5aded 100644
--- a/app/components/sy-checkmark/template.hbs
+++ b/app/components/sy-checkmark/template.hbs
@@ -1 +1 @@
-<FaIcon ...attributes @icon={{this.icon}} />
+<FaIcon class="{{if (and @highlight @checked) "highlight"}}" ...attributes @icon={{this.icon}} />
diff --git a/app/index/activities/template.hbs b/app/index/activities/template.hbs
index 4186386bd..068cbe8f7 100644
--- a/app/index/activities/template.hbs
+++ b/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>
diff --git a/app/styles/analysis.scss b/app/styles/analysis.scss
index e04bdd774..464a1e502 100644
--- a/app/styles/analysis.scss
+++ b/app/styles/analysis.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .table--analysis {
   margin-bottom: 0;
   table-layout: fixed;
@@ -77,3 +79,6 @@
 .table--analysis tr.selected td {
   border-color: lighten($color-primary, 20%) !important;
 }
+.highlight {
+  color: color.adjust($color-primary, $lightness: -10%);
+}
diff --git a/app/styles/components/sy-toggle.scss b/app/styles/components/sy-toggle.scss
index 6cf6cc478..52fc6921d 100644
--- a/app/styles/components/sy-toggle.scss
+++ b/app/styles/components/sy-toggle.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .sy-toggle {
   display: flex;
   align-items: center;
@@ -5,7 +7,7 @@
   margin: auto;
 
   &.active {
-    color: $color-primary;
+    color: color.adjust($color-primary, $lightness: -10%);
   }
 
   &.inactive {
diff --git a/tests/integration/components/sy-checkmark/component-test.js b/tests/integration/components/sy-checkmark/component-test.js
index a45e6595d..7b91c72fc 100644
--- a/tests/integration/components/sy-checkmark/component-test.js
+++ b/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 });
+  });
 });