From fb0e3946470d17c9789625ea05ea13ce4678afe1 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 8 Dec 2023 09:05:31 +0100
Subject: [PATCH 1/4] Add green red color on complete dialog hover focus

---
 .../complete-dialog.component.html            |  8 ++---
 .../complete-dialog.component.scss            | 35 +++++++++++++------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
index 721fec9e86..31442dd753 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -13,10 +13,10 @@
       <label class="text-black">Bewertung</label>
       <div class="d-flex gap-3">
         <div
-          class="successful w-50 valuation-card card-hover"
+          class="successful w-50 valuation-card card-hover-successful"
           [ngClass]="{
             active: completeForm.value.isSuccessful == true,
-            'non-active': completeForm.value.isSuccessful === false
+            'non-active-successful': completeForm.value.isSuccessful === false
           }"
           (click)="switchSuccessState('successful')"
           (keydown.enter)="switchSuccessState('successful')"
@@ -26,10 +26,10 @@
           Objective erreicht
         </div>
         <div
-          class="not-successful w-50 valuation-card card-hover"
+          class="not-successful w-50 valuation-card card-hover-not-successful"
           [ngClass]="{
             active: completeForm.value.isSuccessful === false,
-            'non-active': completeForm.value.isSuccessful == true
+            'non-active-not-successful': completeForm.value.isSuccessful == true
           }"
           (click)="switchSuccessState('notSuccessful')"
           (keydown.enter)="switchSuccessState('notSuccessful')"
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
index 2c09a80366..82eeb43592 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
@@ -19,8 +19,8 @@
   font-weight: bold;
 }
 
