update ux writing

src/app/shared/components/pageDataList/page-data-list-grid-view.component.html

@@ -47,13 +47,13 @@
             <hr />
             <div class="flex justify-center gap-2 mt-2">
               @if (showEdit) {
-                <p-button icon="pi pi-pencil" label="ویرایش" size="small" (click)="edit(item)"> </p-button>
+                <p-button icon="pi pi-pencil" label="ویرایش" size="small" outlined (click)="edit(item)"> </p-button>
               }
               @if (showDelete) {
-                <p-button icon="pi pi-trash" label="حذف" size="small" (click)="remove(item)"> </p-button>
+                <p-button icon="pi pi-trash" label="حذف" size="small" outlined (click)="remove(item)"> </p-button>
               }
               @if (showDetails) {
-                <p-button icon="pi pi-eye" label="مشاهده" size="small" (click)="details(item)"> </p-button>
+                <p-button icon="pi pi-eye" label="مشاهده" size="small" outlined (click)="details(item)"> </p-button>
               }
             </div>
           }

src/app/shared/components/pageDataList/page-data-list-table-view.component.html

@@ -13,7 +13,7 @@
     [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
   >
     @if (captionBox) {
-      <ng-template pTemplate="caption">
+      <ng-template #caption>
         <ng-container [ngTemplateOutlet]="captionBox"> </ng-container>
       </ng-template>
     }

src/app/shared/components/pageDataList/page-data-list.component.html

@@ -17,8 +17,8 @@
       (onDelete)="remove($event)"
       (onDetails)="details($event)"
     >
-      @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
-        <ng-template #captionBox>
+      <ng-template #captionBox>
+        @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
           <ng-container [ngTemplateOutlet]="caption">
             <div class="flex justify-between items-center gap-4">
               <h5 class="font-bold">{{ pageTitle }}</h5>
@@ -51,8 +51,8 @@
               }
             </div>
           </ng-container>
-        </ng-template>
-      }
+        }
+      </ng-template>
       <ng-template #emptyMessageCard>
         <uikit-empty-state
           [title]="emptyPlaceholderTitle"
@@ -90,8 +90,8 @@
       (onDelete)="remove($event)"
       (onDetails)="details($event)"
     >
-      @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
-        <ng-template #captionBox>
+      <ng-template #captionBox>
+        @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
           <ng-container [ngTemplateOutlet]="caption">
             <div class="flex justify-between items-center gap-4">
               <h5 class="font-bold">{{ pageTitle }}</h5>
@@ -117,15 +117,17 @@
                       label="{{ addNewCtaLabel }}"
                       icon="pi pi-plus"
                       size="small"
+                      class="max-sm:hidden"
                       (click)="openAddForm()"
                     ></p-button>
+                    <p-button icon="pi pi-plus" size="small" class="sm:hidden" (click)="openAddForm()"></p-button>
                   }
                 </div>
               }
             </div>
           </ng-container>
-        </ng-template>
-      }
+        }
+      </ng-template>
       <ng-template #emptyMessageCard>
         <uikit-empty-state
           [title]="emptyPlaceholderTitle"

src/app/shared/components/table-action-row.component.html

@@ -20,6 +20,6 @@
     />
   }
   @if (showDetails) {
-    <p-button size="small" icon="pi pi-chevron-left" (click)="details.emit()" title="جزئیات" />
+    <p-button size="small" icon="pi pi-chevron-left" (click)="details.emit()" [title]="showDetailsText" />
   }
 </td>

src/app/shared/components/table-action-row.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Button } from 'primeng/button';
 
 @Component({
@@ -12,6 +12,7 @@ export class TableActionRowComponent {
   @Input() showEdit = false;
   @Input() showDelete = false;
   @Input() showDetails = false;
+  @Input() showDetailsText: string = 'جزییات';
 
   @Output() edit = new EventEmitter<void>();
   @Output() delete = new EventEmitter<void>();