highlight directive added

app/shared/components/match.component.html

@@ -19,7 +19,7 @@
                 <span class="label label-success">{{match.Type}}</span>
             </td>
             <td>
-                <button type="button" class="btn btn-default btn-xs" (click)="subscribe()">
+                <button type="button" class="btn btn-default btn-md" (click)="subscribe()">
                             Subscribe to feed
                         </button>
             </td>
@@ -39,7 +39,7 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr *ngFor="let feed of match.Feeds">
+                            <tr *ngFor="let feed of match.Feeds" feedHighlight>
                                 <td>
                                     <span class="feed-time">{{feed.CreatedAt | date:'shortTime' }}</span>
                                 </td>

app/shared/directives/highlight.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
+
+@Directive({
+  selector: '[feedHighlight]'
+})
+export class HighlightDirective {
+  constructor(private el: ElementRef, private renderer: Renderer) {
+      this.renderer.setElementClass(this.el.nativeElement, 'feed-highlight', true);
+   }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight('white');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
+  }
+}