Fix/overrides

src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html

@@ -1,21 +1,23 @@
 <div class="mb-4 mt-4 flex gap-3 flex-wrap">
   @if (activeFilters().programArea.length) {
     @for (filter of activeFilters().programArea; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveProgramAreaFilter(filter)">
-        <ng-template pTemplate="removeicon">
-          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
-        </ng-template>
-      </p-chip>
+      <p-chip
+        [label]="filter"
+        removeIcon="fas fa-close"
+        removable
+        (onRemove)="onRemoveProgramAreaFilter(filter)"
+      ></p-chip>
     }
   }
 
   @if (activeFilters().collectedType.length) {
     @for (filter of activeFilters().collectedType; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveCollectedTypeFilter(filter)">
-        <ng-template pTemplate="removeicon">
-          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
-        </ng-template>
-      </p-chip>
+      <p-chip
+        [label]="filter"
+        removeIcon="fas fa-close"
+        removable
+        (onRemove)="onRemoveProgramAreaFilter(filter)"
+      ></p-chip>
     }
   }
 </div>

src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts

@@ -1,6 +1,5 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { PrimeTemplate } from 'primeng/api';
 import { Chip } from 'primeng/chip';
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
@@ -9,7 +8,7 @@ import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters }
 
 @Component({
   selector: 'osf-collections-filter-chips',
-  imports: [Chip, PrimeTemplate],
+  imports: [Chip],
   templateUrl: './collections-filter-chips.component.html',
   styleUrl: './collections-filter-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html

@@ -1,119 +1,60 @@
 @if (filters().dateCreated.value) {
   @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label;
-  <p-chip [label]="dateCreated" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.DateCreated)"
-        (keydown.enter)="clearFilter(FilterType.DateCreated)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="dateCreated"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.DateCreated)"
+  ></p-chip>
 }
 
 @if (filters().funder.value) {
   @let funder = filters().funder.filterName + ': ' + filters().funder.label;
-  <p-chip [label]="funder" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Funder)"
-        (keydown.enter)="clearFilter(FilterType.Funder)"
-      ></i>
-    </ng-template>
-  </p-chip>
+
+  <p-chip [label]="funder" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Funder)"></p-chip>
 }
 
 @if (filters().subject.value) {
   @let subject = filters().subject.filterName + ': ' + filters().subject.label;
-  <p-chip [label]="subject" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Subject)"
-        (keydown.enter)="clearFilter(FilterType.Subject)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="subject" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Subject)"></p-chip>
 }
 
 @if (filters().license.value) {
   @let license = filters().license.filterName + ': ' + filters().license.label;
-  <p-chip [label]="license" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.License)"
-        (keydown.enter)="clearFilter(FilterType.License)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="license" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.License)"></p-chip>
 }
 
 @if (filters().resourceType.value) {
   @let resourceType = filters().resourceType.filterName + ': ' + filters().resourceType.label;
-  <p-chip [label]="resourceType" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.ResourceType)"
-        (keydown.enter)="clearFilter(FilterType.ResourceType)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="resourceType"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.ResourceType)"
+  ></p-chip>
 }
 
 @if (filters().institution.value) {
   @let institution = filters().institution.filterName + ': ' + filters().institution.label;
-  <p-chip [label]="institution" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Institution)"
-        (keydown.enter)="clearFilter(FilterType.Institution)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="institution"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.Institution)"
+  ></p-chip>
 }
 
 @if (filters().provider.value) {
   @let provider = filters().provider.filterName + ': ' + filters().provider.label;
-  <p-chip [label]="provider" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Provider)"
-        (keydown.enter)="clearFilter(FilterType.Provider)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="provider" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Provider)"></p-chip>
 }
 
 @if (filters().partOfCollection.value) {
   @let partOfCollection = filters().partOfCollection.filterName + ': ' + filters().partOfCollection.label;
-  <p-chip [label]="partOfCollection" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.PartOfCollection)"
-        (keydown.enter)="clearFilter(FilterType.PartOfCollection)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="partOfCollection"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.PartOfCollection)"
+  ></p-chip>
 }

src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts

@@ -1,6 +1,5 @@
 import { Store } from '@ngxs/store';
 
-import { PrimeTemplate } from 'primeng/api';
 import { Chip } from 'primeng/chip';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
