improve the colors of buttons in notes section (#2899)

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -18,7 +18,7 @@
           cdkAutosizeMinRows="2"
         ></textarea>
       </mat-form-field>
-      <button mat-raised-button class="flex-1" color="primary" [disabled]="!noteForm.valid">
+      <button type="button" mat-raised-button class="flex-1" color="primary" [disabled]="!noteForm.valid">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
       </button>
     </form>
@@ -40,10 +40,24 @@
                 </div>
               </div>
               <div class="note-actions">
-                <button class="edit-btn" (click)="editNote(entityNote.id, entityNote.note, i)" title="Edit note">
+                <button
+                  type="button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="editNote(entityNote.id, entityNote.note, i)"
+                  title="Edit note"
+                >
                   Edit
                 </button>
-                <button class="delete-btn" (click)="deleteNote(entityNote.id, i)" title="Delete note">Delete</button>
+                <button
+                  type="button"
+                  mat-raised-button
+                  color="warn"
+                  (click)="deleteNote(entityNote.id, i)"
+                  title="Delete note"
+                >
+                  Delete
+                </button>
               </div>
             </div>
           </div>

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.scss

@@ -96,46 +96,12 @@
 .note-actions {
   display: flex;
   gap: 8px;
-}
 
-.edit-btn,
-.delete-btn {
-  border: 1px solid #dee2e6;
-  padding: 8px 14px;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: none;
-  outline: none;
-}
-
-.edit-btn {
-  color: #6c757d;
-  background-color: #daedff;
-}
-
-.delete-btn {
-  color: #dc3545;
-  background-color: #ffcfcf;
-}
-
-.edit-btn:disabled,
-.delete-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.edit-btn:hover:not(:disabled) {
-  background-color: #a8d4ff;
-  color: #495057;
-  border-color: #adb5bd;
-}
-
-.delete-btn:hover:not(:disabled) {
-  background-color: #f5c6cb;
-  color: #721c24;
-  border-color: #ff9ca5;
+  button {
+    min-width: auto;
+    padding: 8px 14px;
+    font-size: 14px;
+  }
 }
 
 .empty-state {
@@ -184,17 +150,16 @@
     gap: 12px;
   }
 
-  .edit-btn,
-  .delete-btn {
-    padding: 5px 10px;
-    font-size: 11px;
+  .note-actions {
+    align-self: flex-end;
+
+    button {
+      padding: 5px 10px;
+      font-size: 11px;
+    }
   }
 
   .note-meta {
     width: 100%;
   }
-
-  .note-actions {
-    align-self: flex-end;
-  }
 }