diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 1748035..608a97a 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -22,7 +22,7 @@ .tfw-message-btn-divider { opacity: 0.25; - border: 1px solid $tao-divider-color; + border: 1px solid $tao-gray-color; } .tfw-message-btn { color: $tao-btn-font-color; @@ -114,7 +114,7 @@ .originator { font-style: normal; font-weight: bold; - font-size: 14px; + font-size: $font-size-base; line-height: 26px; display: flex; @@ -123,7 +123,8 @@ } .timestamp { - font-size: $font-size-tiny; + font-size: $font-size-base; + color: $tao-gray-color; opacity: 0.37; } } diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index b6b1062..685854a 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -98,7 +98,7 @@ $tao-card-color: #363E56; $tao-message-originator-color: #6697FF; $tao-copy-color: #FFFFFF; $tao-timestamp-color: #94A6B9; -$tao-divider-color: #94A6B9; // @25% opacity +$tao-gray-color: #94A6B9; // @25% opacity $tao-yellow-color: #FFD68F; $tao-blue-color: #6697FF; $tao-green-color: #48BEB0; diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss index 95084bb..ab95fae 100644 --- a/src/assets/scss/mixins/_button.scss +++ b/src/assets/scss/mixins/_button.scss @@ -13,5 +13,13 @@ height: $space; margin-right: $tiny; color: $tao-btn-font-color; + outline: none; + + &:active { + background: $tao-btn-font-color; + border: $tao-btn-font-color; + color: $color; + border-radius: 10px; + } }