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.test.ts b/projects/observability/src/shared/components/timeline-card-list/timeline-card-list.component.test.ts index 58a3e87e8..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')).not.toBe(spectator.query('.with-margin')); + expect(spectator.query('.button')).toHaveClass('button with-margin'); }); }); 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" >