From bca9861a4d9d83e3843fdee5db670da3b80e356f Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 29 Jun 2020 17:17:05 +0200 Subject: [PATCH 1/2] 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; } } From 670ac0f3dcf51f36ddf6e916f451c663da5cfb20 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Tue, 30 Jun 2020 15:48:04 +0200 Subject: [PATCH 2/2] Use global variables for shadow colors --- src/app/messages/messages.component.scss | 12 ++++++------ src/app/services/terminado.service.ts | 4 ++-- src/assets/scss/_variables.scss | 5 +++++ 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 95acc43..d19978c 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -33,32 +33,32 @@ text-align: center; .no { - @include set-button-style($tao-red-color, rgba(255, 69, 131, 0.5)); + @include set-button-style($tao-red-color, $tao-shadow-red-color); width: $xlarge; } .yes { - @include set-button-style($tao-green-color, rgba(72, 190, 176, 0.5)); + @include set-button-style($tao-green-color, $tao-shadow-green-color); width: $xlarge; } .solution { - @include set-button-style($tao-blue-color, rgba(255, 255, 255, 0.5)); + @include set-button-style(white, $tao-shadow-color); width: $xlarge + $medium + $tiny; } .hint { - @include set-button-style(white, rgba(102, 151, 255, 0.5)); + @include set-button-style($tao-blue-color, $tao-shadow-blue-color); width: $xlarge; } .fix { - @include set-button-style($tao-yellow-color, rgba(255, 214, 143, 0.5)); + @include set-button-style($tao-yellow-color, $tao-shadow-yellow-color); width: $xlarge + $medium + $tiny; } .next { - @include set-button-style($tao-blue-color, rgba(102, 151, 255, 0.5)); + @include set-button-style($tao-blue-color, $tao-shadow-blue-color); width: $xlarge; } } diff --git a/src/app/services/terminado.service.ts b/src/app/services/terminado.service.ts index 275c334..c07cb0f 100644 --- a/src/app/services/terminado.service.ts +++ b/src/app/services/terminado.service.ts @@ -26,8 +26,8 @@ export class TerminadoService { black: '#000000', red: '#FF5252', // $tao-red-500 brightRed: '#FF7171', // $tao-red-400 - green: '#2fd19f', // $tao-bright-green-500 - brightGreen: '#2fd19f', // $tao-bright-green-500 + green: '#60FDEB', // $tao-bright-green-500 + brightGreen: '#60FDEB', // $tao-bright-green-500 brightYellow: '#FFD283', // $tao-warm-yellow-300 yellow: '#FFB83B', // $tao-warm-yellow-500 magenta: '#FF8FC6', // $tao-pink-200 diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 56b3296..50c36d8 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -99,11 +99,16 @@ $tao-message-originator-color: #6697FF; $tao-copy-color: #FFFFFF; $tao-timestamp-color: #94A6B9; $tao-gray-color: #94A6B9; // @25% opacity +$tao-shadow-color: rgba(255, 255, 255, 0.5); $tao-yellow-color: #FFD68F; +$tao-shadow-yellow-color: rgba(255, 214, 143, 0.5); $tao-blue-color: #6697FF; +$tao-shadow-blue-color: rgba(102, 151, 255, 0.5); $tao-green-color: #48BEB0; +$tao-shadow-green-color: rgba(72, 190, 176, 0.5); $tao-cyan-color: #60FDEB; $tao-red-color: #FF4583; +$tao-shadow-red-color: rgba(255, 69, 131, 0.5); // Panel border radius