Fix/overrides

src/app/app.routes.ts

@@ -23,20 +23,23 @@ export const routes: Routes = [
         path: 'sign-up',
         loadComponent: () =>
           import('./features/auth/pages/sign-up/sign-up.component').then((mod) => mod.SignUpComponent),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'forgot-password',
         loadComponent: () =>
           import('./features/auth/pages/forgot-password/forgot-password.component').then(
             (mod) => mod.ForgotPasswordComponent
           ),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'reset-password',
         loadComponent: () =>
           import('./features/auth/pages/reset-password/reset-password.component').then(
             (mod) => mod.ResetPasswordComponent
           ),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'home',

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

@@ -11,7 +11,6 @@ <h2 class="text-center">{{ 'auth.forgotPassword.title' | translate }}</h2>
       pInputText
       formControlName="email"
       [placeholder]="'auth.common.emailPlaceholder' | translate"
-      autocomplete="off"
     />
 
     <p-button

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

@@ -6,53 +6,53 @@
   flex: 1;
   background: url("/assets/images/dark-blue-gradient.png") center no-repeat;
   background-size: cover;
+}
 
-  .reset-password-container,
-  .message-container {
-    @include mix.flex-column;
-    color: var.$dark-blue-1;
-    max-width: 32rem;
-    flex: 1;
-    gap: 1.2rem;
-    padding: 2rem;
-    background: var.$white;
-    border-radius: 0.6rem;
-    box-shadow: 0 2px 4px var.$grey-outline;
-
-    h2,
-    .message-text {
-      text-align: center;
-    }
-
-    .message-text {
-      margin-bottom: 1.5rem;
-    }
+.reset-password-container,
+.message-container {
+  @include mix.flex-column;
+  color: var.$dark-blue-1;
+  max-width: 32rem;
+  flex: 1;
+  gap: 1.2rem;
+  padding: 2rem;
+  background: var.$white;
+  border-radius: 0.6rem;
+  box-shadow: 0 2px 4px var.$grey-outline;
+
+  h2,
+  .message-text {
+    text-align: center;
+  }
 
-    form {
-      @include mix.flex-column;
-      flex: 1;
+  .message-text {
+    margin-bottom: 1.5rem;
+  }
 
-      .field {
-        margin-bottom: 1rem;
+  form {
+    @include mix.flex-column;
+    flex: 1;
 
-        .text-danger {
-          color: var.$red-1;
-          font-weight: 600;
-        }
-      }
+    .field {
+      margin-bottom: 1rem;
 
-      small {
-        color: var.$pr-blue-1;
+      .text-danger {
+        color: var.$red-1;
         font-weight: 600;
       }
+    }
 
-      .btn-full-width {
-        margin-top: 1.5rem;
-      }
+    small {
+      color: var.$pr-blue-1;
+      font-weight: 600;
     }
-  }
 
-  .mobile {
-    max-width: 24.5rem;
+    .btn-full-width {
+      margin-top: 1.5rem;
+    }
   }
 }
+
+.mobile {
+  max-width: 24.5rem;
+}

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

@@ -18,8 +18,8 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
         </p-button>
       </div>
 
-      <p-divider align="center">
-        <span class="divider-text">
+      <p-divider class="my-5" align="center">
+        <span class="divider-text px-3">
           {{ 'auth.signUp.divider' | translate }}
         </span>
       </p-divider>
@@ -46,7 +46,6 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
             pInputText
             formControlName="email"
             [placeholder]="'auth.common.emailPlaceholder' | translate"
-            autocomplete="off"
           />
         </div>
 

src/app/features/collections/components/collections-filters/collections-filters.component.html

@@ -3,7 +3,7 @@
     <p-accordion-panel value="0">
       <p-accordion-header>{{ 'collections.filters.programArea.label' | translate }}</p-accordion-header>
       <p-accordion-content>
-        <div class="content-body filter dropdown-filter">
+        <div class="content-body">
           <p>{{ 'collections.filters.programArea.description' | translate }}</p>
           <p-multi-select
             id="program-area"
@@ -23,7 +23,7 @@
     <p-accordion-panel value="1">
       <p-accordion-header>{{ 'collections.filters.collectedType.label' | translate }}</p-accordion-header>
       <p-accordion-content>
-        <div class="content-body filter dropdown-filter">
+        <div class="content-body">
           <p>{{ 'collections.filters.collectedType.description' | translate }}</p>
           <p-multi-select
             id="collected-type"

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

@@ -9,10 +9,16 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
     }
   </div>
 
-  <div class="flex align-items-center gap-2 no-border-dropdown">
+  <div class="flex align-items-center gap-2">
     @if (isWeb()) {
       <h3 class="font-normal">{{ 'collections.filters.sort.label' | translate }}</h3>
-      <p-select [options]="sortOptions" optionLabel="label" optionValue="value" [(ngModel)]="selectedSort"></p-select>
+      <p-select
+        class="no-border-dropdown"
+        [options]="sortOptions"
+        optionLabel="label"
+        optionValue="value"
+        [(ngModel)]="selectedSort"
+      ></p-select>
     } @else {
       <img
         ngSrc="assets/icons/colored/filter.svg"

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

@@ -37,11 +37,12 @@
           </p>
         </td>
         <td>
-          <div class="no-border-dropdown select-font-normal">
+          <div>
             <osf-select
               [options]="permissionsOptions"
               [placeholder]="'project.contributors.permissionFilter'"
               [appendTo]="'body'"
+              [noBorder]="true"
               [(selectedValue)]="item.permission"
               (changeValue)="updatePermission(item)"
             ></osf-select>

src/app/features/my-profile/components/filters/my-profile-date-created-filter/my-profile-date-created-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the creation date from the dropdown below</p>
   <p-select
     id="dateCreated"

src/app/features/my-profile/components/filters/my-profile-funder-filter/my-profile-funder-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the funder from the dropdown below or start typing for find it</p>
   <p-select
     id="funder"

src/app/features/my-profile/components/filters/my-profile-institution-filter/my-profile-institution-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the institution from the dropdown below or start typing for find it</p>
   <p-select
     id="institution"

src/app/features/my-profile/components/filters/my-profile-license-filter/my-profile-license-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the license from the dropdown below or start typing for find it</p>
   <p-select
     id="license"

src/app/features/my-profile/components/filters/my-profile-part-of-collection-filter/my-profile-part-of-collection-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the partOfCollection from the dropdown below or start typing for find it</p>
   <p-select
     id="partOfCollection"

src/app/features/my-profile/components/filters/my-profile-provider-filter/my-profile-provider-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the provider from the dropdown below or start typing for find it</p>
   <p-select
     id="provider"

src/app/features/my-profile/components/filters/my-profile-resource-type-filter/my-profile-resource-type-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the resourceType from the dropdown below or start typing for find it</p>
   <p-select
     id="resourceType"

src/app/features/my-profile/components/filters/my-profile-subject-filter/my-profile-subject-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the subject from the dropdown below or start typing for find it</p>
   <p-select
     id="subject"

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

@@ -1,7 +1,13 @@
-<div class="centered-select flex justify-content-between align-items-start pb-3 column-gap-3">
+<div class="flex justify-content-between align-items-start pb-3 column-gap-3">
   <div class="flex flex-1 flex-column row-gap-7">
     @if (isMobile()) {
-      <p-select [(ngModel)]="selectedTab" [options]="tabsOptions" optionLabel="label" optionValue="value"></p-select>
+      <p-select
+        class="text-center"
+        [(ngModel)]="selectedTab"
+        [options]="tabsOptions"
+        optionLabel="label"
+        optionValue="value"
+      ></p-select>
     }
     @if (searchCount() > 10000) {
       <h3>10 000+ results</h3>
@@ -12,13 +18,15 @@ <h3>0 results</h3>
     }
   </div>
 
-  <div class="sorting-container no-border-dropdown">
+  <div class="sorting-container">
     @if (isWeb()) {
       <h3>Sort by:</h3>
       <p-select
+        class="no-border-dropdown font-bold"
         [options]="searchSortingOptions"
         optionLabel="label"
         optionValue="value"
+        appendTo="body"
         [(ngModel)]="selectedSort"
       ></p-select>
     } @else {

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

@@ -1,4 +1,4 @@
-<div class="search-container mt-5 mx-3 md:mx-4 xl:mt-6">
+<div class="search-container mt-5 mx-3 md:mx-5 xl:mt-6 xl:mx-4">
   <osf-search-input
     [control]="searchControl"
     [showHelpIcon]="true"
@@ -7,8 +7,8 @@
   />
 </div>
 
-<div class="flex-column flex flex-1 w-full resources-tab-panel">
-  <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
+<div class="flex-column flex flex-1 w-full pt-6">
+  <p-tabs class="flex-1 px-4" [value]="selectedTab" (valueChange)="onTabChange(+$event)">
     @if (!isMobile()) {
       <p-tablist>
         <p-tab [value]="ResourceTab.All">All</p-tab>

src/app/features/preprints/components/filters/preprints-creators-filter/preprints-creators-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Filter creators by typing their name below</p>
   <p-select
     id="creator"

src/app/features/preprints/components/filters/preprints-date-created-filter/preprints-date-created-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the creation date from the dropdown below</p>
   <p-select
     id="dateCreated"

src/app/features/preprints/components/filters/preprints-institution-filter/preprints-institution-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the institution from the dropdown below or start typing for find it</p>
   <p-select
     id="institution"

src/app/features/preprints/components/filters/preprints-license-filter/preprints-license-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the license from the dropdown below or start typing for find it</p>
   <p-select
     id="license"

src/app/features/preprints/components/filters/preprints-subject/preprints-subject-filter.component.html

@@ -1,4 +1,4 @@
-<div class="content-body filter dropdown-filter">
+<div class="content-body">
   <p class="m-0">Please select the subject from the dropdown below or start typing for find it</p>
   <p-select
     id="subject"

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

@@ -1,5 +1,5 @@
 <section class="bg-white py-4 px-3 md:px-5 xl:px-4 flex-1">
-  <section class="centered-select flex flex-row justify-content-between align-items-center p-b-12">
+  <section class="flex flex-row justify-content-between align-items-center p-b-12">
     @if (resourcesCount() > 10000) {
       <h4>10 000+ results</h4>
     } @else if (resourcesCount() > 0) {
@@ -8,13 +8,15 @@ <h4>{{ resourcesCount() }} results</h4>
       <h4>0 results</h4>
     }
 
-    <div class="sorting-container no-border-dropdown">
+    <div class="sorting-container">
       @if (isWeb()) {
         <h4>Sort by:</h4>
         <p-select
+          class="no-border-dropdown font-bold"
           [options]="searchSortingOptions"
           optionLabel="label"
           optionValue="value"
+          appendTo="body"
           [ngModel]="sortBy()"
           (onChange)="sortOptionSelected($event.value)"
         />

src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html

@@ -87,7 +87,7 @@ <h2 class="pt-2">{{ 'settings.addons.connectAddon.chooseExistingAccount' | trans
                     [inputId]="account.id"
                     (ngModelChange)="chosenAccountId.set($event)"
                   ></p-radiobutton>
-                  <label [for]="account.id" class="ml-2 radio-label">{{ account.displayName }}</label>
+                  <label [for]="account.id" class="ml-2">{{ account.displayName }}</label>
                 </li>
               }
             </ul>

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

@@ -16,7 +16,7 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.project.contributors' | tra
     </div>
 
     <div class="contributors-filter-container flex flex-column md:flex-row xl:w-5">
-      <div class="w-full grey-placeholder md:w-6">
+      <div class="w-full md:w-6">
         <p-select
           class="w-full"
           [placeholder]="'project.contributors.permissionFilter' | translate"
@@ -37,7 +37,7 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.project.contributors' | tra
         </p-select>
       </div>
 
-      <div class="w-full md:w-6 grey-placeholder">
+      <div class="w-full md:w-6">
         <p-select
           class="w-full"
           [placeholder]="'project.contributors.bibliographyFilter' | translate"

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

@@ -1,4 +1,4 @@
-<form [formGroup]="fileMetadataForm" (ngSubmit)="setFileMetadata()" class="flex flex-column gap-3 select-option-wrap">
+<form [formGroup]="fileMetadataForm" (ngSubmit)="setFileMetadata()" class="flex flex-column gap-3">
   <div class="flex flex-column gap-1">
     <p>{{ 'project.files.detail.fileMetadata.fields.title' | translate }}</p>
     <input pInputText id="title" [formControl]="titleControl" />
@@ -38,7 +38,7 @@
     ></p-select>
   </div>
 
-  <div class="flex btn-full-width gap-2">
+  <div class="flex btn-full-width gap-2 mt-4">
     <p-button
       [label]="'common.buttons.cancel' | translate"
       severity="info"

src/app/features/project/metadata/components/project-metadata-affiliated-institutions/project-metadata-affiliated-institutions.component.html

@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg">{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h2>
 
     <p-button
       severity="secondary"