-.card-hover:hover {
-  background-color: lightgray;
+.card-shadow {
+  color: white;
   box-shadow:
     0 0 0 0 rgba(0, 0, 0, 0.06),
     1px 1px 2px 0 rgba(0, 0, 0, 0.06),
@@ -30,6 +30,20 @@
     21px 18px 8px 0 rgba(0, 0, 0, 0);
 }
 
+.card-hover-successful:hover,
+.card-hover-successful:focus {
+  @extend .card-shadow;
+  background-color: #1e8a29;
+  outline: #1e8a29 solid 2px;
+}
+
+.card-hover-not-successful:hover,
+.card-hover-not-successful:focus {
+  @extend .card-shadow;
+  background-color: #ba3838;
+  outline: #ba3838 solid 2px;
+}
+
 .active {
   background-color: #1e5a96;
   color: white;
@@ -40,13 +54,12 @@
   color: black;
 }
 
-.non-active:hover {
-  background-color: lightgray;
-  box-shadow:
-    0 0 0 0 rgba(0, 0, 0, 0.06),
-    1px 1px 2px 0 rgba(0, 0, 0, 0.06),
-    3px 3px 4px 0 rgba(0, 0, 0, 0.05),
-    8px 6px 6px 0 rgba(0, 0, 0, 0.03),
-    14px 11px 7px 0 rgba(0, 0, 0, 0.01),
-    21px 18px 8px 0 rgba(0, 0, 0, 0);
+.non-active-successful:hover {
+  @extend .card-shadow;
+  background-color: #1e8a29;
+}
+
+.non-active-not-successful:hover {
+  @extend .card-shadow;
+  background-color: #ba3838;
 }

From dc7012593bbb1df435c7de787ec80a73d9feee03 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 8 Dec 2023 10:14:51 +0100
Subject: [PATCH 2/4] Fix frontend tests

---
 .../complete-dialog.component.spec.ts              | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
index 96dd62fa53..c54d0fc2c3 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
@@ -39,10 +39,14 @@ describe('CompleteDialogComponent', () => {
   });
 
   it('should set right classes on init', () => {
-    let elements = document.querySelectorAll('.card-hover');
+    let elements = document.querySelectorAll('.valuation-card');
+    let successful = document.querySelectorAll('.card-hover-successful');
+    let notSuccessful = document.querySelectorAll('.card-hover-not-successful');
     let submitButton = document.querySelectorAll('button')[1];
 
     expect(elements.length).toEqual(2);
+    expect(successful.length).toEqual(1);
+    expect(notSuccessful.length).toEqual(1);
     expect(component.completeForm.value.isSuccessful).toBeNull();
     expect(component.completeForm.value.comment).toBeNull();
     expect(component.completeForm.invalid).toBeTruthy();
@@ -70,15 +74,15 @@ describe('CompleteDialogComponent', () => {
   it('should set active and non-active classes on switch', () => {
     component.switchSuccessState('successful');
     fixture.detectChanges();
-    let nonActiveElement = document.querySelector('.non-active');
+    let nonActiveElement = document.querySelector('.active');
 
-    expect(nonActiveElement!.innerHTML).toContain('Objective nicht erreicht');
+    expect(nonActiveElement!.innerHTML).toContain('Objective erreicht');
 
     component.switchSuccessState('notSuccessful');
     fixture.detectChanges();
-    nonActiveElement = document.querySelector('.non-active');
+    nonActiveElement = document.querySelector('.active');
 
-    expect(nonActiveElement!.innerHTML).toContain('Objective erreicht');
+    expect(nonActiveElement!.innerHTML).toContain('Objective nicht erreicht');
   });
 
   it('should close dialog with right data', () => {

From 35f36394f40cf982b6d0c7bc1fd1476fbc662901 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 8 Dec 2023 10:54:40 +0100
Subject: [PATCH 3/4] Adjust styling of green and red divs

---
 .../complete-dialog.component.html            |  4 ++--
 .../complete-dialog.component.scss            | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
index 31442dd753..8421c2f029 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -15,7 +15,7 @@
         <div
           class="successful w-50 valuation-card card-hover-successful"
           [ngClass]="{
-            active: completeForm.value.isSuccessful == true,
+            'active-successful': completeForm.value.isSuccessful == true,
             'non-active-successful': completeForm.value.isSuccessful === false
           }"
           (click)="switchSuccessState('successful')"
@@ -28,7 +28,7 @@
         <div
           class="not-successful w-50 valuation-card card-hover-not-successful"
           [ngClass]="{
-            active: completeForm.value.isSuccessful === false,
+            'active-not-successful': completeForm.value.isSuccessful === false,
             'non-active-not-successful': completeForm.value.isSuccessful == true
           }"
           (click)="switchSuccessState('notSuccessful')"
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
index 82eeb43592..f757130a0f 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
@@ -1,3 +1,8 @@
+div,
+div:hover {
+  outline: none;
+}
+
 .commentary-field {
   resize: none;
   padding: 0.625rem;
@@ -20,7 +25,6 @@
 }
 
 .card-shadow {
-  color: white;
   box-shadow:
     0 0 0 0 rgba(0, 0, 0, 0.06),
     1px 1px 2px 0 rgba(0, 0, 0, 0.06),
@@ -34,22 +38,28 @@
 .card-hover-successful:focus {
   @extend .card-shadow;
   background-color: #1e8a29;
-  outline: #1e8a29 solid 2px;
+  color: white;
 }
 
 .card-hover-not-successful:hover,
 .card-hover-not-successful:focus {
   @extend .card-shadow;
   background-color: #ba3838;
-  outline: #ba3838 solid 2px;
+  color: white;
 }
 
-.active {
-  background-color: #1e5a96;
+.active-successful {
+  background-color: #1e8a29;
+  color: white;
+}
+
+.active-not-successful {
+  background-color: #ba3838;
   color: white;
 }
 
-.non-active {
+.non-active-successful,
+.non-active-not-successful {
   background-color: white;
   color: black;
 }

From 07498bb0ea7ecc077c7bd17956b201110dbe3c9d Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 8 Dec 2023 11:01:29 +0100
Subject: [PATCH 4/4] Fix complete dialog spec

---
 .../dialog/complete-dialog/complete-dialog.component.spec.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
index c54d0fc2c3..e6cda43dea 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
@@ -74,13 +74,13 @@ describe('CompleteDialogComponent', () => {
   it('should set active and non-active classes on switch', () => {
     component.switchSuccessState('successful');
     fixture.detectChanges();
-    let nonActiveElement = document.querySelector('.active');
+    let nonActiveElement = document.querySelector('.active-successful');
 
     expect(nonActiveElement!.innerHTML).toContain('Objective erreicht');
 
     component.switchSuccessState('notSuccessful');
     fixture.detectChanges();
-    nonActiveElement = document.querySelector('.active');
+    nonActiveElement = document.querySelector('.active-not-successful');
 
     expect(nonActiveElement!.innerHTML).toContain('Objective nicht erreicht');
   });