From bca9861a4d9d83e3843fdee5db670da3b80e356f Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Mon, 29 Jun 2020 17:17:05 +0200
Subject: [PATCH] Change message active button colors

---
 src/app/messages/messages.component.scss | 18 ++++++++++--------
 src/assets/scss/_variables.scss          |  1 +
 src/assets/scss/mixins/_button.scss      | 12 +++++++-----
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 6c01006..95acc43 100644
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -33,39 +33,41 @@
     text-align: center;
 
     .no {
-      @include set-button-style($tao-red-color);
+      @include set-button-style($tao-red-color, rgba(255, 69, 131, 0.5));
       width: $xlarge;
     }
 
     .yes {
-      @include set-button-style($tao-green-color);
+      @include set-button-style($tao-green-color, rgba(72, 190, 176, 0.5));
       width: $xlarge;
     }
 
     .solution {
-      @include set-button-style($tao-blue-color);
+      @include set-button-style($tao-blue-color, rgba(255, 255, 255, 0.5));
       width: $xlarge + $medium + $tiny;
     }
 
     .hint {
-      @include set-button-style($tao-yellow-color);
-      width: $xlarge + $medium + $tiny;
+      @include set-button-style(white, rgba(102, 151, 255, 0.5));
+      width: $xlarge;
     }
 
     .fix {
-      @include set-button-style($tao-yellow-color);
+      @include set-button-style($tao-yellow-color, rgba(255, 214, 143, 0.5));
       width: $xlarge + $medium + $tiny;
     }
 
     .next {
-      @include set-button-style($tao-blue-color);
+      @include set-button-style($tao-blue-color, rgba(102, 151, 255, 0.5));
       width: $xlarge;
     }
   }
 }
 
 .highlighted-message {
-  box-shadow: 0px 0px 3px 0px rgba($tao-gray-300,0.65);
+  // box-shadow: 0px 0px 8px 0px $tao-blue-color;
+  border: 3px single $tao-blue-color;
+
 }
 
 @keyframes inflate {
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 685854a..56b3296 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -102,6 +102,7 @@ $tao-gray-color: #94A6B9; // @25% opacity
 $tao-yellow-color: #FFD68F;
 $tao-blue-color: #6697FF;
 $tao-green-color: #48BEB0;
+$tao-cyan-color: #60FDEB;
 $tao-red-color: #FF4583;
 
 
diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss
index ab95fae..213ab5b 100644
--- a/src/assets/scss/mixins/_button.scss
+++ b/src/assets/scss/mixins/_button.scss
@@ -1,6 +1,6 @@
 @import "../variables.scss";
 
-@mixin set-button-style($color) {
+@mixin set-button-style($color, $shadow-color) {
   box-sizing: border-box;
   border-radius: 10px;
   background: $color;
@@ -16,10 +16,12 @@
   outline: none;
 
   &:active {
-    background: $tao-btn-font-color;
-    border: $tao-btn-font-color;
-    color: $color;
-    border-radius: 10px;
+    opacity: 0.5;
+    box-shadow: none;
+  }
+
+  &:hover {
+    box-shadow: 0 0 8px $shadow-color;
   }
 }