Merge pull request #156 from CenterForOpenScience/fix/searh-buttons

fix(search-buttons): updated search buttons

Author: nsemets

src/app/features/collections/components/collections-main-content/collections-main-content.component.html

@@ -31,29 +31,9 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
         </ng-template>
       </p-select>
     } @else {
-      <img
-        ngSrc="assets/icons/colored/filter.svg"
-        class="custom-dark-hover cursor-pointer"
-        tabindex="0"
-        role="button"
-        alt="filter by"
-        width="44"
-        height="44"
-        (keydown.enter)="openFilters()"
-        (click)="openFilters()"
-      />
+      <p-button severity="secondary" icon="fas fa-sliders" size="large" (click)="openFilters()"></p-button>
 
-      <img
-        ngSrc="assets/icons/colored/sort.svg"
-        tabindex="0"
-        role="button"
-        alt="sort by"
-        width="44"
-        height="44"
-        class="custom-dark-hover cursor-pointer ml-2"
-        (keydown.enter)="openSorting()"
-        (click)="openSorting()"
-      />
+      <p-button severity="secondary" icon="fas fa-filter" size="large" (click)="openSorting()"></p-button>
     }
   </div>
 </div>

src/app/features/collections/components/collections-main-content/collections-main-content.component.ts

@@ -2,10 +2,10 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
+import { Button } from 'primeng/button';
 import { Select } from 'primeng/select';
 import { Skeleton } from 'primeng/skeleton';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
