Fix/affiliated institutions

src/app/features/files/components/create-folder-dialog/create-folder-dialog.component.html

@@ -11,10 +11,9 @@
 
     <div class="flex justify-content-end gap-2">
       <p-button
-        type="button"
         severity="secondary"
         [label]="'common.buttons.cancel' | translate"
-        (click)="dialogRef.close()"
+        (onClick)="dialogRef.close()"
       ></p-button>
       <p-button type="submit" [label]="'common.buttons.create' | translate" [disabled]="!folderForm.valid"></p-button>
     </div>

src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html

@@ -39,13 +39,7 @@
   </div>
 
   <div class="flex btn-full-width gap-2 mt-4">
-    <p-button
-      [label]="'common.buttons.cancel' | translate"
-      severity="info"
-      class="w-full"
-      (click)="cancel()"
-      type="button"
-    />
+    <p-button [label]="'common.buttons.cancel' | translate" severity="info" class="w-full" (onClick)="cancel()" />
     <p-button
       [label]="'common.buttons.save' | translate"
       class="w-full"

src/app/features/files/components/file-keywords/file-keywords.component.html

@@ -6,7 +6,7 @@ <h2>{{ 'files.detail.keywords.title' | translate }}</h2>
 
     <p-button
       [label]="'common.buttons.add' | translate"
-      (click)="addTag()"
+      (onClick)="addTag()"
       [disabled]="isTagsLoading() || keywordControl.invalid"
     >
     </p-button>

src/app/features/files/components/file-metadata/file-metadata.component.html

@@ -3,13 +3,11 @@
     <h2>{{ 'files.detail.fileMetadata.title' | translate }}</h2>
 
     <div class="flex gap-2">
-      <p-button severity="secondary" (click)="downloadFileMetadata()">
-        <i class="fas fa-download p-1"></i>
-      </p-button>
+      <p-button severity="secondary" icon="fas fa-download" (click)="downloadFileMetadata()" />
 
       <p-button
         severity="secondary"
-        (click)="openEditFileMetadataDialog()"
+        (onClick)="openEditFileMetadataDialog()"
         [label]="'files.detail.fileMetadata.edit' | translate"
       ></p-button>
     </div>

src/app/features/files/components/file-revisions/file-revisions.component.html

@@ -46,7 +46,7 @@ <h2>{{ 'files.detail.revisions.title' | translate }}</h2>
                   icon="fas fa-download"
                   variant="text"
                   [label]="'files.detail.revisions.actions.download' | translate"
-                  (click)="downloadRevision(item.version)"
+                  (onClick)="downloadRevision(item.version)"
                 ></p-button>
 
                 <p class="ml-auto mr-1">{{ item.downloads }}</p>

src/app/features/files/pages/file-detail/file-detail.component.html

@@ -27,15 +27,11 @@
       }
 
       @if (file()?.links?.download) {
-        <p-button severity="secondary" (click)="downloadFile(file()?.links?.download!)">
-          <i class="fas fa-download p-1"></i>
-        </p-button>
+        <p-button severity="secondary" icon="fas fa-download" (click)="downloadFile(file()?.links?.download!)" />
       }
       @if (file()?.links?.render) {
         <div class="relative">
-          <p-button severity="secondary" (click)="embedMenu.toggle($event)">
-            <i class="fas fa-file-import p-1"></i>
-          </p-button>
+          <p-button severity="secondary" icon="fas fa-file-import" (click)="embedMenu.toggle($event)" />
 
           <p-menu appendTo="body" [model]="embedItems" popup #embedMenu>
             <ng-template #item let-item>
@@ -46,9 +42,7 @@
       }
       @if (file()?.links?.html) {
         <div class="relative">
-          <p-button severity="secondary" (click)="shareMenu.toggle($event)">
-            <i class="fas fa-share-nodes p-1"></i>
-          </p-button>
+          <p-button severity="secondary" icon="fas fa-share-nodes" (click)="shareMenu.toggle($event)" />
 
           <p-menu appendTo="body" [model]="shareItems" popup #shareMenu>
             <ng-template #item let-item>
@@ -58,9 +52,7 @@
         </div>
       }
       @if (file() && !isAnonymous()) {
-        <p-button severity="danger" (click)="confirmDelete(file()!)">
-          <i class="fas fa-trash p-1"></i>
-        </p-button>
+        <p-button severity="danger" icon="fas fa-trash" (click)="confirmDelete(file()!)" />
       }
     </div>
   </div>

src/app/features/files/pages/files/files.component.scss

