Fixed UI issues after upgrade

src/app/core/theme/components.ts

@@ -2,25 +2,6 @@ import { primitives } from './primitives';
 
 export const components = {
   button: {
-    root: {
-      success: {
-        hoverBackground: primitives.colors.greenThree,
-        hoverBorderColor: primitives.colors.greenThree,
-      },
-      danger: {
-        hoverBackground: primitives.colors.redThree,
-        hoverBorderColor: primitives.colors.redThree,
-      },
-      secondary: {
-        background: primitives.colors.bgBlueThree,
-        hoverBackground: primitives.colors.bgBlueTwo,
-        activeBackground: primitives.colors.bgBlueThree,
-        borderColor: primitives.colors.bgBlueThree,
-        hoverBorderColor: primitives.colors.bgBlueTwo,
-        color: primitives.colors.darkBlueTwo,
-        hoverColor: primitives.colors.prBlueThree,
-      },
-    },
     outlined: {
       primary: {
         hoverBackground: primitives.colors.bgBlueTwo,
@@ -34,6 +15,14 @@ export const components = {
     colorScheme: {
       light: {
         root: {
+          success: {
+            hoverBackground: primitives.colors.greenThree,
+            hoverBorderColor: primitives.colors.greenThree,
+          },
+          danger: {
+            hoverBackground: primitives.colors.redThree,
+            hoverBorderColor: primitives.colors.redThree,
+          },
           info: {
             background: primitives.colors.transparent,
             hoverBackground: primitives.colors.transparent,
@@ -45,6 +34,15 @@ export const components = {
             hoverColor: primitives.colors.darkBlueOne,
             activeColor: primitives.colors.darkBlueOne,
           },
+          secondary: {
+            background: primitives.colors.bgBlueThree,
+            hoverBackground: primitives.colors.bgBlueTwo,
+            activeBackground: primitives.colors.bgBlueThree,
+            borderColor: primitives.colors.bgBlueThree,
+            hoverBorderColor: primitives.colors.bgBlueTwo,
+            color: primitives.colors.darkBlueTwo,
+            hoverColor: primitives.colors.prBlueThree,
+          },
         },
       },
     },

src/app/features/admin-institutions/components/admin-table/admin-table.component.html

@@ -70,17 +70,17 @@
 
 <div class="relative">
   <p-table
+    class="institution-admin-table"
     [columns]="selectedColumnsComputed()"
     [value]="isLoading() ? skeletonData : tableData()"
     [scrollable]="true"
     [sortMode]="'single'"
-    (onSort)="onSort($event)"
     [lazy]="true"
     [sortField]="sortField()"
     [sortOrder]="sortOrder()"
     [customSort]="true"
     [resetPageOnSort]="false"
-    class="institution-admin-table"
+    (onSort)="onSort($event)"
   >
     <ng-template #header let-columns>
       <tr>

src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.ts

@@ -4,7 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 
-import { CommonModule } from '@angular/common';
+import { LowerCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, OnDestroy, OnInit, signal } from '@angular/core';
 
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
@@ -33,7 +33,7 @@ import { InstitutionsAdminSelectors } from '../../store';
 
 @Component({
   selector: 'osf-institutions-preprints',
-  imports: [CommonModule, AdminTableComponent, TranslatePipe, Button, FiltersSectionComponent],
+  imports: [Button, AdminTableComponent, FiltersSectionComponent, LowerCasePipe, TranslatePipe],
   templateUrl: './institutions-preprints.component.html',
   styleUrl: './institutions-preprints.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.ts

@@ -4,7 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 
-import { CommonModule } from '@angular/common';
+import { LowerCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, OnDestroy, OnInit, signal } from '@angular/core';
 
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
@@ -34,7 +34,7 @@ import { InstitutionsAdminSelectors } from '../../store';
 
 @Component({
   selector: 'osf-institutions-registrations',
-  imports: [CommonModule, AdminTableComponent, TranslatePipe, Button, FiltersSectionComponent],
+  imports: [Button, AdminTableComponent, FiltersSectionComponent, LowerCasePipe, TranslatePipe],
   templateUrl: './institutions-registrations.component.html',
   styleUrl: './institutions-registrations.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/auth/pages/forgot-password/forgot-password.component.html

@@ -23,13 +23,9 @@ <h2 class="text-center">{{ 'auth.forgotPassword.title' | translate }}</h2>
 
   <div class="my-4">
     @if (message()) {
-      <p-message
-        styleClass="w-full"
-        [severity]="message()?.severity"
-        closable="true"
-        [text]="message()!.content | translate"
-        (onClose)="onCloseMessage()"
-      />
+      <p-message styleClass="w-full" [severity]="message()?.severity" closable="true" (onClose)="onCloseMessage()">
+        {{ message()!.content | translate }}
+      </p-message>
     }
   </div>
 </div>

src/app/features/auth/pages/reset-password/reset-password.component.html

@@ -8,7 +8,6 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
         <p-password
           inputId="newPassword"
           formControlName="newPassword"
-          styleClass="w-full"
           [toggleMask]="true"
           [feedback]="false"
           autocomplete="new-password"
@@ -22,7 +21,6 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
         <p-password
           inputId="confirmNewPassword"
           formControlName="confirmNewPassword"
-          styleClass="w-full"
           [toggleMask]="true"
           [feedback]="false"
           autocomplete="new-password"

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

@@ -87,7 +87,6 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
             [toggleMask]="true"
             [feedback]="false"
             autocomplete="new-password"
-            styleClass="w-full"
           ></p-password>
           <osf-password-input-hint [control]="signUpForm.controls['password']" />
         </div>

src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html

@@ -92,7 +92,7 @@ <h3>{{ 'collections.addToCollection.resourceMetadata' | translate }}</h3>
           />
           @let license = selectedLicense();
           @if (license) {
-            <p-divider styleClass="mt-3 mb-3" />
+            <p-divider class="my-3" />
             @if (license.requiredFields.length) {
               <div class="flex flex-column gap-3 mb-3 w-full md:flex-row">
                 <div class="w-full md:w-6">

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

@@ -11,11 +11,11 @@
     <div class="flex flex-grow-0 w-full sm:w-30rem">
       @if (!isRegistration()) {
         <p-select
+          class="w-full"
           inputId="in_label"
           [options]="rootFoldersOptions()"
           [(ngModel)]="currentRootFolder"
           (onChange)="handleRootFolderChange($event.value)"
-          styleClass="w-full"
           variant="filled"
         >
           <ng-template #selectedItem let-selectedOption>

src/app/features/meetings/pages/meeting-details/meeting-details.component.html

@@ -18,11 +18,9 @@
     [paginator]="true"
     [totalRecords]="tableParams().totalRecords"
     paginatorDropdownAppendTo="body"
-    [resizableColumns]="true"
     [scrollable]="true"
     [sortMode]="'single'"
     [lazy]="true"
-    [lazyLoadOnInit]="true"
     (onPage)="onPageChange($event)"
     (onSort)="onSort($event)"
     [sortField]="sortColumn()"

src/app/features/my-projects/my-projects.component.html

@@ -27,87 +27,95 @@
           ></osf-select>
         }
 
-        <p-tabpanel [value]="tabOption.Projects" class="flex flex-column gap-4 flex-1">
-          <div class="flex flex-column gap-4 md:flex-row md:align-items-center">
-            <osf-search-input
-              class="flex-1"
-              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-              [control]="searchControl"
-            />
+        <p-tabpanel [value]="tabOption.Projects">
+          <section class="flex flex-column gap-4 flex-1">
+            <div class="flex flex-column gap-4 md:flex-row md:align-items-center">
+              <osf-search-input
+                class="flex-1"
+                [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+                [control]="searchControl"
+              />
 
-            <osf-select
-              class="flex-1"
-              [options]="projectFilterOption"
-              [(selectedValue)]="selectedProjectFilterOption"
-              [fullWidth]="true"
-              (changeValue)="onProjectFilterChange()"
-            ></osf-select>
-          </div>
+              <osf-select
+                class="flex-1"
+                [options]="projectFilterOption"
+                [(selectedValue)]="selectedProjectFilterOption"
+                [fullWidth]="true"
+                (changeValue)="onProjectFilterChange()"
+              ></osf-select>
+            </div>
 
-          <osf-my-projects-table
-            [items]="projects()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToProject($event)"
-          />
+            <osf-my-projects-table
+              [items]="projects()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToProject($event)"
+            />
+          </section>
         </p-tabpanel>
 
-        <p-tabpanel [value]="tabOption.Registrations" class="flex flex-column gap-4 flex-1">
-          <osf-search-input
-            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-            [control]="searchControl"
-          />
+        <p-tabpanel [value]="tabOption.Registrations">
+          <section class="flex flex-column gap-4 flex-1">
+            <osf-search-input
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
 
-          <osf-my-projects-table
-            [items]="registrations()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToRegistry($event)"
-          />
+            <osf-my-projects-table
+              [items]="registrations()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToRegistry($event)"
+            />
+          </section>
         </p-tabpanel>
 
-        <p-tabpanel [value]="tabOption.Preprints" class="flex flex-column gap-4 flex-1">
-          <osf-search-input
-            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-            [control]="searchControl"
-          />
+        <p-tabpanel [value]="tabOption.Preprints">
+          <section class="flex flex-column gap-4 flex-1">
+            <osf-search-input
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
 
-          <osf-my-projects-table
-            [items]="preprints()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToProject($event)"
-          />
+            <osf-my-projects-table
+              [items]="preprints()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToProject($event)"
+            />
+          </section>
         </p-tabpanel>
 
-        <p-tabpanel [value]="tabOption.Bookmarks" class="flex flex-column gap-4 flex-1">
-          <osf-search-input
-            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-            [control]="searchControl"
-          />
+        <p-tabpanel [value]="tabOption.Bookmarks">
+          <section class="flex flex-column gap-4 flex-1">
+            <osf-search-input
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
 
-          <osf-my-projects-table
-            [items]="bookmarks()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToProject($event)"
-          />
+            <osf-my-projects-table
+              [items]="bookmarks()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToProject($event)"
+            />
+          </section>
         </p-tabpanel>
       </p-tabpanels>
     </p-tabs>

src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.html

@@ -1,6 +1,6 @@
 <h2>{{ 'preprints.preprintStepper.authorAssertions.title' | translate }}</h2>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.authorAssertions.conflictOfInterest.title' | translate }}</h2>
 
@@ -52,7 +52,7 @@ <h2>{{ 'preprints.preprintStepper.authorAssertions.conflictOfInterest.title' | t
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.authorAssertions.publicData.title' | translate }}</h2>
 
@@ -131,7 +131,7 @@ <h2>{{ 'preprints.preprintStepper.authorAssertions.publicData.title' | translate
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.authorAssertions.publicPreregistration.title' | translate }}</h2>
 

src/app/features/preprints/components/stepper/file-step/file-step.component.html

@@ -62,7 +62,7 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
 }
 
 @if (selectedFileSource() === PreprintFileSource.Project && !preprintFile() && !isPreprintFileLoading()) {
-  <p-card styleClass="mt-6" class="card">
+  <p-card class="card mt-6">
     <div>
       <p class="line-height-3">
         {{ 'preprints.preprintStepper.projectSelection.description' | translate }}
@@ -73,8 +73,7 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
 
       <p-select
         id="project-select"
-        class="w-12 md:w-6"
-        styleClass="mt-4"
+        class="w-12 md:w-6 mt-4"
         appendTo="body"
         optionLabel="name"
         optionValue="id"