Fix/common styles

src/app/features/auth/pages/sign-up/sign-up.component.html

@@ -4,11 +4,17 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
 
     <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
       <div class="btn-group">
-        <p-button [label]="'auth.signUp.social.orcid' | translate" class="btn-icon-text btn-full-width">
+        <p-button class="btn-full-width" [label]="'auth.signUp.social.orcid' | translate" variant="text" raised>
           <img ngSrc="assets/images/orcid.svg" alt="Orchid icon" height="20" width="20" />
         </p-button>
-        <p-button [label]="'auth.signUp.social.institution' | translate" class="btn-icon-text btn-full-width">
-          <i class="osf-icon-institutions"></i>
+
+        <p-button
+          class="btn-full-width"
+          [label]="'auth.signUp.social.institution' | translate"
+          variant="text"
+          raised
+          icon="fas fa-landmark fa-lg"
+        >
         </p-button>
       </div>
 

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

@@ -19,7 +19,6 @@ import { CollectionsSearchResultsComponent } from '../collections-search-results
 
 @Component({
   selector: 'osf-collections-main-content',
-  standalone: true,
   imports: [
     NgOptimizedImage,
     Select,

src/app/features/moderation/components/collection-moderators-list/collection-moderators-list.component.html

@@ -78,7 +78,7 @@
           </div>
         </td>
         <td>
-          <p-button variant="text" [severity]="'danger'" icon="fas fa-trash" (click)="removeModerator(item)">
+          <p-button class="danger-icon-btn" icon="fas fa-trash" severity="danger" text (click)="removeModerator(item)">
           </p-button>
         </td>
       </tr>

src/app/features/project/contributors/components/contributors-list/contributors-list.component.html

@@ -19,7 +19,7 @@
       <th>
         <div class="flex align-items-center">
           <span>{{ 'project.contributors.table.headers.permissions' | translate }}</span>
-          <i class="osf-icon-information blue-icon ml-1" [pTooltip]="permissionsTooltip" tooltipPosition="top"></i>
+          <i class="fas fa-circle-info blue-icon ml-1" [pTooltip]="permissionsTooltip" tooltipPosition="top"></i>
           <ng-template #permissionsTooltip>
             <div class="flex flex-column row-gap-3">
               <h2>{{ 'project.contributors.permissionInfo.title' | translate }}</h2>
@@ -57,7 +57,7 @@ <h2>{{ 'project.contributors.permissionInfo.title' | translate }}</h2>
       <th>
         <div class="flex align-items-center justify-content-center">
           <span>{{ 'project.contributors.table.headers.contributor' | translate }}</span>
-          <i class="osf-icon-information blue-icon ml-1" [pTooltip]="contributorTooltip" tooltipPosition="top"></i>
+          <i class="fas fa-circle-info blue-icon ml-1" [pTooltip]="contributorTooltip" tooltipPosition="top"></i>
           <ng-template #contributorTooltip>
             <div class="flex flex-column row-gap-3">
               <h2>{{ 'project.contributors.bibliographicContributorInfo.heading' | translate }}</h2>
@@ -73,7 +73,7 @@ <h2>{{ 'project.contributors.bibliographicContributorInfo.heading' | translate }
       <th>
         <div class="flex align-items-center justify-content-center">
           <span>{{ 'project.contributors.table.headers.curator' | translate }}</span>
-          <i class="osf-icon-information blue-icon ml-1" [pTooltip]="curatorTooltip" tooltipPosition="top"></i>
+          <i class="fas fa-circle-info blue-icon ml-1" [pTooltip]="curatorTooltip" tooltipPosition="top"></i>
           <ng-template #curatorTooltip>
             <div class="flex flex-column row-gap-3">
               <h2>{{ 'project.contributors.curatorInfo.heading' | translate }}</h2>
@@ -148,7 +148,13 @@ <h2>{{ 'project.contributors.curatorInfo.heading' | translate }}</h2>
           </div>
         </td>
         <td>
-          <p-button variant="text" [severity]="'danger'" icon="fas fa-trash" (click)="removeContributor(contributor)">
+          <p-button
+            class="danger-icon-btn"
+            icon="fas fa-trash"
+            severity="danger"
+            text
+            (click)="removeContributor(contributor)"
+          >
           </p-button>
         </td>
       </tr>

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html

@@ -55,7 +55,7 @@
       class="w-full"
       styleClass="w-full"
       (click)="dialogRef.close()"
-      [text]="true"
+      text
       severity="info"
       [label]="'project.contributors.addDialog.cancel' | translate"
     ></p-button>

src/app/features/project/contributors/contributors.component.html

@@ -75,7 +75,7 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.project.contributors' | tra
         class="w-3"
         styleClass="w-full"
         (click)="cancel()"
-        [text]="true"
+        text
         severity="info"
         [label]="'common.buttons.cancel' | translate"
       >

src/app/features/project/files/components/file-detail/components/file-metadata/file-metadata.component.ts

@@ -18,7 +18,6 @@ import { LANGUAGES, RESOURCE_TYPES } from '../../constants/files-details.constan
 
 @Component({
   selector: 'osf-file-metadata',
-  standalone: true,
   imports: [Button, Dialog, InputText, Select, FormsModule, ReactiveFormsModule, Skeleton, TranslateModule],
   templateUrl: './file-metadata.component.html',
   styleUrl: './file-metadata.component.scss',

src/app/features/project/files/components/file-detail/components/project-metadata/project-metadata.component.ts

@@ -9,7 +9,6 @@ import { ProjectFilesSelectors } from '@osf/features/project/files/store';
 
 @Component({
   selector: 'osf-project-metadata',
-  standalone: true,
   imports: [DatePipe, TranslateModule],
   templateUrl: './project-metadata.component.html',
   styleUrl: './project-metadata.component.scss',

src/app/features/project/files/components/move-file-dialog/move-file-dialog.component.html

@@ -57,12 +57,7 @@ <h3 class="font-normal text-no-transform">{{ 'project.files.emptyState' | transl
 }
 
 <div class="flex gap-2 ml-auto">
-  <p-button
-    (click)="dialogRef.close()"
-    [text]="true"
-    severity="info"
-    [label]="'common.buttons.cancel' | translate"
-  ></p-button>
+  <p-button (click)="dialogRef.close()" text severity="info" [label]="'common.buttons.cancel' | translate"></p-button>
 
   @if (this.config.data.action === 'move') {
     <p-button

src/app/features/project/files/project-files.component.html

@@ -300,9 +300,10 @@
 
             <p-button
               size="small"
-              severity="secondary"
-              class="btn-icon-text"
-              icon="pi pi-ellipsis-v"
+              severity="contrast"
+              variant="text"
+              raised
+              icon="fas fa-ellipsis-v"
               (click)="menu.toggle($event)"
             ></p-button>
           </div>

src/app/features/project/overview/components/linked-projects/linked-projects.component.html

@@ -16,8 +16,13 @@ <h2 class="flex gap-2">
                 <a class="linked-project-title" [href]="'my-projects/' + linkedProject.id">{{ linkedProject.title }}</a>
               </h2>
               <div>
-                <p-button class="btn-icon" (click)="componentActionMenu.toggle($event)">
-                  <i class="osf-icon-dots"></i>
+                <p-button
+                  severity="contrast"
+                  variant="text"
+                  raised
+                  icon="fas fa-ellipsis-v"
+                  (click)="componentActionMenu.toggle($event)"
+                >
                 </p-button>
 
                 <p-menu appendTo="body" #componentActionMenu popup>

src/app/features/project/settings/mappers/view-only-links.mapper.ts

@@ -10,8 +10,8 @@ export class ViewOnlyLinksMapper {
       name: item.attributes.name,
       anonymous: item.attributes.anonymous,
       creator: {
-        fullName: item.relationships.creator.data?.id ?? '',
-        url: item.relationships.creator.links.related.href,
+        id: item.embeds.creator.data.id,
+        fullName: item.embeds.creator.data.attributes.full_name ?? '',
       },
       nodes: [],
     }));
@@ -36,8 +36,8 @@ export class ViewOnlyLinksMapper {
       name: item.attributes.name,
       anonymous: item.attributes.anonymous,
       creator: {
-        fullName: item.relationships.creator.data?.id ?? '',
-        url: item.relationships.creator.links.related.href,
+        id: item.embeds.creator.data.id,
+        fullName: item.embeds.creator.data.attributes.full_name ?? '',
       },
       nodes: [],
     };

src/app/features/project/settings/models/view-only-link-response.model.ts

@@ -1,3 +1,5 @@
+import { UserGetResponse } from '@osf/core/models';
+
 export interface ViewOnlyLinksResponseModel {
   data: ViewOnlyLink[];
   links: PaginationLinks;
@@ -15,6 +17,11 @@ export interface ViewOnlyLink {
     anonymous: boolean;
     name: string;
   };
+  embeds: {
+    creator: {
+      data: UserGetResponse;
+    };
+  };
   relationships: {
     creator: {
       links: {

src/app/features/project/settings/models/view-only-link.model.ts

@@ -1,6 +1,6 @@
 export interface ViewOnlyLinkCreatorModel {
+  id: string;
   fullName: string;
-  url: string;
 }
 
 export interface ViewOnlyLinkNodeModel {

src/app/features/project/settings/pipes/notification-description.pipe.ts

@@ -6,7 +6,6 @@ import { SubscriptionEvent, SubscriptionFrequency } from '@shared/enums';
 
 @Pipe({
   name: 'notificationDescription',
-  standalone: true,
 })
 export class NotificationDescriptionPipe implements PipeTransform {
   constructor(private translate: TranslateService) {}

src/app/features/project/settings/services/view-only-links.service.ts

@@ -16,16 +16,19 @@ export class ViewOnlyLinksService {
   private readonly jsonApiService = inject(JsonApiService);
 
   getViewOnlyLinksData(projectId: string): Observable<PaginatedViewOnlyLinksModel> {
+    const params: Record<string, unknown> = { embed: 'creator' };
+
     return this.jsonApiService
-      .get<ViewOnlyLinksResponseModel>(`${environment.apiUrl}/nodes/${projectId}/view_only_links`)
+      .get<ViewOnlyLinksResponseModel>(`${environment.apiUrl}/nodes/${projectId}/view_only_links`, params)
       .pipe(map((response) => ViewOnlyLinksMapper.fromResponse(response, projectId)));
   }
 
   createViewOnlyLink(projectId: string, payload: ViewOnlyLink): Observable<PaginatedViewOnlyLinksModel> {
+    const data = { data: { ...payload } };
+    const params: Record<string, unknown> = { embed: 'creator' };
+
     return this.jsonApiService
-      .post<ViewOnlyLink>(`${environment.apiUrl}/nodes/${projectId}/view_only_links/`, {
-        data: { ...payload },
-      })
+      .post<ViewOnlyLink>(`${environment.apiUrl}/nodes/${projectId}/view_only_links/`, data, params)
       .pipe(map((response) => ViewOnlyLinksMapper.fromSingleResponse(response, projectId)));
   }
 

src/app/features/project/settings/settings.component.html

@@ -78,8 +78,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate
                   <p>{{ affiliation }}</p>
                 </div>
 
-                <p-button ariaLabel="Delete affiliation" icon="osf-icon-trash" class="btn-icon-text icon-copy-btn">
-                </p-button>
+                <p-button class="danger-icon-btn" icon="fas fa-trash" severity="danger" text></p-button>
               </div>
             }
           </div>

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

@@ -212,6 +212,11 @@ export class SettingsState {
   @Action(CreateViewOnlyLink)
   createViewOnlyLink(ctx: StateContext<SettingsStateModel>, action: CreateViewOnlyLink) {
     const state = ctx.getState();
+
+    ctx.patchState({
+      viewOnlyLinks: { ...state.viewOnlyLinks, isLoading: true, error: null },
+    });
+
     return this.viewOnlyLinksService.createViewOnlyLink(action.projectId, action.payload).pipe(
       tap((data: PaginatedViewOnlyLinksModel) => {
         ctx.patchState({
@@ -231,6 +236,12 @@ export class SettingsState {
 
   @Action(DeleteViewOnlyLink)
   deleteViewOnlyLink(ctx: StateContext<SettingsStateModel>, action: DeleteViewOnlyLink) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      viewOnlyLinks: { ...state.viewOnlyLinks, isLoading: true, error: null },
+    });
+
     return this.viewOnlyLinksService.deleteLink(action.projectId, action.linkId).pipe(
       tap(() => {
         ctx.setState(

src/app/features/project/wiki/components/wiki-list/wiki-list.component.html

@@ -19,7 +19,14 @@
             outlined
             (click)="openAddWikiDialog()"
           />
-          <p-button icon="fas fa-backward" severity="contrast" raised outlined (click)="collapseNavigation()">
+          <p-button
+            class="btn-icon-only"
+            icon="fas fa-backward"
+            severity="contrast"
+            raised
+            outlined
+            (click)="collapseNavigation()"
+          >
           </p-button>
         </div>
         @if (!isHomeWikiSelected() || !list().length) {
@@ -67,7 +74,14 @@ <h4 class="ml-2">{{ item.label }}</h4>
           <i class="fas fa-forward"></i>
         </p-button>
       </div>
-      <p-button icon="fas fa-plus" raised outlined severity="success" (click)="openAddWikiDialog()" />
+      <p-button
+        class="btn-icon-only"
+        icon="fas fa-plus"
+        raised
+        outlined
+        severity="success"
+        (click)="openAddWikiDialog()"
+      />
     }
   }
 </div>

src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.html

@@ -13,7 +13,7 @@ <h3 class="account-setting-description">
       class="w-full"
       styleClass="w-full"
       (click)="dialogRef.close()"
-      [text]="true"
+      text
       severity="info"
       [label]="'settings.accountSettings.deactivateAccount.cancelDeactivation.buttons.cancel' | translate"
     ></p-button>

src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.html

@@ -14,7 +14,7 @@ <h3 class="account-setting-description">
       styleClass="w-full"
       (click)="dialogRef.close()"
       [label]="'settings.accountSettings.common.buttons.cancel' | translate"
-      [text]="true"
+      text
       severity="info"
     ></p-button>
 

src/app/features/settings/account-settings/components/two-factor-auth/components/configure-two-factor/configure-two-factor.component.html

@@ -13,7 +13,7 @@ <h3 class="account-setting-description">
       class="w-full"
       styleClass="w-full"
       (click)="dialogRef.close()"
-      [text]="true"
+      text
       severity="info"
       [label]="'settings.accountSettings.common.buttons.cancel' | translate"
     ></p-button>

src/app/features/settings/account-settings/components/two-factor-auth/components/verify-two-factor/verify-two-factor.component.html

@@ -7,7 +7,7 @@ <h3 class="account-setting-description">
       class="w-full"
       styleClass="w-full"
       (click)="dialogRef.close()"
-      [text]="true"
+      text
       severity="info"
       [label]="'settings.accountSettings.common.buttons.cancel' | translate"
     ></p-button>