Adjust styling of green and red divs

puzzle · Dec 8, 2023 · 35f3639 · 35f3639
1 parent dc70125
commit 35f3639
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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;
 }