All pages change same as Settings pages. That are use AbpPage now.

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -1,15 +1,5 @@
+<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
   <div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
-
     <div class="card-body">
       <abp-extensible-table
         [data]="data.items"
@@ -58,3 +48,4 @@
     (abpInit)="init(abpPermissionManagement)"
   >
   </abp-permission-management>
+</abp-page>

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -1,14 +1,6 @@
+<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
+
   <div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
     <div class="card-body">
       <div id="data-tables-table-filter" class="data-tables-filter mb-3">
         <div class="input-group">
@@ -36,8 +28,10 @@
 
     <ng-template #abpBody>
       <ng-template #loaderRef
-      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
-    ></ng-template>
+      >
+        <div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+        >
+      </ng-template>
 
       <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
         <ul ngbNav #nav="ngbNav" class="nav-tabs">
@@ -99,3 +93,4 @@
     (abpInit)="init(abpPermissionManagement)"
   >
   </abp-permission-management>
+</abp-page>

npm/ng-packs/packages/identity/src/lib/identity.module.ts

@@ -17,6 +17,7 @@ import {
   IDENTITY_ENTITY_PROP_CONTRIBUTORS,
   IDENTITY_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
+import { PageModule } from '@abp/ng.components/page';
 
 @NgModule({
   declarations: [RolesComponent, UsersComponent],
@@ -30,6 +31,7 @@ import {
     NgbDropdownModule,
     PermissionManagementModule,
     NgxValidateCoreModule,
+    PageModule,
   ],
 })
 export class IdentityModule {

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -1,15 +1,7 @@
-<div id="wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
+<abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data.items">
+
 
+  <div id="wrapper" class="card">
     <div class="card-body">
       <div id="data-tables-table-filter" class="data-tables-filter mb-3">
         <div class="input-group">
@@ -71,3 +63,4 @@
     [providerKey]="providerKey"
   >
   </abp-feature-management>
+</abp-page>

npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts

@@ -16,6 +16,7 @@ import {
   TENANT_MANAGEMENT_ENTITY_PROP_CONTRIBUTORS,
   TENANT_MANAGEMENT_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
+import { PageModule } from '@abp/ng.components/page';
 
 @NgModule({
   declarations: [TenantsComponent],
@@ -28,6 +29,7 @@ import {
     NgbDropdownModule,
     FeatureManagementModule,
     UiExtensionsModule,
+    PageModule,
   ],
 })
 export class TenantManagementModule {

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html

@@ -1,6 +1,6 @@
 <div class="row justify-content-end mx-0 gap-2" id="AbpContentToolbar">
   <div
-    class="col-auto px-0 pt-0 pt-md-2"
+    class="col-auto px-0 pt-0 "
     [class.pe-0]="last"
     *ngFor="let action of actionList; trackBy: trackByFn; let last = last"
   >