@@ -23,7 +22,7 @@ import {
 
 @Component({
   selector: 'osf-my-profile-filter-chips',
-  imports: [Chip, PrimeTemplate],
+  imports: [Chip],
   templateUrl: './my-profile-filter-chips.component.html',
   styleUrl: './my-profile-filter-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html

@@ -88,58 +88,28 @@ <h3>Sort by:</h3>
               <osf-resource-card [item]="item" />
             }
 
-            <div class="flex column-gap-4 w-full justify-content-center pt-5">
+            <div class="flex column-gap-2 w-full justify-content-center pt-2">
               @if (first() && prev()) {
-                <svg
-                  width="13"
-                  height="13"
-                  tabindex="0"
-                  role="button"
-                  viewBox="0 0 10 10"
-                  class="switch-icon"
-                  (click)="switchPage(first())"
-                  (keydown.enter)="switchPage(first())"
-                >
-                  <path
-                    d="M7.6875 0.193231C7.925 -0.0124607 8.2575 -0.0593271 8.54 0.0786686C8.8225 0.216664 9 0.510881 9 0.833739L9 9.16555C9 9.48841 8.82 9.78262 8.54 9.92062C8.26 10.0586 7.9275 10.0144 7.6875 9.80606L2.8875 5.64015L2.6 5.3902L2.6 9.16555C2.6 9.6264 2.2425 9.99873 1.8 9.99873C1.3575 9.99873 1 9.6264 1 9.16555L1 0.833739C1 0.372886 1.3575 0.000557899 1.8 0.000557899C2.2425 0.000557899 2.6 0.372886 2.6 0.833739L2.6 4.60909L2.8875 4.35914L7.6875 0.193231Z"
-                    fill="#8B97A4"
-                  />
-                </svg>
+                <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(first())"> </p-button>
               }
 
-              <svg
-                [class]="{ 'icon-disabled': !prev(), 'icon-active': prev() }"
-                tabindex="0"
-                role="button"
-                width="13"
-                height="13"
-                viewBox="0 0 10 10"
-                class="switch-icon"
+              <p-button
+                icon="fas fa-angle-left"
+                severity="contrast"
+                text
+                [disabled]="!prev()"
                 (click)="switchPage(prev())"
-                (keydown.enter)="switchPage(prev())"
               >
-                <path
-                  d="M2.29285 4.2937C1.90238 4.68416 1.90238 5.31827 2.29285 5.70873L6.29129 9.70707C6.57868 9.99445 7.00664 10.0788 7.38149 9.9226C7.75635 9.76642 8 9.40407 8 8.99799L8 1.00132C8 0.598365 7.75635 0.232892 7.38149 0.0767078C7.00664 -0.0794773 6.57868 0.00798607 6.29129 0.292242L2.29285 4.29058V4.2937Z"
-                  fill="#8B97A4"
-                />
-              </svg>
+              </p-button>
 
-              <svg
-                [class]="{ 'icon-disabled': !next(), 'icon-active': next() }"
-                tabindex="0"
-                role="button"
-                width="13"
-                height="13"
-                viewBox="0 0 10 10"
-                class="switch-icon"
+              <p-button
+                icon="fas fa-angle-right"
+                severity="contrast"
+                text
+                [disabled]="!next()"
                 (click)="switchPage(!next() ? first() : next())"
-                (keydown.enter)="switchPage(!next() ? first() : next())"
               >
-                <path
-                  d="M7.70715 5.7063C8.09762 5.31584 8.09762 4.68173 7.70715 4.29127L3.70871 0.292933C3.42132 0.00555328 2.99336 -0.0787866 2.61851 0.0773983C2.24365 0.233583 2 0.595932 2 1.00201V8.99868C2 9.40164 2.24365 9.76711 2.61851 9.92329C2.99336 10.0795 3.42132 9.99201 3.70871 9.70776L7.70715 5.70942V5.7063Z"
-                  fill="#8B97A4"
-                />
-              </svg>
+              </p-button>
             </div>
           }
         </div>

src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts

@@ -1,5 +1,6 @@
 import { Store } from '@ngxs/store';
 
+import { Button } from 'primeng/button';
 import { DataView } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 
@@ -28,6 +29,7 @@ import { MyProfileResourceFiltersSelectors } from '../my-profile-resource-filter
     Select,
     FormsModule,
     ResourceCardComponent,
+    Button,
   ],
   templateUrl: './my-profile-resources.component.html',
   styleUrl: './my-profile-resources.component.scss',

src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html

@@ -1,74 +1,24 @@
 @if (filters().creator.value) {
   @let creator = filters().creator.filterName + ': ' + filters().creator.label;
-  <p-chip [label]="creator" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Creator)"
-        (keydown.enter)="clearFilter(FilterType.Creator)"
-      ></i>
-    </ng-template>
-  </p-chip>
-}
-
-@if (filters().dateCreated.value) {
-  @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label;
-  <p-chip [label]="dateCreated" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.DateCreated)"
-        (keydown.enter)="clearFilter(FilterType.DateCreated)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="creator" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Creator)"></p-chip>
 }
 
 @if (filters().subject.value) {
   @let subject = filters().subject.filterName + ': ' + filters().subject.label;
-  <p-chip [label]="subject" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Subject)"
-        (keydown.enter)="clearFilter(FilterType.Subject)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="subject" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Subject)"></p-chip>
 }
 
 @if (filters().license.value) {
   @let license = filters().license.filterName + ': ' + filters().license.label;
-  <p-chip [label]="license" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.License)"
-        (keydown.enter)="clearFilter(FilterType.License)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="license" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.License)"></p-chip>
 }
 
 @if (filters().institution.value) {
   @let institution = filters().institution.filterName + ': ' + filters().institution.label;
-  <p-chip [label]="institution" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Institution)"
-        (keydown.enter)="clearFilter(FilterType.Institution)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="institution"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.Institution)"
+  ></p-chip>
 }