Merge pull request #916 from nsemets/fix/ui-fixes

Fixed UI issues after upgrade

Author: nsemets

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()"