From fd26c88bafcead5b960c8ae5b748d71536fd821a Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Fri, 6 Nov 2020 12:26:23 -0800
Subject: [PATCH 1/3] refactor: adding borders to timeline card

---
 .../timeline-card-list/timeline-card-list.component.scss      | 4 ++++
 .../timeline-card-list/timeline-card-list.component.ts        | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.scss b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.scss
index b76f48ff9..21ed2ef1f 100644
--- a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.scss
+++ b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.scss
@@ -47,18 +47,22 @@
       width: 100%;
       box-sizing: border-box;
       border-radius: 6px;
+      border: 1px solid $gray-2;
 
       &.selected-card {
         background: $blue-1;
+        border: 1px solid $blue-2;
 
         &:hover {
           background: $blue-2;
+          border: 1px solid $blue-5;
           cursor: pointer;
         }
       }
 
       &:hover {
         background: $gray-1;
+        border: 1px solid $gray-2;
         cursor: pointer;
       }
     }
diff --git a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.ts b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.ts
index 990ea6f40..c5d09cd14 100644
--- a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.ts
+++ b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.ts
@@ -18,8 +18,7 @@ import { TimelineCardContainerComponent } from './container/timeline-card-contai
             role="${ButtonRole.Primary}"
             display="${ButtonStyle.Outlined}"
             (click)="item.showAll = true"
-            class="button"
-            [ngClass]="{ 'with-margin': this.showTime }"
+            class="button with-margin"
           ></ht-button>
 
           <ng-template #showSimilarCards>

From 1e6ec1ffcfb52acd42d6687f3f76c1aed60edc6d Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Fri, 6 Nov 2020 12:43:18 -0800
Subject: [PATCH 2/3] refactor: fixing test

---
 .../timeline-card-list/timeline-card-list.component.test.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts
index 58a3e87e8..b97515de3 100644
--- a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts
+++ b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts
@@ -167,6 +167,6 @@ describe('Timeline Card List component', () => {
     });
 
     expect(spectator.query('.time')).not.toExist();
-    expect(spectator.query('.button')).not.toBe(spectator.query('.with-margin'));
+    expect(spectator.query('.button')).toBe(spectator.query('.with-margin'));
   });
 });

From 49661ae4bcee50fab5066d5ef9a37f693414e151 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Fri, 6 Nov 2020 12:57:27 -0800
Subject: [PATCH 3/3] refactor: fixing test

---
 .../timeline-card-list/timeline-card-list.component.test.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts
index b97515de3..1bece88ce 100644
--- a/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts
+++ b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts
@@ -160,13 +160,13 @@ describe('Timeline Card List component', () => {
     // Only one card element should be visible. Other two should be gropued and hidden
     expect(spectator.queryAll('.card').length).toEqual(1);
     expect(spectator.query('.time')).toExist();
-    expect(spectator.query('.button')).toBe(spectator.query('.with-margin'));
+    expect(spectator.query('.button')).toHaveClass('button with-margin');
 
     spectator.setHostInput({
       showTime: false
     });
 
     expect(spectator.query('.time')).not.toExist();
-    expect(spectator.query('.button')).toBe(spectator.query('.with-margin'));
+    expect(spectator.query('.button')).toHaveClass('button with-margin');
   });
 });