From c6f9edc9f79c4fdf346b088991c48bb5a281a64d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Tue, 26 Jun 2018 12:03:25 +0200
Subject: [PATCH] Add highlight to latest message

---
 src/app/messages/messages.component.html | 4 +++-
 src/app/messages/messages.component.scss | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index 26314d7..ccde8dc 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -11,7 +11,9 @@
     <div class="jumping-circle" id="jc2"></div>
     <div class="jumping-circle" id="jc3"></div>
   </div>
-  <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
+  <div class="tfw-grid-message"
+       *ngFor="let message of messages.slice().reverse(); let first = first"
+       [class.highlighted-message]="first">
     <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 59daafd..3f4e6c8 100644
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -34,6 +34,12 @@
   animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
 }
 
+.highlighted-message {
+  border-style: solid;
+  border-width: 1px;
+  border-color: $tao-blue-100;
+}
+
 @keyframes inflate {
   0%   { transform: scale(0,0); }
   100% { transform: scale(1,1); }