Merge pull request #1352 from utmstack/backlog/feat_child_alerts

fix(alert-management): improved echoes button styles

Author: mjabascal10

frontend/src/app/data-management/alert-management/shared/components/alert-action-select/alert-action-select.component.css

@@ -231,3 +231,6 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transform: translateY(-1px);
 }
+i{
+  font-size: 12px;
+}

frontend/src/app/data-management/alert-management/shared/components/alert-child-column/alert-child-column.component.html

@@ -1,15 +1,12 @@
-<div class="d-flex justify-content-between align-items-center h-100 w-100 small-md-icon">
-  <div class="list-icons">
     <button
        (click)="onToggleExpand()"
-       class="btn-expand d-flex flex-row justify-items-center"
+       class="btn-expand d-flex w-fit h-100 gap-3 justify-items-center p-1 pl-2 justify-content-between  rounded-lg"
        [disabled]="loadingChildren"
        [ngbTooltip]="alert.hasChildren?(alert.expanded ? 'Collapse' : 'View echoes'):'No echoes'"
+       [ngClass]="alert.hasChildren?'pr-0':'pr-2'"
        container="body"
        placement="top">
-      <i class="!top-0" *ngIf="alert.hasChildren" [ngClass]="loadingChildren && alert.expanded ? 'icon-spinner2 spinner' : alert.expanded ? 'icon-arrow-down32' : 'icon-arrow-right32'"></i>
       <span>Echoes</span>
-      <small class="text-xs">{{ alert.echoes }}</small>
+      <span class="text-xs my-auto h-fit  ">{{ alert.echoes }}</span>
+      <i class="top-0 w-fit" *ngIf="alert.hasChildren" [ngClass]="loadingChildren && alert.expanded ? 'icon-spinner2 spinner' : alert.expanded ? 'icon-arrow-down32' : 'icon-arrow-right32'"></i>
     </button>
-  </div>
-</div>

frontend/src/app/data-management/alert-management/shared/components/alert-child-column/alert-child-column.component.scss

@@ -1,28 +1,26 @@
 .btn-expand {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  height: 33.07px;
-  border: 1px solid #0277bd;
-  border-radius: 4px;
+  border: 1px solid #004b8b;
   background-color: white;
-  color: #0277bd ;
-  font-size: 14px;
-  font-weight: 500;
+  color: #004b8b ;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
-  white-space: nowrap;
+  gap:0.3rem;
+}
+
+.text-xs{
+  font-size:0.58rem !important;
 }
 
+
+
 .btn-expand:hover:not(:disabled) {
-  background-color: #0277bd ;
+  background-color: #004b8b ;
   color: white;
-  border-color: #0277bd ;
+  border-color: #004b8b ;
 }
 
 .btn-expand:active:not(:disabled) {
-  background-color: #0277bd ;
+  background-color: #004b8b ;
   border-color: #004b8a;
   transform: scale(0.98);
 }
@@ -34,8 +32,9 @@
 
 .btn-expand i {
   font-size: 12px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  align-content: right;
 }
 
 .btn-expand .spinner {
@@ -52,3 +51,4 @@
   width: 70px;
   height: 32px;
 }
+