@@ -21,7 +21,7 @@ import { CollectionsSearchResultsComponent } from '../collections-search-results
 @Component({
   selector: 'osf-collections-main-content',
   imports: [
-    NgOptimizedImage,
+    Button,
     Select,
     FormsModule,
     TranslatePipe,

src/app/features/institutions/institutions.component.html

@@ -7,7 +7,7 @@
   />
 
   @if (institutionsLoading()) {
-    <div class="flex-1 mt-4 md:mt-8 lg:pt-5 bg-white">
+    <div class="flex-1 mt-4 bg-white md:mt-8 lg:pt-5">
       <osf-loading-spinner />
     </div>
   } @else {

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

@@ -31,28 +31,10 @@ <h3>Sort by:</h3>
       ></p-select>
     } @else {
       @if (isAnyFilterOptions()) {
-        <img
-          ngSrc="assets/icons/colored/filter.svg"
-          tabindex="0"
-          role="button"
-          alt="filter by"
-          width="44"
-          height="44"
-          (keydown.enter)="openFilters()"
-          (click)="openFilters()"
-        />
+        <p-button severity="secondary" icon="fas fa-sliders" size="large" (click)="openFilters()"></p-button>
       }
-      <img
-        ngSrc="assets/icons/colored/sort.svg"
-        tabindex="0"
-        role="button"
-        alt="sort by"
-        width="44"
-        height="44"
-        class="ml-2"
-        (keydown.enter)="openSorting()"
-        (click)="openSorting()"
-      />
+
+      <p-button class="ml-2" severity="secondary" icon="fas fa-filter" size="large" (click)="openSorting()"></p-button>
     }
   </div>
 </div>

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

@@ -4,7 +4,6 @@ import { Button } from 'primeng/button';
 import { DataView } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, signal, untracked } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
@@ -24,7 +23,6 @@ import { MyProfileResourceFiltersSelectors } from '../my-profile-resource-filter
   imports: [
     DataView,
     MyProfileFilterChipsComponent,
-    NgOptimizedImage,
     MyProfileResourceFiltersComponent,
     Select,
     FormsModule,

src/app/features/preprints/components/filters/preprints-resources/preprints-resources.component.html

@@ -22,28 +22,21 @@ <h4>Sort by:</h4>
         />
       } @else {
         @if (isAnyFilterOptions()) {
-          <img
-            ngSrc="assets/icons/colored/filter.svg"
-            tabindex="0"
-            role="button"
-            alt="filter by"
-            width="44"
-            height="44"
-            (keydown.enter)="switchMobileFiltersSectionVisibility()"
+          <p-button
+            severity="secondary"
+            icon="fas fa-sliders"
+            size="large"
             (click)="switchMobileFiltersSectionVisibility()"
-          />
+          ></p-button>
         }
-        <img
-          ngSrc="assets/icons/colored/sort.svg"
-          tabindex="0"
-          role="button"
-          alt="sort by"
-          width="44"
-          height="44"
+
+        <p-button
           class="ml-2"
-          (keydown.enter)="switchMobileSortingSectionVisibility()"
+          severity="secondary"
+          icon="fas fa-filter"
+          size="large"
           (click)="switchMobileSortingSectionVisibility()"
-        />
+        ></p-button>
       }
     </div>
   </section>

src/app/features/preprints/components/filters/preprints-resources/preprints-resources.component.ts

@@ -4,30 +4,26 @@ import { Button } from 'primeng/button';
 import { DataView } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, HostBinding, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 
 import { Primitive } from '@core/helpers';
+import { SetSortBy } from '@osf/features/collections/store';
+import { GetResourcesByLink } from '@osf/features/my-profile/store';
 import { PreprintsFilterChipsComponent, PreprintsResourcesFiltersComponent } from '@osf/features/preprints/components';
-import {
-  GetResourcesByLink,
-  PreprintsDiscoverSelectors,
-  SetSortBy,
-} from '@osf/features/preprints/store/preprints-discover';
+import { PreprintsDiscoverSelectors } from '@osf/features/preprints/store/preprints-discover';
 import { PreprintsResourcesFiltersSelectors } from '@osf/features/preprints/store/preprints-resources-filters';
 import { PreprintsResourcesFiltersOptionsSelectors } from '@osf/features/preprints/store/preprints-resources-filters-options';
-import { ResourceCardComponent } from '@shared/components';
-import { searchSortingOptions } from '@shared/constants';
-import { IS_WEB, IS_XSMALL } from '@shared/utils';
+import { ResourceCardComponent } from '@osf/shared/components';
+import { searchSortingOptions } from '@osf/shared/constants';
+import { IS_WEB, IS_XSMALL } from '@osf/shared/utils';
 
 @Component({
   selector: 'osf-preprints-resources',
   imports: [
     Select,
     FormsModule,
-    NgOptimizedImage,
     PreprintsResourcesFiltersComponent,
     PreprintsFilterChipsComponent,
     DataView,

src/app/features/search/components/resources/resources.component.html

@@ -32,29 +32,10 @@ <h3>0 results</h3>
       ></p-select>
     } @else {
       @if (isAnyFilterOptions()) {
-        <img
-          class="custom-dark-hover cursor-pointer"
-          ngSrc="assets/icons/colored/filter.svg"
-          tabindex="0"
-          role="button"
-          alt="filter by"
-          width="44"
-          height="44"
-          (keydown.enter)="openFilters()"
-          (click)="openFilters()"
-        />
+        <p-button severity="secondary" icon="fas fa-sliders" size="large" (click)="openFilters()"></p-button>
       }
-      <img
-        class="custom-dark-hover cursor-pointer ml-2"
-        ngSrc="assets/icons/colored/sort.svg"
-        tabindex="0"
-        role="button"
-        alt="sort by"
-        width="44"
-        height="44"
-        (keydown.enter)="openSorting()"
-        (click)="openSorting()"
-      />
+
+      <p-button class="ml-2" severity="secondary" icon="fas fa-filter" size="large" (click)="openSorting()"></p-button>
     }
   </div>
 </div>

src/app/features/search/components/resources/resources.component.ts

@@ -6,7 +6,6 @@ import { DataViewModule } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 import { TableModule } from 'primeng/table';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, signal, untracked } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -32,7 +31,6 @@ import { ResourceFiltersSelectors } from '../resource-filters/store';
     DataViewModule,
     FilterChipsComponent,
     Select,
-    NgOptimizedImage,
     ResourceCardComponent,
     Button,
   ],

src/app/features/settings/tokens/store/tokens.state.ts

@@ -1,4 +1,4 @@
-import { Action, State, StateContext, Store } from '@ngxs/store';
+import { Action, State, StateContext } from '@ngxs/store';
 
 import { catchError, of, tap, throwError } from 'rxjs';
 
@@ -28,7 +28,6 @@ import { TokensStateModel } from './tokens.models';
 @Injectable()
 export class TokensState {
   tokensService = inject(TokensService);
-  store = inject(Store);
 
   @Action(GetScopes)
   getScopes(ctx: StateContext<TokensStateModel>) {