[ACS-7558] - Toolbar and buttons (#3833)

projects/aca-content/src/lib/ui/theme.scss

@@ -28,6 +28,10 @@ mat-icon {
 }
 
 .mdc-button {
+  .mdc-button__label {
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
+
   &.mat-primary {
     .mdc-button__label {
       -webkit-font-smoothing: initial;
@@ -51,6 +55,10 @@ mat-icon {
 }
 
 .mat-mdc-checkbox {
+  .mdc-checkbox:has(div) {
+    padding-right: 2px;
+  }
+
   .mdc-form-field {
     height: 24px;
 
@@ -100,14 +108,6 @@ mat-slide-toggle {
   }
 }
 
-.mat-mdc-tab-list {
-  .mat-mdc-tab-labels {
-    .mdc-tab--active {
-      color: #212121;
-    }
-  }
-}
-
 .mdc-list-item__primary-text {
   color: var(--adf-theme-foreground-text-color-087);
 }
@@ -172,10 +172,6 @@ mat-slide-toggle {
   }
 }
 
-.mat-mdc-checkbox .mdc-checkbox:has(div) {
-  padding-right: 2px;
-}
-
 .mdc-floating-label,
 .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab,
 .mat-mdc-checkbox label,
@@ -271,6 +267,14 @@ mat-snack-bar-container {
   border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
 }
 
+.mat-mdc-tab-list {
+  .mat-mdc-tab-labels {
+    .mdc-tab--active {
+      color: var($selected-text-color);
+    }
+  }
+}
+
 .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {
   color: var(--theme-sidenav-active-text-color);
 }
@@ -288,7 +292,7 @@ adf-dynamic-component {
 
 .mdc-notched-outline__trailing,
 .mdc-notched-outline__notch,
-.mdc-notched-outline__leading  {
+.mdc-notched-outline__leading {
   border-color: var(--adf-theme-foreground-text-color-014);
 }
 
@@ -306,7 +310,7 @@ adf-dynamic-component {
   }
 }
 
-.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header {
+.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header {
   .mat-mdc-tab:is(div) {
     flex-grow: unset;
     min-width: 160px;

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html

@@ -1,11 +1,11 @@
 <ng-container [ngSwitch]="actionRef.type">
-  <ng-container *ngSwitchCase="'default'">
+  <div *ngSwitchCase="'default'" class="aca-toolbar-action-container">
     <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color"> </app-toolbar-button>
-  </ng-container>
+  </div>
 
-  <ng-container *ngSwitchCase="'button'">
+  <div *ngSwitchCase="'button'" class="aca-toolbar-action-container">
     <app-toolbar-button [type]="data?.buttonType || type" [actionRef]="actionRef" [color]="color" [data]="actionRef.data"> </app-toolbar-button>
-  </ng-container>
+  </div>
 
   <div *ngSwitchCase="'separator'" [id]="actionRef.id" class="aca-toolbar-divider"></div>
 
@@ -13,7 +13,7 @@
     <app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
   </ng-container>
 
-  <ng-container *ngSwitchCase="'custom'">
+  <div *ngSwitchCase="'custom'" class="aca-toolbar-action-container">
     <adf-dynamic-component [data]="actionRef.data" [id]="actionRef.component"></adf-dynamic-component>
-  </ng-container>
+  </div>
 </ng-container>

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss

@@ -1,3 +1,7 @@
 .aca-toolbar-action {
   margin: 0 5px;
 }
+
+.aca-toolbar-action-container {
+  margin-top: 1px;
+}