refactor: adding borders to timeline card (#338)

* refactor: adding borders to timeline card

* refactor: fixing test

* refactor: fixing test

Author: anandtiwary

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;
       }
     }

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')).not.toBe(spectator.query('.with-margin'));
+    expect(spectator.query('.button')).toHaveClass('button with-margin');
   });
 });

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>