@@ -1,4 +1,3 @@
-@use "styles/variables" as var;
 @use "styles/mixins" as mix;
 
 :host {
@@ -8,7 +7,7 @@
 }
 
 .blue-text {
-  color: var.$pr-blue-1;
+  color: var(--pr-blue-1);
 }
 
 .filename {

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.html

@@ -1,7 +1,7 @@
 @if (template()) {
   <div class="cedar-template-form bg-white">
     @if (readonly()) {
-      <div class="flex justify-content-between p-4">
+      <div class="flex justify-content-between gap-4 p-4">
         @if (existingRecord()?.attributes?.is_published) {
           <h3 class="text-lg">{{ 'project.metadata.addMetadata.publishedText' | translate }}</h3>
         } @else {

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts

@@ -20,21 +20,14 @@ import {
 import { CEDAR_CONFIG, CEDAR_VIEWER_CONFIG } from '@osf/features/metadata/constants';
 import { CedarMetadataHelper } from '@osf/features/metadata/helpers';
 import {
+  CedarEditorElement,
   CedarMetadataDataTemplateJsonApi,
   CedarMetadataRecordData,
   CedarRecordDataBinding,
 } from '@osf/features/metadata/models';
 
 import 'cedar-artifact-viewer';
 
-interface CedarEditorElement extends HTMLElement {
-  currentMetadata?: unknown;
-  instanceObject?: unknown;
-  dataQualityReport?: {
-    isValid: boolean;
-  };
-}
-
 @Component({
   selector: 'osf-cedar-template-form',
   imports: [CommonModule, Button, TranslatePipe],

src/app/features/metadata/models/cedar-editor-element.model.ts

@@ -0,0 +1,7 @@
+export interface CedarEditorElement extends HTMLElement {
+  currentMetadata?: unknown;
+  instanceObject?: unknown;
+  dataQualityReport?: {
+    isValid: boolean;
+  };
+}

src/app/features/metadata/models/index.ts

@@ -1,3 +1,4 @@
+export * from './cedar-editor-element.model';
 export * from './cedar-metadata-template.model';
 export * from './description-result.model';
 export * from './funding-dialog.model';

src/app/features/metadata/pages/add-metadata/add-metadata.component.html

@@ -13,16 +13,11 @@ <h2>{{ 'project.metadata.addMetadata.selectTemplate' | translate }}</h2>
           <div [innerHTML]="'project.metadata.addMetadata.cedarInfo' | translate"></div>
         </section>
 
-        <div class="flex gap-2 flex-wrap sm:gap-4">
+        <div class="flex gap-2 flex-wrap mt-4 sm:gap-4">
           @for (meta of cedarTemplates()?.data; track meta.id) {
             <div
-              class="flex flex-column gap-4 metadata border-1 grey-border-color border-round-xl p-4 align-items-center"
-              [class.cursor-pointer]="!hasExistingRecord(meta.id)"
-              [class.cursor-not-allowed]="hasExistingRecord(meta.id)"
-              (click)="onSelect(meta)"
-              (keydown.enter)="onSelect(meta)"
-              [tabindex]="hasExistingRecord(meta.id) ? -1 : 0"
-              role="button"
+              class="flex flex-column align-items-center gap-4 border-1 grey-border-color border-round-xl p-4"
+              [class.metadata-item]="isMedium()"
             >
               <div class="flex flex-row gap-4">
                 <h2>{{ meta.attributes.template.title }}</h2>
@@ -56,15 +51,15 @@ <h2>{{ meta.attributes.template.title }}</h2>
             class="w-10rem"
             [label]="'common.buttons.cancel' | translate"
             severity="info"
-            (click)="onCancel()"
+            (onClick)="onCancel()"
           ></p-button>
           @if (hasMultiplePages()) {
             <p-button
               styleClass="w-10rem"
               class="w-10rem"
               [label]="'common.buttons.next' | translate"
               [disabled]="!hasNextPage()"
-              (click)="onNext()"
+              (onClick)="onNext()"
             ></p-button>
           }
         </div>

src/app/features/metadata/pages/add-metadata/add-metadata.component.scss

@@ -1,7 +1,3 @@
-.metadata {
+.metadata-item {
   flex-basis: calc(50% - 1.5rem);
-
-  @media (max-width: 576px) {
-    flex-basis: 100%;
-  }
 }

src/app/features/metadata/pages/add-metadata/add-metadata.component.ts

@@ -15,10 +15,11 @@ import {
   OnInit,
   signal,
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ResourceType } from '@osf/shared/enums';
+import { IS_MEDIUM } from '@osf/shared/helpers';
 import { LoadingSpinnerComponent, SubHeaderComponent } from '@shared/components';
 import { ToastService } from '@shared/services';
 
@@ -47,6 +48,8 @@ export class AddMetadataComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly activatedRoute = inject(ActivatedRoute);
 
+  readonly isMedium = toSignal(inject(IS_MEDIUM));
+
   private resourceId = '';
   isEditMode = true;
   selectedTemplate: CedarMetadataDataTemplateJsonApi | null = null;

src/app/shared/components/metadata-tabs/metadata-tabs.component.html

@@ -16,24 +16,22 @@
           @if (tab.id === 'osf') {
             <ng-content></ng-content>
           } @else {
-            <div class="p-3">
-              @if (selectedCedarTemplate() && selectedCedarRecord()) {
-                <osf-cedar-template-form
-                  [template]="selectedCedarTemplate()!"
-                  [existingRecord]="selectedCedarRecord()!"
-                  [readonly]="cedarFormReadonly()"
-                  [showEditButton]="true"
-                  (emitData)="onCedarFormSubmit($event)"
-                  (changeTemplate)="onCedarFormChangeTemplate()"
-                  (editMode)="onCedarFormEdit()"
-                />
-              } @else {
-                <div class="text-center py-8">
-                  <p class="text-lg mb-4">{{ 'project.metadata.addMetadata.loadingCedar' | translate }}</p>
-                  <p class="text-sm text-gray-600">{{ tab.label }}</p>
-                </div>
-              }
-            </div>
+            @if (selectedCedarTemplate() && selectedCedarRecord()) {
+              <osf-cedar-template-form
+                [template]="selectedCedarTemplate()!"
+                [existingRecord]="selectedCedarRecord()!"
+                [readonly]="cedarFormReadonly()"
+                [showEditButton]="true"
+                (emitData)="onCedarFormSubmit($event)"
+                (changeTemplate)="onCedarFormChangeTemplate()"
+                (editMode)="onCedarFormEdit()"
+              />
+            } @else {
+              <div class="text-center py-8">
+                <p class="text-lg mb-4">{{ 'project.metadata.addMetadata.loadingCedar' | translate }}</p>
+                <p class="text-sm text-gray-600">{{ tab.label }}</p>
+              </div>
+            }
           }
         </p-tabpanel>
       }