fix(ui): increase close area on executions tabs (#14)

chutney-testing · Feb 28, 2024 · feee40d · feee40d
1 parent b633330
commit feee40d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/.../modules/campaign/components/execution/history/campaign-executions-history.component.html b/.../modules/campaign/components/execution/history/campaign-executions-history.component.html
@@ -24,7 +24,9 @@ <h6>{{ campaign.description }}</h6>
         <li *ngFor="let exec of tabs" [ngbNavItem]="exec.report.executionId.toString()" [destroyOnHide]="false">
             <a ngbNavLink>
                 <small><strong>#{{ exec.report.executionId }}</strong> ({{ exec.report.startDate | amCalendar}})</small>
-                <i class="fa-regular fa-x fa-xs ms-2 fw-light" (click)="closeReport($event, exec.report.executionId)"></i>
+                <button type="button" class="btn btn-sm ms-1 close-tab" (click)="closeReport($event, exec.report.executionId)">
+                    <i class="fa-regular fa-x fa-xs fw-light" ></i>
+                </button>
             </a>
             <ng-template ngbNavContent>
                 <chutney-campaign-execution [campaignId]="campaign.id" [report]="exec" [jiraUrl]="jiraUrl">

diff --git a/.../modules/campaign/components/execution/history/campaign-executions-history.component.scss b/.../modules/campaign/components/execution/history/campaign-executions-history.component.scss
@@ -0,0 +1,3 @@
+.close-tab:hover {
+    border: 1px solid;
+}
diff --git a/...modules/scenarios/components/execution/history/scenario-executions-history.component.html b/...modules/scenarios/components/execution/history/scenario-executions-history.component.html
@@ -25,7 +25,9 @@ <h6 [innerHTML]="scenario.description | linkify"></h6>
         <li *ngFor="let exec of tabs" [ngbNavItem]="exec.executionId.toString()" [destroyOnHide]="false">
             <a ngbNavLink>
                 <small><strong>#{{exec.executionId}} </strong> <small>({{ exec.time | amCalendar}})</small></small>
-                <i class="fa-regular fa-x fa-xs ms-2 fw-light" (click)="closeReport($event, exec.executionId)"></i>
+                <button type="button" class="btn btn-sm ms-1 close-tab" (click)="closeReport($event, exec.executionId)">
+                    <i class="fa-regular fa-x fa-xs fw-light" ></i>
+                </button>
             </a>
             <ng-template ngbNavContent>
                 <chutney-scenario-execution [scenario]="scenario"

diff --git a/...modules/scenarios/components/execution/history/scenario-executions-history.component.scss b/...modules/scenarios/components/execution/history/scenario-executions-history.component.scss
@@ -1,15 +1,8 @@
-.close {
-    font-size: 1.4rem;
-    opacity: 0.1;
-    transition: opacity 0.3s;
-}
-
-.nav-link:hover > .close {
-    opacity: 0.8;
-}
-
 .executions-tabs {
     top: -1.5rem;
     z-index: 1021;
     background-color: var(--bs-body-bg) !important;
 }
+.close-tab:hover {
+    border: 1px solid;
+}