From 7b559967e727e49e3232346503eac6ccc4a1a1d3 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 12:20:48 +0300
Subject: [PATCH 01/20] fix(metadata): updated metadata

---
 ...ata-affiliated-institutions.component.html |  2 +-
 ...oject-metadata-contributors.component.html |  2 +-
 ...roject-metadata-description.component.html |  2 +-
 .../project-metadata-doi.component.html       |  2 +-
 .../project-metadata-funding.component.html   |  2 +-
 .../project-metadata-license.component.html   |  2 +-
 ...ct-metadata-publication-doi.component.html |  2 +-
 ...tadata-resource-information.component.html |  2 +-
 .../project-metadata-subjects.component.html  | 18 +++++++---------
 .../project-metadata-subjects.component.ts    |  4 ++--
 .../project-metadata-tags.component.html      |  2 +-
 .../metadata/project-metadata.component.html  | 10 ++++-----
 .../overview-metadata.component.html          |  6 +++---
 src/assets/i18n/en.json                       | 21 ++-----------------
 14 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/src/app/features/project/metadata/components/project-metadata-affiliated-institutions/project-metadata-affiliated-institutions.component.html b/src/app/features/project/metadata/components/project-metadata-affiliated-institutions/project-metadata-affiliated-institutions.component.html
index 518b2dde8..9abbe7fb7 100644
--- a/src/app/features/project/metadata/components/project-metadata-affiliated-institutions/project-metadata-affiliated-institutions.component.html
+++ b/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"
diff --git a/src/app/features/project/metadata/components/project-metadata-contributors/project-metadata-contributors.component.html b/src/app/features/project/metadata/components/project-metadata-contributors/project-metadata-contributors.component.html
index 7031b792f..77dbe94ba 100644
--- a/src/app/features/project/metadata/components/project-metadata-contributors/project-metadata-contributors.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-contributors/project-metadata-contributors.component.html
@@ -1,6 +1,6 @@
 <p-card class="shadow-2">
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg font-semibold m-0">{{ 'project.overview.metadata.contributors' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
 
     <p-button
       (click)="openEditContributorDialog.emit()"
diff --git a/src/app/features/project/metadata/components/project-metadata-description/project-metadata-description.component.html b/src/app/features/project/metadata/components/project-metadata-description/project-metadata-description.component.html
index 0d4ae10c7..81a97cfc0 100644
--- a/src/app/features/project/metadata/components/project-metadata-description/project-metadata-description.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-description/project-metadata-description.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg">{{ 'project.overview.metadata.description' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.description' | translate }}</h2>
 
     <p-button
       severity="secondary"
diff --git a/src/app/features/project/metadata/components/project-metadata-doi/project-metadata-doi.component.html b/src/app/features/project/metadata/components/project-metadata-doi/project-metadata-doi.component.html
index d300c6993..cdf760a2a 100644
--- a/src/app/features/project/metadata/components/project-metadata-doi/project-metadata-doi.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-doi/project-metadata-doi.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg font-semibold m-0">{{ 'project.overview.metadata.doi' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.doi' | translate }}</h2>
 
     @if (currentProject()?.doi) {
       <p-button severity="secondary" [label]="'common.buttons.edit' | translate" (click)="onEditDoi()"></p-button>
diff --git a/src/app/features/project/metadata/components/project-metadata-funding/project-metadata-funding.component.html b/src/app/features/project/metadata/components/project-metadata-funding/project-metadata-funding.component.html
index 68daecfdf..cc66c8927 100644
--- a/src/app/features/project/metadata/components/project-metadata-funding/project-metadata-funding.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-funding/project-metadata-funding.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg">{{ 'project.overview.metadata.fundingSupport' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.fundingSupport' | translate }}</h2>
 
     <p-button
       severity="secondary"
diff --git a/src/app/features/project/metadata/components/project-metadata-license/project-metadata-license.component.html b/src/app/features/project/metadata/components/project-metadata-license/project-metadata-license.component.html
index 134f23cb4..16df1fe0a 100644
--- a/src/app/features/project/metadata/components/project-metadata-license/project-metadata-license.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-license/project-metadata-license.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg font-semibold m-0">{{ 'project.overview.metadata.licence' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.license' | translate }}</h2>
 
     <p-button
       severity="secondary"
diff --git a/src/app/features/project/metadata/components/project-metadata-publication-doi/project-metadata-publication-doi.component.html b/src/app/features/project/metadata/components/project-metadata-publication-doi/project-metadata-publication-doi.component.html
index dd07684db..1ddbe9779 100644
--- a/src/app/features/project/metadata/components/project-metadata-publication-doi/project-metadata-publication-doi.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-publication-doi/project-metadata-publication-doi.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg">{{ 'project.overview.metadata.publication' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.publication' | translate }}</h2>
 
     <p-button
       severity="secondary"
diff --git a/src/app/features/project/metadata/components/project-metadata-resource-information/project-metadata-resource-information.component.html b/src/app/features/project/metadata/components/project-metadata-resource-information/project-metadata-resource-information.component.html
index 9d7620f1b..18c70e4fc 100644
--- a/src/app/features/project/metadata/components/project-metadata-resource-information/project-metadata-resource-information.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-resource-information/project-metadata-resource-information.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h3 class="text-lg">{{ 'project.overview.metadata.resourceInformation' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.resourceInformation' | translate }}</h2>
 
     <p-button
       severity="secondary"
diff --git a/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.html b/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.html
index 297df0eda..f6d492ace 100644
--- a/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex flex-column gap-3">
-    <h3 class="text-lg m-0">{{ 'project.overview.metadata.subjects' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.subjects' | translate }}</h2>
 
     <div class="flex flex-column gap-3">
       <div class="subjects-chips">
@@ -13,16 +13,12 @@ <h3 class="text-lg m-0">{{ 'project.overview.metadata.subjects' | translate }}</
           (keydown)="$event.key === 'Enter' && onInputFocus()"
         >
           @for (subject of getUniqueSubjects(); track subject.id) {
-            <p-tag
-              [value]="subject.text"
-              severity="info"
-              class="cursor-pointer removable-chip"
-              tabindex="0"
-              role="button"
-              [attr.aria-label]="subject.text"
-              (click)="removeSubject(subject); $event.stopPropagation()"
-              [title]="'project.overview.metadata.clickToRemove' | translate"
-            />
+            <p-chip
+              [label]="subject.text"
+              removeIcon="fas fa-close"
+              removable
+              (onRemove)="removeSubject(subject)"
+            ></p-chip>
           }
 
           @if (getUniqueSubjects().length === 0) {
diff --git a/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.ts b/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.ts
index c4541ee55..ba8411df9 100644
--- a/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.ts
+++ b/src/app/features/project/metadata/components/project-metadata-subjects/project-metadata-subjects.component.ts
@@ -2,7 +2,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Card } from 'primeng/card';
 import { Checkbox } from 'primeng/checkbox';
-import { Tag } from 'primeng/tag';
+import { Chip } from 'primeng/chip';
 
 import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
@@ -24,7 +24,7 @@ interface SubjectOption {
 
 @Component({
   selector: 'osf-project-metadata-subjects',
-  imports: [Card, Tag, TranslatePipe, FormsModule, Checkbox, NgClass, SearchInputComponent],
+  imports: [Card, Chip, TranslatePipe, FormsModule, Checkbox, NgClass, SearchInputComponent],
   templateUrl: './project-metadata-subjects.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/app/features/project/metadata/components/project-metadata-tags/project-metadata-tags.component.html b/src/app/features/project/metadata/components/project-metadata-tags/project-metadata-tags.component.html
index 19e5b0b66..e50cf5d6d 100644
--- a/src/app/features/project/metadata/components/project-metadata-tags/project-metadata-tags.component.html
+++ b/src/app/features/project/metadata/components/project-metadata-tags/project-metadata-tags.component.html
@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex flex-column gap-3">
-    <h3 class="text-lg m-0">{{ 'project.overview.metadata.tags' | translate }}</h3>
+    <h2>{{ 'project.overview.metadata.tags' | translate }}</h2>
 
     <p-chips
       styleClass="w-full outline-none tag-chips"
diff --git a/src/app/features/project/metadata/project-metadata.component.html b/src/app/features/project/metadata/project-metadata.component.html
index d4bfcb205..95b1ada90 100644
--- a/src/app/features/project/metadata/project-metadata.component.html
+++ b/src/app/features/project/metadata/project-metadata.component.html
@@ -29,14 +29,14 @@
                   <osf-loading-spinner />
                 </div>
               } @else {
-                <div class="flex-column flex flex-1 w-full bg-white">
+                <div class="flex-column flex flex-1 w-full bg-white lg:flex-row">
                   <div class="col-12 lg:col-6 flex flex-column gap-4">
                     <p-card>
                       <div class="flex justify-content-between flex-wrap gap-4">
                         <div class="flex flex-column gap-2 flex-1">
-                          <h3 class="text-lg font-semibold m-0">
+                          <h2>
                             {{ 'project.overview.metadata.dateCreated' | translate }}
-                          </h3>
+                          </h2>
 
                           <p class="m-0 text-color-secondary">
                             {{ currentProject()?.dateCreated | date: 'MMM d, y, h:mm a' }}
@@ -44,9 +44,9 @@ <h3 class="text-lg font-semibold m-0">
                         </div>
 
                         <div class="flex flex-column gap-2 flex-1">
-                          <h3 class="text-lg font-semibold m-0">
+                          <h2>
                             {{ 'project.overview.metadata.dateUpdated' | translate }}
-                          </h3>
+                          </h2>
 
                           <p class="m-0 text-color-secondary">
                             {{ currentProject()?.dateModified | date: 'MMM d, y, h:mm a' }}
diff --git a/src/app/features/project/overview/components/overview-metadata/overview-metadata.component.html b/src/app/features/project/overview/components/overview-metadata/overview-metadata.component.html
index 96fb40086..930f0b867 100644
--- a/src/app/features/project/overview/components/overview-metadata/overview-metadata.component.html
+++ b/src/app/features/project/overview/components/overview-metadata/overview-metadata.component.html
@@ -65,7 +65,7 @@ <h3>{{ 'project.overview.metadata.dateUpdated' | translate }}</h3>
     </div>
 
     <div class="flex flex-column gap-2">
-      <h3>{{ 'project.overview.metadata.licence' | translate }}</h3>
+      <h3>{{ 'project.overview.metadata.license' | translate }}</h3>
 
       <div>{{ project.license?.name ?? ('project.overview.metadata.noLicense' | translate) }}</div>
     </div>
@@ -103,7 +103,7 @@ <h3>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h3>
     <div class="flex flex-column gap-2">
       <h3>{{ 'project.overview.metadata.subjects' | translate }}</h3>
 
-      <div class="flex gap-2">
+      <div class="flex flex-wrap align-items-center gap-2">
         @if (project.subjects.length) {
           @for (subject of project.subjects; track subject.id) {
             <p-tag [value]="subject.text" severity="info" />
@@ -118,7 +118,7 @@ <h3>{{ 'project.overview.metadata.subjects' | translate }}</h3>
       <h3>{{ 'project.overview.metadata.tags' | translate }}</h3>
 
       @if (project.tags.length) {
-        <div class="flex gap-2">
+        <div class="flex flex-wrap align-items-center gap-2">
           @for (tag of project.tags; track tag) {
             <p-tag [value]="tag" severity="info" />
           }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 2d49983a3..761709881 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -475,7 +475,7 @@
         "supplementsText2": "on OSF Preprints",
         "dateCreated": "Date Created",
         "dateUpdated": "Date Updated",
-        "licence": "License",
+        "license": "License",
         "publication": "Publication DOI",
         "subjects": "Subjects",
         "tags": "Tags",
@@ -500,23 +500,6 @@
         },
         "publicationDoi": {
           "label": "Publication DOI"
-        },
-        "license": {
-          "dialog": {
-            "header": "Edit Licence",
-            "chooseLicense": {
-              "label": "Choose License",
-              "placeholder": "Select license"
-            },
-            "copyrightHolders": {
-              "label": "Copyright Holders",
-              "placeholder": "Enter copyright holders"
-            },
-            "statementOfPurpose": {
-              "label": "Statement of Purpose",
-              "placeholder": "Enter statement of purpose"
-            }
-          }
         }
       },
       "dialog": {
@@ -801,7 +784,7 @@
       },
       "license": {
         "dialog": {
-          "header": "Edit Licence",
+          "header": "Edit License",
           "chooseLicense": {
             "label": "Choose License",
             "placeholder": "Select license"

From 4043c92a4b9d99f695fc985576b2f43d05fb922d Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 12:23:49 +0300
Subject: [PATCH 02/20] fix(tag): updated styles for tags

---
 src/assets/styles/overrides/tag.scss | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/assets/styles/overrides/tag.scss b/src/assets/styles/overrides/tag.scss
index f03a55361..c0fb70971 100644
--- a/src/assets/styles/overrides/tag.scss
+++ b/src/assets/styles/overrides/tag.scss
@@ -1,23 +1,17 @@
-@use "assets/styles/variables" as var;
-
 .p-tag {
-  height: 2rem;
-  padding: 0.4rem 1rem;
-  border-radius: 4px;
-}
+  --p-tag-border-radius: 4px;
+  --p-tag-padding: 0.25rem 0.75rem;
 
-.p-tag-warn {
-  background: var.$yellow-2;
-  color: var.$yellow-1;
-}
+  --p-tag-warn-background: var(--yellow-2);
+  --p-tag-warn-color: var(--yellow-1);
+
+  --p-tag-secondary-background: var(--grey-1);
+  --p-tag-secondary-color: var(--white);
 
-.p-tag-secondary {
-  background: var.$grey-1;
-  color: var.$white;
+  --p-tag-info-background: var(--bg-blue-3);
+  --p-tag-info-color: var(--dark-blue-1);
 }
 
 .p-tag-info {
-  color: var.$dark-blue-1;
-  background: var.$bg-blue-3;
-  font-weight: normal;
+  --p-tag-font-weight: normal;
 }

From 270e12652a2309794374e84f14fffac4b6f14bcd Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 13:55:36 +0300
Subject: [PATCH 03/20] fix(toggleswitch): updated toggle

---
 .../overview-toolbar.component.html           |  2 +-
 .../overview-toolbar.component.ts             |  9 +++++++-
 .../toggle-publicity-dialog.component.html    |  2 +-
 src/assets/styles/overrides/toggleswitch.scss | 22 +++++++------------
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html
index 79f2f4bb9..ad65ae0e7 100644
--- a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html
+++ b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html
@@ -10,7 +10,7 @@
         <p class="font-bold">{{ 'project.overview.header.privateProject' | translate }}</p>
       </div>
 
-      <p-toggleswitch [ngModel]="isPublic()" (onChange)="handleToggleProjectPublicity()" />
+      <p-toggleswitch class="visibility-switch" [(ngModel)]="isPublic" (onChange)="handleToggleProjectPublicity()" />
 
       <div class="flex gap-2" [class.inactive]="!isPublic()">
         <i class="osf-icon-padlock-unlock"></i>
diff --git a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts
index 7199ced30..f805ddd0c 100644
--- a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts
+++ b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts
@@ -8,6 +8,8 @@ import { Menu } from 'primeng/menu';
 import { ToggleSwitch } from 'primeng/toggleswitch';
 import { Tooltip } from 'primeng/tooltip';
 
+import { timer } from 'rxjs';
+
 import { NgClass, NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -133,11 +135,16 @@ export class OverviewToolbarComponent {
     const project = this.currentProject();
     if (!project) return;
 
-    const isCurrentlyPublic = this.isPublic();
+    const isCurrentlyPublic = project.isPublic;
     const newPublicStatus = !isCurrentlyPublic;
 
+    timer(100)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.isPublic.set(project.isPublic));
+
     this.dialogService.open(TogglePublicityDialogComponent, {
       focusOnShow: false,
+      width: '40vw',
       header: this.translateService.instant(
         isCurrentlyPublic ? 'project.overview.dialog.makePrivate.header' : 'project.overview.dialog.makePublic.header'
       ),
diff --git a/src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.html b/src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.html
index 785c16e7f..7ef3dc4d7 100644
--- a/src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.html
+++ b/src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.html
@@ -1,6 +1,6 @@
 <div class="dialog-container">
   <div [innerHTML]="messageKey() | translate"></div>
-  <div class="flex mt-6 gap-3 justify-content-between">
+  <div class="flex mt-6 gap-3 justify-content-end">
     <p-button
       [label]="'project.overview.dialog.makePublic.cancelButton' | translate"
       severity="info"
diff --git a/src/assets/styles/overrides/toggleswitch.scss b/src/assets/styles/overrides/toggleswitch.scss
index ddea518d6..500d8c240 100644
--- a/src/assets/styles/overrides/toggleswitch.scss
+++ b/src/assets/styles/overrides/toggleswitch.scss
@@ -1,19 +1,13 @@
-@use "assets/styles/variables" as var;
-
 .p-toggleswitch {
-  scale: 1.2;
-
-  .p-toggleswitch-handle {
-    scale: 1.15;
-  }
+  --p-toggleswitch-background: var(--grey-1);
 }
 
-.p-toggleswitch:not(.p-disabled) .p-toggleswitch-slider,
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
-  background: var.$grey-1;
-}
+.visibility-switch {
+  .p-toggleswitch {
+    scale: 1.2;
 
-.p-toggleswitch:not(.p-disabled).p-toggleswitch-checked .p-toggleswitch-slider,
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
-  background: var.$pr-blue-1;
+    .p-toggleswitch-handle {
+      scale: 1.15;
+    }
+  }
 }

From ccf30dc41c65ec647e7eba628d6e3dd69516d544 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 15:16:05 +0300
Subject: [PATCH 04/20] fix(tabs): updated tabs and spinner

---
 .../my-profile-search.component.html          |  2 +-
 src/app/features/search/search.component.html |  2 +-
 src/assets/styles/overrides/spinner.scss      |  4 +-
 src/assets/styles/overrides/tabs.scss         | 55 ++++++-------------
 4 files changed, 21 insertions(+), 42 deletions(-)

diff --git a/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html b/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html
index 386a3cac3..85fa26ebc 100644
--- a/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html
+++ b/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html
@@ -7,7 +7,7 @@
   />
 </div>
 
-<div class="flex-column flex flex-1 w-full resources-tab-panel">
+<div class="flex-column flex flex-1 w-full pt-6 px-4">
   <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
     @if (!isMobile()) {
       <p-tablist>
diff --git a/src/app/features/search/search.component.html b/src/app/features/search/search.component.html
index 3702758c5..197ee1001 100644
--- a/src/app/features/search/search.component.html
+++ b/src/app/features/search/search.component.html
@@ -8,7 +8,7 @@
     />
   </div>
 
-  <div class="flex-column flex w-full resources-tab-panel">
+  <div class="flex-column flex w-full pt-6 px-4">
     <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
       @if (isSmall()) {
         <p-tablist>
diff --git a/src/assets/styles/overrides/spinner.scss b/src/assets/styles/overrides/spinner.scss
index 974613e4f..9956a02e7 100644
--- a/src/assets/styles/overrides/spinner.scss
+++ b/src/assets/styles/overrides/spinner.scss
@@ -1,7 +1,5 @@
-@use "assets/styles/variables" as var;
-
 .p-progressspinner-circle {
-  stroke: var.$pr-blue-1 !important;
+  stroke: var(--pr-blue-1) !important;
 }
 
 .p-progressspinner {
diff --git a/src/assets/styles/overrides/tabs.scss b/src/assets/styles/overrides/tabs.scss
index 42b3e51ed..87eb2907b 100644
--- a/src/assets/styles/overrides/tabs.scss
+++ b/src/assets/styles/overrides/tabs.scss
@@ -1,47 +1,28 @@
-@use "assets/styles/variables" as var;
-@use "../mixins" as mix;
-
-.p-tab {
-  padding: mix.rem(12px) mix.rem(24px);
-
-  &:not(.p-tab-active):hover {
-    background: var.$white-60;
-    border-top-left-radius: mix.rem(12px);
-    border-top-right-radius: mix.rem(12px);
-  }
-}
-
-.p-tabpanels {
-  padding: mix.rem(24px);
-}
-
 .p-tablist-tab-list {
-  background: transparent;
-  border: none;
-
-  .p-tab {
-    color: var.$dark-blue-1;
-    border: none;
-  }
-
-  .p-tab-active {
-    background: var.$white;
-    border-top-left-radius: mix.rem(12px);
-    border-top-right-radius: mix.rem(12px);
-    border-color: transparent;
-  }
+  --p-tabs-tablist-background: transparent;
+  --p-tabs-tablist-border-width: 0;
 
   .p-tablist-active-bar {
     display: none;
   }
 }
 
-.resources-tab-panel {
-  .p-tabpanels {
-    padding: 0 !important;
-  }
+.p-tab {
+  --p-tabs-tab-padding: 0.75rem 1.5rem;
+  --p-tabs-tab-active-background: var(--white);
+  --p-tabs-tab-hover-background: var(--white-60);
+  --p-tabs-tab-active-border-color: transparent;
+  --p-tabs-tab-active-color: var(--dark-blue-1);
+  --p-tabs-tab-color: var(--dark-blue-1);
+  --p-tabs-tab-border-width: 0;
 
-  .p-tablist {
-    padding: mix.rem(48px) mix.rem(24px) 0;
+  &:not(.p-tab-active):hover {
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
   }
 }
+
+.p-tab-active {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}

From 9a1a0ceeec1c2d294a22bdf1c7c552eab6ad4d29 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 15:27:41 +0300
Subject: [PATCH 05/20] fix(radio button): updated radio button

---
 .../connect-configured-addon.component.html   |  2 +-
 src/assets/styles/overrides/radio.scss        | 19 ++++++-------------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
index e8ee1e556..2feea04b3 100644
--- a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
+++ b/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>
diff --git a/src/assets/styles/overrides/radio.scss b/src/assets/styles/overrides/radio.scss
index 6228cc469..17084ee14 100644
--- a/src/assets/styles/overrides/radio.scss
+++ b/src/assets/styles/overrides/radio.scss
@@ -1,14 +1,7 @@
-@use "../variables" as var;
-
-.radio-label {
-  color: var.$dark-blue-1;
-}
-
-.p-radiobutton-checked .p-radiobutton-box {
-  border-color: var.$pr-blue-1;
-  background: transparent;
-}
-
-.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
-  background: var.$pr-blue-1;
+.p-radiobutton {
+  --p-radiobutton-checked-background: transparent;
+  --p-radiobutton-checked-hover-background: transparent;
+  --p-radiobutton-icon-checked-hover-color: var(--pr-blue-1);
+  --p-radiobutton-checked-hover-border-color: var(--pr-blue-1);
+  --p-radiobutton-icon-checked-color: var(--pr-blue-1);
 }

From 42672ebfad92aa7faa64150a38ccd8e07dc8c649 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 15:36:52 +0300
Subject: [PATCH 06/20] fix(divider): updated divider

---
 src/app/app.routes.ts                            |  3 +++
 .../auth/pages/sign-up/sign-up.component.html    |  4 ++--
 src/assets/styles/overrides/divider.scss         | 16 ++--------------
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a8e9bcb63..b0a0f9301 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -23,6 +23,7 @@ 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',
@@ -30,6 +31,7 @@ export const routes: Routes = [
           import('./features/auth/pages/forgot-password/forgot-password.component').then(
             (mod) => mod.ForgotPasswordComponent
           ),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'reset-password',
@@ -37,6 +39,7 @@ export const routes: Routes = [
           import('./features/auth/pages/reset-password/reset-password.component').then(
             (mod) => mod.ResetPasswordComponent
           ),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'home',
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.html b/src/app/features/auth/pages/sign-up/sign-up.component.html
index e24464c60..0fedd2814 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.html
+++ b/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>
diff --git a/src/assets/styles/overrides/divider.scss b/src/assets/styles/overrides/divider.scss
index feb2947e5..a5998cb43 100644
--- a/src/assets/styles/overrides/divider.scss
+++ b/src/assets/styles/overrides/divider.scss
@@ -1,16 +1,4 @@
-@use "../variables" as var;
-
 .p-divider {
-  color: var.$dark-blue-1;
-  margin: 2rem 0;
-}
-
-.p-divider-content {
-  background: var.$white;
-  padding: 0 1rem;
-  color: var.$dark-blue-1;
-}
-
-.p-divider-horizontal:before {
-  border-block-start: 1px solid var.$grey-2;
+  --p-divider-border-color: var(--grey-2);
+  --p-divider-content-color: var(--dark-blue-1);
 }

From e70d982ebc4294fe92112f273eb9845f829116ba Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 16:43:02 +0300
Subject: [PATCH 07/20] fix(table): updated table

---
 .../my-projects-table.component.html          |   2 +-
 src/assets/styles/overrides/table.scss        | 203 ++++--------------
 2 files changed, 46 insertions(+), 159 deletions(-)

diff --git a/src/app/shared/components/my-projects-table/my-projects-table.component.html b/src/app/shared/components/my-projects-table/my-projects-table.component.html
index 0cbb0b763..35369890f 100644
--- a/src/app/shared/components/my-projects-table/my-projects-table.component.html
+++ b/src/app/shared/components/my-projects-table/my-projects-table.component.html
@@ -63,7 +63,7 @@
           <td>
             <p class="flex align-items-center gap-2">
               <i [ngClass]="item.isPublic ? 'osf-icon-padlock-unlock' : 'osf-icon-padlock'"></i>
-              <span>{{ item.title }}</span>
+              <span class="overflow-ellipsis">{{ item.title }}</span>
             </p>
           </td>
           <td>
diff --git a/src/assets/styles/overrides/table.scss b/src/assets/styles/overrides/table.scss
index 5331616a5..2777bf16b 100644
--- a/src/assets/styles/overrides/table.scss
+++ b/src/assets/styles/overrides/table.scss
@@ -1,19 +1,21 @@
 @use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
 
 p-table {
+  --p-datatable-header-cell-color: var(--dark-blue-1);
+  --p-datatable-header-cell-hover-background: var(--grey-3);
+  --p-datatable-row-color: var(--dark-blue-1);
+  --p-datatable-column-title-font-weight: 700;
+
   .p-datatable {
-    border: 1px solid var.$grey-2;
-    border-radius: mix.rem(8px);
-    padding: mix.rem(12px) mix.rem(24px) mix.rem(24px) mix.rem(24px);
+    border: 1px solid var(--grey-2);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
   }
 
   table {
     tr:hover {
-      background: var.$bg-blue-2;
-
       td {
-        background: var.$bg-blue-2;
+        background: var(--bg-blue-2);
       }
     }
 
@@ -28,25 +30,18 @@ p-table {
 
     th,
     td {
-      color: var.$dark-blue-1;
       border: none;
-      height: mix.rem(65px);
     }
 
-    th {
-      background-color: var.$white;
-      font-weight: 700;
-      padding-top: 0;
-
-      .p-sortable-column-icon {
-        color: var.$grey-1;
-        margin-left: mix.rem(8px);
-      }
+    .p-sortable-column-icon {
+      color: var(--grey-1);
+      margin-left: 0.6rem;
     }
 
     td {
-      background-color: var.$bg-blue-3;
-      border-bottom: mix.rem(12px) solid var.$white;
+      background-color: var(--bg-blue-3);
+      border-bottom: 0.75rem solid var(--white);
+      height: 4rem;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -58,41 +53,20 @@ p-table {
   tr:not(.loading-row) {
     cursor: pointer;
   }
-
-  &.loading {
-    table {
-      tr.loading-row {
-        td {
-          background: transparent;
-          border: none;
-          padding: 0;
-          width: 100%;
-        }
-      }
-
-      tr:hover {
-        background: inherit;
-
-        td {
-          background: inherit;
-        }
-      }
-    }
-  }
 }
 
 .addon-table {
   tr {
     &.background-warning td {
-      background-color: var.$yellow-2;
+      background-color: var(--yellow-2);
     }
 
     &.background-success td {
-      background-color: var.$green-2;
+      background-color: var(--green-2);
     }
 
     &.background-danger td {
-      background-color: var.$red-2;
+      background-color: var(--red-2);
     }
 
     td {
@@ -101,99 +75,58 @@ p-table {
   }
 }
 
-@media (max-width: var.$breakpoint-xl) {
-  .home-table {
-    .p-datatable {
-      padding: 1.71rem 0.85rem 1.71rem 0.85rem;
+.view-only-table {
+  .p-datatable {
+    padding: 0.125rem;
+
+    td,
+    th {
+      background-color: transparent;
+      border-bottom: 1px solid var(--grey-2);
+    }
+
+    tr {
+      &:hover {
+        background: transparent;
+      }
+
+      &:last-of-type {
+        td {
+          border-bottom: none;
+        }
+      }
     }
   }
+}
 
+@media (max-width: var.$breakpoint-xl) {
   .addon-table,
   .my-projects-table {
     .p-datatable {
-      padding: mix.rem(16px);
+      padding: 1rem;
       overflow-x: auto;
     }
   }
 
-  .my-projects-table,
-  .home-table {
+  .my-projects-table {
     .p-datatable {
       overflow-x: auto;
     }
 
     td {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
       max-width: calc((100vw - 6.85rem - 2px) / 3);
-
-      p {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        margin: 0;
-        overflow: hidden;
-
-        i {
-          flex-shrink: 0;
-        }
-
-        span {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
     }
   }
 }
 
 @media (max-width: var.$breakpoint-sm) {
-  .home-table {
-    .p-datatable {
-      padding: 0.4rem;
-    }
-
-    table {
-      thead {
-        display: none;
-      }
-
-      tr {
-        max-width: calc(100vw - 3.14rem - 2px);
-        display: flex;
-        flex-direction: column;
-        padding: mix.rem(16px);
-        background: var.$bg-blue-3;
-
-        td {
-          max-width: calc(100vw - 3.14rem - 2px);
-          height: 2rem;
-          line-height: 2rem;
-          padding: 0;
-          border: 0;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-
-      tbody {
-        display: flex;
-        flex-direction: column;
-        row-gap: 0.42rem;
-      }
-    }
-  }
-
   .addon-table {
-    width: 100%;
-    overflow-x: auto;
     display: block;
+    overflow-x: auto;
+    width: 100%;
 
     .p-datatable {
-      padding: mix.rem(16px);
+      padding: 1rem;
       width: 100%;
 
       table {
@@ -207,10 +140,6 @@ p-table {
         text-overflow: unset;
         max-width: max-content;
       }
-
-      td:nth-child(2) {
-        white-space: nowrap;
-      }
     }
   }
 
@@ -229,48 +158,6 @@ p-table {
       white-space: normal;
       max-width: none;
       min-width: 50vw;
-
-      p {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        margin: 0;
-        overflow: visible;
-
-        i {
-          flex-shrink: 0;
-        }
-
-        span {
-          overflow: visible;
-          text-overflow: unset;
-          white-space: normal;
-        }
-      }
-    }
-  }
-}
-
-.view-only-table {
-  .p-datatable {
-    padding: 2px;
-
-    td,
-    th {
-      background-color: transparent;
-      border-bottom: 1px solid var.$grey-2;
-    }
-
-    tr {
-      &:hover {
-        background: transparent;
-      }
-
-      &:last-of-type {
-        td {
-          border-bottom: none;
-        }
-      }
     }
   }
 }

From 783244ac00f9a320e93139365528043130885aa9 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 16:54:45 +0300
Subject: [PATCH 08/20] fix(menu): updated menu

---
 src/assets/styles/overrides/input.scss |  3 ---
 src/assets/styles/overrides/menu.scss  | 30 +++++---------------------
 2 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/src/assets/styles/overrides/input.scss b/src/assets/styles/overrides/input.scss
index aa4405dec..e7b6a5c6c 100644
--- a/src/assets/styles/overrides/input.scss
+++ b/src/assets/styles/overrides/input.scss
@@ -1,6 +1,3 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
 .p-inputtext {
   --p-inputtext-padding-y: 0.6rem;
   --p-inputtext-hover-border-color: var(--pr-blue-1);
diff --git a/src/assets/styles/overrides/menu.scss b/src/assets/styles/overrides/menu.scss
index 7e44392bf..14afb0ba3 100644
--- a/src/assets/styles/overrides/menu.scss
+++ b/src/assets/styles/overrides/menu.scss
@@ -1,30 +1,10 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
-.p-menu-item-content {
-  a {
-    color: var.$dark-blue-2;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  &:hover {
-    text-decoration: none;
-    background: var.$bg-blue-3;
-  }
+.p-menu {
+  --p-menu-item-color: var(--dark-blue-1);
+  --p-menu-item-focus-color: var(--dark-blue-1);
+  --p-menu-item-focus-background: var(--bg-blue-3);
 }
 
 .p-menu {
-  margin-top: mix.rem(7px);
+  margin-top: 0.6rem;
   min-width: fit-content;
 }
-
-.share-menu {
-  .p-menu-list {
-    .p-menu-item {
-      padding: 0.5rem;
-    }
-  }
-}

From 724146940fa209ff38412b4bec4c336a940f5d30 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 17:34:08 +0300
Subject: [PATCH 09/20] fix(message): updated message styles

---
 .../deactivate-account.component.html         |  9 ++---
 src/assets/styles/overrides/message.scss      | 40 +++++++------------
 2 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.html b/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.html
index 8074356c4..1e0f69d33 100644
--- a/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.html
+++ b/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.html
@@ -1,12 +1,9 @@
 <section class="account-setting">
   <h2 class="account-setting-header">{{ 'settings.accountSettings.deactivateAccount.title' | translate }}</h2>
 
-  <div class="warning-message">
-    <p-message severity="error">
-      <i class="osf-icon-warning-sign mr-2"></i>
-      {{ 'settings.accountSettings.deactivateAccount.warning.title' | translate }}
-    </p-message>
-  </div>
+  <p-message icon="fas fa-circle-exclamation" severity="error">
+    {{ 'settings.accountSettings.deactivateAccount.warning.title' | translate }}
+  </p-message>
 
   <div class="account-setting-description">
     {{ 'settings.accountSettings.deactivateAccount.description.main' | translate }}
diff --git a/src/assets/styles/overrides/message.scss b/src/assets/styles/overrides/message.scss
index 059d2a5dd..36619a575 100644
--- a/src/assets/styles/overrides/message.scss
+++ b/src/assets/styles/overrides/message.scss
@@ -1,35 +1,23 @@
-@use "../variables" as var;
-
 .p-message:not(.p-message-simple) {
-  border: none;
-  color: var.$white;
-  height: 3rem;
-}
+  width: fit-content;
+  height: fit-content;
 
-.p-message-success {
-  background-color: var.$green-1;
-}
+  --p-message-content-padding: 1.5rem;
 
-.p-message-warn {
-  background-color: var.$yellow-1;
-}
+  --p-message-text-font-weight: 700;
+  --p-message-text-font-size: 0.875rem;
 
-.p-message-error:not(.p-message-simple) {
-  background-color: var.$red-1;
-}
+  --p-message-error-color: var(--red-1);
+  --p-message-error-background: var(--red-2);
+  --p-message-error-border-color: var(--red-2);
 
-.warning-message {
-  .p-message {
-    width: fit-content;
-    height: fit-content;
-    color: var.$red-1;
-    background: var.$red-2;
-    padding: 1rem;
+  --p-message-warn-color: var(--yellow-1);
+  --p-message-warn-background: var(--yellow-2);
+  --p-message-warn-border-color: var(--yellow-2);
 
-    .p-message-text {
-      font-weight: 700;
-    }
-  }
+  --p-message-success-color: var(--green-1);
+  --p-message-success-background: var(--green-2);
+  --p-message-success-border-color: var(--green-2);
 }
 
 .p-message-simple {

From 40620362de80158d270b4f20d6a7fe24ba78fa3d Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 17:38:40 +0300
Subject: [PATCH 10/20] fix(deactivate): updated deactivate account

---
 .../cancel-deactivation.component.html        |  6 ++---
 .../cancel-deactivation.component.scss        |  5 ++++
 .../cancel-deactivation.component.spec.ts     |  0
 .../cancel-deactivation.component.ts          |  8 +++---
 .../cancel-deactivation.component.scss        |  5 ----
 .../deactivation-warning.component.scss       |  5 ----
 .../deactivate-account/components/index.ts    |  2 --
 .../deactivate-account.component.ts           | 25 +++++++++----------
 .../deactivation-warning.component.html       |  6 ++---
 .../deactivation-warning.component.scss       |  5 ++++
 .../deactivation-warning.component.spec.ts    |  0
 .../deactivation-warning.component.ts         |  4 ---
 .../account-settings/components/index.ts      |  2 ++
 13 files changed, 34 insertions(+), 39 deletions(-)
 rename src/app/features/settings/account-settings/components/{deactivate-account/components => }/cancel-deactivation/cancel-deactivation.component.html (92%)
 create mode 100644 src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.scss
 rename src/app/features/settings/account-settings/components/{deactivate-account/components => }/cancel-deactivation/cancel-deactivation.component.spec.ts (100%)
 rename src/app/features/settings/account-settings/components/{deactivate-account/components => }/cancel-deactivation/cancel-deactivation.component.ts (72%)
 delete mode 100644 src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.scss
 delete mode 100644 src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.scss
 delete mode 100644 src/app/features/settings/account-settings/components/deactivate-account/components/index.ts
 rename src/app/features/settings/account-settings/components/{deactivate-account/components => }/deactivation-warning/deactivation-warning.component.html (92%)
 create mode 100644 src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.scss
 rename src/app/features/settings/account-settings/components/{deactivate-account/components => }/deactivation-warning/deactivation-warning.component.spec.ts (100%)
 rename src/app/features/settings/account-settings/components/{deactivate-account/components => }/deactivation-warning/deactivation-warning.component.ts (79%)

diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.html b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.html
similarity index 92%
rename from src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.html
rename to src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.html
index 8a8bcea7b..0a9837686 100644
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.html
+++ b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.html
@@ -3,9 +3,10 @@
     <h3 class="account-setting-description">
       {{ 'settings.accountSettings.deactivateAccount.cancelDeactivation.confirm' | translate }}
     </h3>
-    <h3 class="account-setting-description">
+
+    <p class="account-setting-description">
       {{ 'settings.accountSettings.deactivateAccount.cancelDeactivation.description' | translate }}
-    </h3>
+    </p>
   </div>
 
   <div class="flex gap-2">
@@ -13,7 +14,6 @@ <h3 class="account-setting-description">
       class="w-full"
       styleClass="w-full"
       (click)="dialogRef.close()"
-      text
       severity="info"
       [label]="'settings.accountSettings.deactivateAccount.cancelDeactivation.buttons.cancel' | translate"
     ></p-button>
diff --git a/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.scss b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.scss
new file mode 100644
index 000000000..3f1e57889
--- /dev/null
+++ b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.scss
@@ -0,0 +1,5 @@
+@use "../../account-settings.component.scss" as account-settings;
+
+:host {
+  @extend .account-setting;
+}
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.spec.ts b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.spec.ts
similarity index 100%
rename from src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.spec.ts
rename to src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.spec.ts
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.ts b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.ts
similarity index 72%
rename from src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.ts
rename to src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.ts
index 94b1182a7..bbe68c7ee 100644
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.ts
+++ b/src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.ts
@@ -1,4 +1,4 @@
-import { Store } from '@ngxs/store';
+import { createDispatchMap } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -7,7 +7,7 @@ import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
-import { CancelDeactivationRequest } from '@osf/features/settings/account-settings/store/account-settings.actions';
+import { CancelDeactivationRequest } from '../../store';
 
 @Component({
   selector: 'osf-cancel-deactivation',
@@ -17,11 +17,11 @@ import { CancelDeactivationRequest } from '@osf/features/settings/account-settin
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CancelDeactivationComponent {
-  #store = inject(Store);
+  action = createDispatchMap({ cancelDeactivationRequest: CancelDeactivationRequest });
   dialogRef = inject(DynamicDialogRef);
 
   cancelDeactivation(): void {
-    this.#store.dispatch(CancelDeactivationRequest);
+    this.action.cancelDeactivationRequest();
     this.dialogRef.close();
   }
 }
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.scss b/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.scss
deleted file mode 100644
index b2606ff4d..000000000
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/cancel-deactivation/cancel-deactivation.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "../../../../account-settings.component.scss" as account-settings;
-
-:host {
-  @extend .account-setting;
-}
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.scss b/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.scss
deleted file mode 100644
index b2606ff4d..000000000
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "../../../../account-settings.component.scss" as account-settings;
-
-:host {
-  @extend .account-setting;
-}
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/index.ts b/src/app/features/settings/account-settings/components/deactivate-account/components/index.ts
deleted file mode 100644
index 772cb886f..000000000
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CancelDeactivationComponent } from './cancel-deactivation/cancel-deactivation.component';
-export { DeactivationWarningComponent } from './deactivation-warning/deactivation-warning.component';
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.ts b/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.ts
index b6795c469..3c6050284 100644
--- a/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.ts
+++ b/src/app/features/settings/account-settings/components/deactivate-account/deactivate-account.component.ts
@@ -1,16 +1,16 @@
-import { Store } from '@ngxs/store';
+import { select } from '@ngxs/store';
 
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DialogService } from 'primeng/dynamicdialog';
 import { Message } from 'primeng/message';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { AccountSettingsSelectors } from '../../store';
-
-import { CancelDeactivationComponent, DeactivationWarningComponent } from './components';
+import { CancelDeactivationComponent } from '../cancel-deactivation/cancel-deactivation.component';
+import { DeactivationWarningComponent } from '../deactivation-warning/deactivation-warning.component';
 
 @Component({
   selector: 'osf-deactivate-account',
@@ -20,17 +20,16 @@ import { CancelDeactivationComponent, DeactivationWarningComponent } from './com
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeactivateAccountComponent {
-  #store = inject(Store);
-  dialogRef: DynamicDialogRef | null = null;
-  readonly #dialogService = inject(DialogService);
-  readonly #translateService = inject(TranslateService);
-  protected accountSettings = this.#store.selectSignal(AccountSettingsSelectors.getAccountSettings);
+  private readonly dialogService = inject(DialogService);
+  private readonly translateService = inject(TranslateService);
+
+  protected accountSettings = select(AccountSettingsSelectors.getAccountSettings);
 
   deactivateAccount() {
-    this.dialogRef = this.#dialogService.open(DeactivationWarningComponent, {
+    this.dialogService.open(DeactivationWarningComponent, {
       width: '552px',
       focusOnShow: false,
-      header: this.#translateService.instant('settings.accountSettings.deactivateAccount.dialog.deactivate.title'),
+      header: this.translateService.instant('settings.accountSettings.deactivateAccount.dialog.deactivate.title'),
       closeOnEscape: true,
       modal: true,
       closable: true,
@@ -38,10 +37,10 @@ export class DeactivateAccountComponent {
   }
 
   cancelDeactivation() {
-    this.dialogRef = this.#dialogService.open(CancelDeactivationComponent, {
+    this.dialogService.open(CancelDeactivationComponent, {
       width: '552px',
       focusOnShow: false,
-      header: this.#translateService.instant('settings.accountSettings.deactivateAccount.dialog.undo.title'),
+      header: this.translateService.instant('settings.accountSettings.deactivateAccount.dialog.undo.title'),
       closeOnEscape: true,
       modal: true,
       closable: true,
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.html b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.html
similarity index 92%
rename from src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.html
rename to src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.html
index ec2ce6dae..8680feb4e 100644
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.html
+++ b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.html
@@ -3,9 +3,10 @@
     <h3 class="account-setting-description">
       {{ 'settings.accountSettings.deactivateAccount.warning.confirm' | translate }}
     </h3>
-    <h3 class="account-setting-description">
+
+    <p class="account-setting-description">
       {{ 'settings.accountSettings.deactivateAccount.warning.description' | translate }}
-    </h3>
+    </p>
   </div>
 
   <div class="flex gap-2">
@@ -14,7 +15,6 @@ <h3 class="account-setting-description">
       styleClass="w-full"
       (click)="dialogRef.close()"
       [label]="'settings.accountSettings.common.buttons.cancel' | translate"
-      text
       severity="info"
     ></p-button>
 
diff --git a/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.scss b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.scss
new file mode 100644
index 000000000..3f1e57889
--- /dev/null
+++ b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.scss
@@ -0,0 +1,5 @@
+@use "../../account-settings.component.scss" as account-settings;
+
+:host {
+  @extend .account-setting;
+}
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.spec.ts b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.spec.ts
similarity index 100%
rename from src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.spec.ts
rename to src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.spec.ts
diff --git a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.ts b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.ts
similarity index 79%
rename from src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.ts
rename to src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.ts
index af0033910..245a86ff7 100644
--- a/src/app/features/settings/account-settings/components/deactivate-account/components/deactivation-warning/deactivation-warning.component.ts
+++ b/src/app/features/settings/account-settings/components/deactivation-warning/deactivation-warning.component.ts
@@ -5,8 +5,6 @@ import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
-// import { DeactivateAccount } from '@osf/features/settings/account-settings/store';
-
 @Component({
   selector: 'osf-deactivation-warning',
   imports: [Button, TranslatePipe],
@@ -15,11 +13,9 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeactivationWarningComponent {
-  // #store = inject(Store);
   dialogRef = inject(DynamicDialogRef);
 
   deactivateAccount(): void {
-    //this.#store.dispatch(DeactivateAccount);
     this.dialogRef.close();
   }
 }
diff --git a/src/app/features/settings/account-settings/components/index.ts b/src/app/features/settings/account-settings/components/index.ts
index e519e04e6..07fe11d78 100644
--- a/src/app/features/settings/account-settings/components/index.ts
+++ b/src/app/features/settings/account-settings/components/index.ts
@@ -1,9 +1,11 @@
 export { AddEmailComponent } from './add-email/add-email.component';
 export { AffiliatedInstitutionsComponent } from './affiliated-institutions/affiliated-institutions.component';
+export { CancelDeactivationComponent } from './cancel-deactivation/cancel-deactivation.component';
 export { ChangePasswordComponent } from './change-password/change-password.component';
 export { ConnectedEmailsComponent } from './connected-emails/connected-emails.component';
 export { ConnectedIdentitiesComponent } from './connected-identities/connected-identities.component';
 export { DeactivateAccountComponent } from './deactivate-account/deactivate-account.component';
+export { DeactivationWarningComponent } from './deactivation-warning/deactivation-warning.component';
 export { DefaultStorageLocationComponent } from './default-storage-location/default-storage-location.component';
 export { ShareIndexingComponent } from './share-indexing/share-indexing.component';
 export { TwoFactorAuthComponent } from './two-factor-auth/two-factor-auth.component';

From 7f302056e597858498a2e63312ada93592b8bd95 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 18:00:54 +0300
Subject: [PATCH 11/20] fix(paginator): updated paginator

---
 src/assets/styles/overrides/paginator.scss | 142 +++------------------
 1 file changed, 17 insertions(+), 125 deletions(-)

diff --git a/src/assets/styles/overrides/paginator.scss b/src/assets/styles/overrides/paginator.scss
index 9b6d24f4a..8fda3faa9 100644
--- a/src/assets/styles/overrides/paginator.scss
+++ b/src/assets/styles/overrides/paginator.scss
@@ -1,135 +1,27 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
-
 .p-paginator {
-  background: var.$white;
-  padding: mix.rem(12px) 0 0 0;
-  row-gap: mix.rem(12px);
-
-  .p-select-overlay {
-    background: var.$white;
-    border: 1px solid var.$grey-2;
-    color: var.$dark-blue-1;
-  }
-
-  .p-select-option {
-    &.p-select-option-selected {
-      background-color: var.$white;
-      color: var.$dark-blue-1;
-
-      &:hover {
-        background: var.$bg-blue-3;
-        color: var.$dark-blue-1;
-      }
-    }
-
-    &:not(.p-select-option-selected):not(.p-disabled).p-focus {
-      background: var.$bg-blue-3;
-      color: var.$dark-blue-1;
-    }
-  }
-
-  p-select {
-    background: var.$white;
-    border: 1px solid var.$grey-2;
-
-    span {
-      color: var.$dark-blue-1;
-    }
-  }
-}
-
-.p-paginator-page {
-  color: var.$dark-blue-1;
-  border-radius: 4px;
-  background: var.$white;
-
-  &:hover {
-    background: var.$bg-blue-2;
-  }
-}
-
-.p-paginator-page-selected {
-  color: var.$white;
-  border-radius: 4px;
-  background: var.$pr-blue-1;
-
-  &:hover {
-    background: var.$pr-blue-1;
-  }
+  --p-paginator-gap: 0.75rem;
+  --p-select-overlay-color: var(--dark-blue-1);
+  --p-select-overlay-border-color: var(--grey-2);
+  --p-select-option-focus-background: var(--bg-blue-3);
+  --p-select-option-focus-color: var(--dark-blue-1);
+  --p-select-option-selected-focus-background: var(--bg-blue-2);
+  --p-select-option-selected-color: var(--dark-blue-1);
+  --p-paginator-nav-button-background: var(--white);
+  --p-paginator-nav-button-color: var(--dark-blue-1);
+  --p-paginator-nav-button-border-radius: 0.25rem;
+  --p-paginator-nav-button-selected-background: var(--pr-blue-1);
+  --p-paginator-nav-button-selected-color: var(--white);
+  --p-paginator-nav-button-hover-background: var(--bg-blue-2);
+  --p-paginator-nav-button-hover-color: var(--dark-blue-1);
 }
 
 .p-paginator-next,
 .p-paginator-last,
 .p-paginator-first,
 .p-paginator-prev {
-  color: var.$grey-1;
-  border-radius: 4px;
-}
-
-.p-paginator-next:hover,
-.p-paginator-last:hover,
-.p-paginator-first:hover,
-.p-paginator-prev:hover {
-  color: var.$dark-blue-1;
-}
-
-.p-paginator-next:not(.p-disabled):hover,
-.p-paginator-last:not(.p-disabled):hover,
-.p-paginator-first:not(.p-disabled):hover,
-.p-paginator-prev:not(.p-disabled):hover {
-  background: var.$white;
-}
-
-.p-select-overlay {
-  background: var.$white;
-  border: 1px solid var.$grey-2;
-  color: var.$dark-blue-1;
-}
-
-.p-select-option {
-  &.p-select-option-selected {
-    background-color: var.$bg-blue-2;
-    color: var.$dark-blue-1;
-
-    &:hover {
-      background: var.$bg-blue-3;
-      color: var.$dark-blue-1;
-    }
-  }
-
-  &:not(.p-select-option-selected):not(.p-disabled).p-focus {
-    background: var.$bg-blue-3;
-    color: var.$dark-blue-1;
-  }
-}
-
-p-select {
-  background: var.$white;
-  border: 1px solid var.$grey-2;
-
-  &.p-disabled .p-select-label {
-    color: var.$grey-1;
-  }
-
-  span {
-    color: var.$dark-blue-1;
-  }
-}
-
-.resources-container {
-  .p-paginator {
-    .p-paginator-pages,
-    .p-paginator-last,
-    .p-paginator-prev {
-      display: none;
-    }
-    .p-paginator-first,
-    .p-paginator-next,
-    .p-paginator-prev {
-      opacity: 1 !important;
-    }
-  }
+  --p-paginator-nav-button-color: var(--grey-1);
+  --p-paginator-nav-button-hover-background: transparent;
+  --p-paginator-nav-button-hover-color: var(--dark-blue-1);
 }
 
 .collections-paginator {

From 4e4eb14b4ce0507b4185ee41eb0b8e4cd0f3ec9a Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 18:06:13 +0300
Subject: [PATCH 12/20] fix(password): updated password styles

---
 .../change-password.component.html            | 19 ++++++++++++++-----
 .../change-password.component.scss            | 15 +++++----------
 src/assets/styles/overrides/password.scss     |  7 -------
 src/assets/styles/overrides/stepper.scss      |  3 ---
 4 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/app/features/settings/account-settings/components/change-password/change-password.component.html b/src/app/features/settings/account-settings/components/change-password/change-password.component.html
index 677932b44..8991fe606 100644
--- a/src/app/features/settings/account-settings/components/change-password/change-password.component.html
+++ b/src/app/features/settings/account-settings/components/change-password/change-password.component.html
@@ -2,13 +2,16 @@
   <h2 class="account-setting-header">{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
 
   <form [formGroup]="passwordForm" class="flex flex-column gap-3">
-    <div class="flex flex-column gap-2 no-meter">
-      <label for="old-password" class="password-label">
+    <div class="flex flex-column gap-2">
+      <label for="old-password">
         {{ 'settings.accountSettings.changePassword.form.oldPassword' | translate }}
       </label>
       <p-password
+        class="w-full"
+        styleClass="w-full"
         [formControlName]="AccountSettingsPasswordFormControls.OldPassword"
         [toggleMask]="true"
+        [feedback]="false"
         [ngClass]="{
           'ng-invalid ng-dirty':
             passwordForm.get(AccountSettingsPasswordFormControls.OldPassword)?.invalid &&
@@ -27,12 +30,15 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.changePassword.t
 
     <div class="flex flex-column gap-2 md:flex-row">
       <div class="flex flex-column flex-1 gap-2">
-        <label for="new-password" class="password-label">
+        <label for="new-password">
           {{ 'settings.accountSettings.changePassword.form.newPassword' | translate }}
         </label>
         <p-password
+          class="w-full"
+          styleClass="w-full"
           [formControlName]="AccountSettingsPasswordFormControls.NewPassword"
           [toggleMask]="true"
+          [feedback]="false"
           [ngClass]="{
             'ng-invalid ng-dirty':
               (passwordForm.get(AccountSettingsPasswordFormControls.NewPassword)?.invalid ||
@@ -61,13 +67,16 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.changePassword.t
         }
       </div>
 
-      <div class="flex flex-column flex-1 gap-2 no-meter">
-        <label for="confirm-password" class="password-label">
+      <div class="flex flex-column flex-1 gap-2">
+        <label for="confirm-password">
           {{ 'settings.accountSettings.changePassword.form.confirmPassword' | translate }}
         </label>
         <p-password
+          class="w-full"
+          styleClass="w-full"
           [formControlName]="AccountSettingsPasswordFormControls.ConfirmPassword"
           [toggleMask]="true"
+          [feedback]="false"
           [ngClass]="{
             'ng-invalid ng-dirty':
               (passwordForm.errors?.['passwordMismatch'] ||
diff --git a/src/app/features/settings/account-settings/components/change-password/change-password.component.scss b/src/app/features/settings/account-settings/components/change-password/change-password.component.scss
index 780b45db8..e4f17c758 100644
--- a/src/app/features/settings/account-settings/components/change-password/change-password.component.scss
+++ b/src/app/features/settings/account-settings/components/change-password/change-password.component.scss
@@ -1,16 +1,11 @@
 @use "../../account-settings.component.scss" as account-settings;
-@use "assets/styles/variables" as var;
 
 :host {
   @extend .account-setting;
+}
 
-  .password-label {
-    color: var.$dark-blue-1;
-  }
-
-  .password-help {
-    color: var.$pr-blue-1;
-    font-size: 0.8rem;
-    font-weight: 600;
-  }
+.password-help {
+  color: var(--pr-blue-1);
+  font-size: 0.75rem;
+  font-weight: 600;
 }
diff --git a/src/assets/styles/overrides/password.scss b/src/assets/styles/overrides/password.scss
index f4047de5f..e69de29bb 100644
--- a/src/assets/styles/overrides/password.scss
+++ b/src/assets/styles/overrides/password.scss
@@ -1,7 +0,0 @@
-.no-meter {
-  .p-password {
-    .p-password-overlay {
-      display: none;
-    }
-  }
-}
diff --git a/src/assets/styles/overrides/stepper.scss b/src/assets/styles/overrides/stepper.scss
index f7535856f..38c05ffb6 100644
--- a/src/assets/styles/overrides/stepper.scss
+++ b/src/assets/styles/overrides/stepper.scss
@@ -1,6 +1,3 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
 .p-stepper {
   .p-steppanels {
     padding: 0;

From c909864540f481143419ba0e125146c931204ccf Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Thu, 26 Jun 2025 19:30:29 +0300
Subject: [PATCH 13/20] fix(select): update select

---
 .../collections-filters.component.html        |   4 +-
 .../collections-main-content.component.html   |  10 +-
 .../collection-moderators-list.component.html |   3 +-
 ...profile-date-created-filter.component.html |   2 +-
 .../my-profile-funder-filter.component.html   |   2 +-
 ...-profile-institution-filter.component.html |   2 +-
 .../my-profile-license-filter.component.html  |   2 +-
 ...e-part-of-collection-filter.component.html |   2 +-
 .../my-profile-provider-filter.component.html |   2 +-
 ...rofile-resource-type-filter.component.html |   2 +-
 .../my-profile-subject-filter.component.html  |   2 +-
 .../my-profile-resources.component.html       |  14 +-
 .../preprints-creators-filter.component.html  |   2 +-
 ...eprints-date-created-filter.component.html |   2 +-
 ...reprints-institution-filter.component.html |   2 +-
 .../preprints-license-filter.component.html   |   2 +-
 .../preprints-subject-filter.component.html   |   2 +-
 .../preprints-resources.component.html        |   6 +-
 .../contributors/contributors.component.html  |   4 +-
 .../edit-file-metadata-dialog.component.html  |   4 +-
 .../project/settings/settings.component.html  | 140 ++++++++--------
 .../project/settings/settings.component.ts    |   2 -
 .../creators/creators-filter.component.html   |   2 +-
 .../date-created-filter.component.html        |   2 +-
 .../funder/funder-filter.component.html       |   2 +-
 .../institution-filter.component.html         |   2 +-
 .../license-filter.component.html             |   2 +-
 .../part-of-collection-filter.component.html  |   2 +-
 .../provider-filter.component.html            |   2 +-
 .../resource-type-filter.component.html       |   2 +-
 .../subject/subject-filter.component.html     |   2 +-
 .../resources/resources.component.html        |  14 +-
 .../profile-settings.component.html           |   1 -
 .../add-contributor-item.component.html       |   4 +-
 .../contributors-list.component.html          |   3 +-
 .../components/select/select.component.html   |   1 +
 .../components/select/select.component.ts     |   4 +-
 src/assets/styles/_variables.scss             |   1 +
 src/assets/styles/overrides/paginator.scss    |   6 -
 src/assets/styles/overrides/select.scss       | 155 +++---------------
 tsconfig.app.json                             |  15 +-
 41 files changed, 167 insertions(+), 268 deletions(-)

diff --git a/src/app/features/collections/components/collections-filters/collections-filters.component.html b/src/app/features/collections/components/collections-filters/collections-filters.component.html
index f504d2704..2602d55a8 100644
--- a/src/app/features/collections/components/collections-filters/collections-filters.component.html
+++ b/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"
diff --git a/src/app/features/collections/components/collections-main-content/collections-main-content.component.html b/src/app/features/collections/components/collections-main-content/collections-main-content.component.html
index 25c026fa1..e6cbb9b46 100644
--- a/src/app/features/collections/components/collections-main-content/collections-main-content.component.html
+++ b/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"
diff --git a/src/app/features/moderation/components/collection-moderators-list/collection-moderators-list.component.html b/src/app/features/moderation/components/collection-moderators-list/collection-moderators-list.component.html
index 591d85b4f..4b5556514 100644
--- a/src/app/features/moderation/components/collection-moderators-list/collection-moderators-list.component.html
+++ b/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>
diff --git a/src/app/features/my-profile/components/filters/my-profile-date-created-filter/my-profile-date-created-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-date-created-filter/my-profile-date-created-filter.component.html
index b6188ece4..92dc43d8e 100644
--- a/src/app/features/my-profile/components/filters/my-profile-date-created-filter/my-profile-date-created-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-funder-filter/my-profile-funder-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-funder-filter/my-profile-funder-filter.component.html
index f2bba5e1f..2b0a6b590 100644
--- a/src/app/features/my-profile/components/filters/my-profile-funder-filter/my-profile-funder-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-institution-filter/my-profile-institution-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-institution-filter/my-profile-institution-filter.component.html
index 0f59afc86..a64e45f99 100644
--- a/src/app/features/my-profile/components/filters/my-profile-institution-filter/my-profile-institution-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-license-filter/my-profile-license-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-license-filter/my-profile-license-filter.component.html
index ce0d34b4d..026184a1d 100644
--- a/src/app/features/my-profile/components/filters/my-profile-license-filter/my-profile-license-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-part-of-collection-filter/my-profile-part-of-collection-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-part-of-collection-filter/my-profile-part-of-collection-filter.component.html
index cd1ea9e8c..f02cd33d8 100644
--- a/src/app/features/my-profile/components/filters/my-profile-part-of-collection-filter/my-profile-part-of-collection-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-provider-filter/my-profile-provider-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-provider-filter/my-profile-provider-filter.component.html
index 3d299cdde..8ecff8f7d 100644
--- a/src/app/features/my-profile/components/filters/my-profile-provider-filter/my-profile-provider-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-resource-type-filter/my-profile-resource-type-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-resource-type-filter/my-profile-resource-type-filter.component.html
index d001451ad..1ee9c515d 100644
--- a/src/app/features/my-profile/components/filters/my-profile-resource-type-filter/my-profile-resource-type-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/filters/my-profile-subject-filter/my-profile-subject-filter.component.html b/src/app/features/my-profile/components/filters/my-profile-subject-filter/my-profile-subject-filter.component.html
index a33f1f7af..a9f0a9f3e 100644
--- a/src/app/features/my-profile/components/filters/my-profile-subject-filter/my-profile-subject-filter.component.html
+++ b/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"
diff --git a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html
index 1daff2552..c80e9800d 100644
--- a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html
+++ b/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 {
diff --git a/src/app/features/preprints/components/filters/preprints-creators-filter/preprints-creators-filter.component.html b/src/app/features/preprints/components/filters/preprints-creators-filter/preprints-creators-filter.component.html
index 43e89df69..a7c35c8a8 100644
--- a/src/app/features/preprints/components/filters/preprints-creators-filter/preprints-creators-filter.component.html
+++ b/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"
diff --git a/src/app/features/preprints/components/filters/preprints-date-created-filter/preprints-date-created-filter.component.html b/src/app/features/preprints/components/filters/preprints-date-created-filter/preprints-date-created-filter.component.html
index b6188ece4..92dc43d8e 100644
--- a/src/app/features/preprints/components/filters/preprints-date-created-filter/preprints-date-created-filter.component.html
+++ b/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"
diff --git a/src/app/features/preprints/components/filters/preprints-institution-filter/preprints-institution-filter.component.html b/src/app/features/preprints/components/filters/preprints-institution-filter/preprints-institution-filter.component.html
index 0f59afc86..a64e45f99 100644
--- a/src/app/features/preprints/components/filters/preprints-institution-filter/preprints-institution-filter.component.html
+++ b/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"
diff --git a/src/app/features/preprints/components/filters/preprints-license-filter/preprints-license-filter.component.html b/src/app/features/preprints/components/filters/preprints-license-filter/preprints-license-filter.component.html
index ce0d34b4d..026184a1d 100644
--- a/src/app/features/preprints/components/filters/preprints-license-filter/preprints-license-filter.component.html
+++ b/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"
diff --git a/src/app/features/preprints/components/filters/preprints-subject/preprints-subject-filter.component.html b/src/app/features/preprints/components/filters/preprints-subject/preprints-subject-filter.component.html
index a33f1f7af..a9f0a9f3e 100644
--- a/src/app/features/preprints/components/filters/preprints-subject/preprints-subject-filter.component.html
+++ b/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"
diff --git a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html
index e90f3badd..568041e25 100644
--- a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html
+++ b/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)"
         />
diff --git a/src/app/features/project/contributors/contributors.component.html b/src/app/features/project/contributors/contributors.component.html
index 581e756be..aba7a8374 100644
--- a/src/app/features/project/contributors/contributors.component.html
+++ b/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"
diff --git a/src/app/features/project/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html b/src/app/features/project/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html
index a1f9f129c..9abef56b5 100644
--- a/src/app/features/project/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html
+++ b/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"
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index 6209cad4a..3e005145e 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -1,89 +1,87 @@
 <section class="flex flex-column flex-1">
   <osf-sub-header [title]="'navigation.project.settings' | translate" />
 
-  <div class="flex-column flex flex-1 w-full">
-    <p-tabpanels role="tablist" class="flex flex-column gap-4 flex-1 w-full bg-white">
-      <osf-settings-project-form-card
-        (submitForm)="submitForm($event)"
-        (deleteProject)="deleteProject()"
-        [formGroup]="projectForm"
-        [projectDetails]="projectDetails()"
-      />
+  <div class="flex flex-column flex-1 w-full bg-white py-4 px-3 md:px-5 xl:px-4">
+    <osf-settings-project-form-card
+      (submitForm)="submitForm($event)"
+      (deleteProject)="deleteProject()"
+      [formGroup]="projectForm"
+      [projectDetails]="projectDetails()"
+    />
 
-      <osf-settings-storage-location-card
-        [location]="'United States'"
-        [locationText]="'Storage location cannot be changed after project is created.'"
-      ></osf-settings-storage-location-card>
+    <osf-settings-storage-location-card
+      [location]="'United States'"
+      [locationText]="'Storage location cannot be changed after project is created.'"
+    ></osf-settings-storage-location-card>
 
-      <osf-settings-view-only-links-card
-        [tableData]="viewOnlyLinks()"
-        [isLoading]="isViewOnlyLinksLoading()"
-        (deleteTableItem)="deleteLinkItem($event)"
-      />
+    <osf-settings-view-only-links-card
+      [tableData]="viewOnlyLinks()"
+      [isLoading]="isViewOnlyLinksLoading()"
+      (deleteTableItem)="deleteLinkItem($event)"
+    />
 
-      <osf-settings-access-requests-card
-        (accessRequestChange)="onAccessRequestChange($event)"
-        [accessRequest]="accessRequest()"
-      />
+    <osf-settings-access-requests-card
+      (accessRequestChange)="onAccessRequestChange($event)"
+      [accessRequest]="accessRequest()"
+    />
 
-      <osf-settings-wiki-card
-        (wikiChangeEmit)="onWikiRequestChange($event)"
-        (anyoneCanEditWikiEmitValue)="onAnyoneCanEditWikiRequestChange($event)"
-        [wikiEnabled]="wikiEnabled()"
-        [anyoneCanEditWiki]="anyoneCanEditWiki()"
-        [title]="title()"
-      />
+    <osf-settings-wiki-card
+      (wikiChangeEmit)="onWikiRequestChange($event)"
+      (anyoneCanEditWikiEmitValue)="onAnyoneCanEditWikiRequestChange($event)"
+      [wikiEnabled]="wikiEnabled()"
+      [anyoneCanEditWiki]="anyoneCanEditWiki()"
+      [title]="title()"
+    />
 
-      <osf-settings-commenting-card
-        (anyoneCanCommentChange)="onAnyoneCanCommentRequestChange($event)"
-        [anyoneCanComment]="anyoneCanComment()"
-      />
+    <osf-settings-commenting-card
+      (anyoneCanCommentChange)="onAnyoneCanCommentRequestChange($event)"
+      [anyoneCanComment]="anyoneCanComment()"
+    />
 
-      <osf-project-setting-notifications
-        (notificationEmitValue)="onNotificationRequestChange($event)"
-        [title]="title()"
-        [notifications]="notifications()"
-      />
+    <osf-project-setting-notifications
+      (notificationEmitValue)="onNotificationRequestChange($event)"
+      [title]="title()"
+      [notifications]="notifications()"
+    />
 
-      <osf-settings-redirect-link
-        (redirectUrlDataChange)="onRedirectUrlDataRequestChange($event)"
-        [redirectUrlDataInput]="redirectUrlData()"
-      />
+    <osf-settings-redirect-link
+      (redirectUrlDataChange)="onRedirectUrlDataRequestChange($event)"
+      [redirectUrlDataInput]="redirectUrlData()"
+    />
 
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate }}</h3>
+    <p-card>
+      <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate }}</h3>
 
-        <p>{{ 'myProjects.settings.projectsCanBeAffiliated' | translate }}</p>
+      <p>{{ 'myProjects.settings.projectsCanBeAffiliated' | translate }}</p>
 
-        <ol class="list-disc ml-5" role="list">
-          <li class="list-disc">{{ 'myProjects.settings.institutionalLogos' | translate }}</li>
-          <li class="list-disc">{{ 'myProjects.settings.publicProjectsToBeDiscoverable' | translate }}</li>
-          <li class="list-disc">{{ 'myProjects.settings.singleSignInToTHeOSF' | translate }}</li>
-          <li class="list-disc">
-            <a href="https://help.osf.io/article/406-faqs-home-page" target="_blank">{{
-              'myProjects.settings.faq' | translate
-            }}</a>
-          </li>
-        </ol>
+      <ol class="list-disc ml-5" role="list">
+        <li class="list-disc">{{ 'myProjects.settings.institutionalLogos' | translate }}</li>
+        <li class="list-disc">{{ 'myProjects.settings.publicProjectsToBeDiscoverable' | translate }}</li>
+        <li class="list-disc">{{ 'myProjects.settings.singleSignInToTHeOSF' | translate }}</li>
+        <li class="list-disc">
+          <a href="https://help.osf.io/article/406-faqs-home-page" target="_blank">{{
+            'myProjects.settings.faq' | translate
+          }}</a>
+        </li>
+      </ol>
 
-        @if (affiliations.length > 0) {
-          <div class="flex flex-column gap-3 w-full mt-5">
-            @for (affiliation of affiliations; track $index) {
-              <div
-                class="flex justify-content-between align-items-center w-full border-bottom-1 border-gray-300 pb-2 pr-2 sm:pr-4"
-              >
-                <div class="flex align-items-center gap-3">
-                  <img ngSrc="assets/images/cos-shield.svg" alt="cos-shield" width="44" height="44" />
+      @if (affiliations.length > 0) {
+        <div class="flex flex-column gap-3 w-full mt-5">
+          @for (affiliation of affiliations; track $index) {
+            <div
+              class="flex justify-content-between align-items-center w-full border-bottom-1 border-gray-300 pb-2 pr-2 sm:pr-4"
+            >
+              <div class="flex align-items-center gap-3">
+                <img ngSrc="assets/images/cos-shield.svg" alt="cos-shield" width="44" height="44" />
 
-                  <p>{{ affiliation }}</p>
-                </div>
-
-                <p-button class="danger-icon-btn" icon="fas fa-trash" severity="danger" text></p-button>
+                <p>{{ affiliation }}</p>
               </div>
-            }
-          </div>
-        }
-      </p-card>
-    </p-tabpanels>
+
+              <p-button class="danger-icon-btn" icon="fas fa-trash" severity="danger" text></p-button>
+            </div>
+          }
+        </div>
+      }
+    </p-card>
   </div>
 </section>
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
index ca427aa0e..98c68457f 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -4,7 +4,6 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
-import { TabPanels } from 'primeng/tabs';
 
 import { map, of } from 'rxjs';
 
@@ -55,7 +54,6 @@ import { UpdateNodeRequestModel } from '@shared/models';
   imports: [
     TranslatePipe,
     SubHeaderComponent,
-    TabPanels,
     FormsModule,
     ReactiveFormsModule,
     Card,
diff --git a/src/app/features/search/components/filters/creators/creators-filter.component.html b/src/app/features/search/components/filters/creators/creators-filter.component.html
index 43e89df69..a7c35c8a8 100644
--- a/src/app/features/search/components/filters/creators/creators-filter.component.html
+++ b/src/app/features/search/components/filters/creators/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"
diff --git a/src/app/features/search/components/filters/date-created/date-created-filter.component.html b/src/app/features/search/components/filters/date-created/date-created-filter.component.html
index b6188ece4..92dc43d8e 100644
--- a/src/app/features/search/components/filters/date-created/date-created-filter.component.html
+++ b/src/app/features/search/components/filters/date-created/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"
diff --git a/src/app/features/search/components/filters/funder/funder-filter.component.html b/src/app/features/search/components/filters/funder/funder-filter.component.html
index f2bba5e1f..2b0a6b590 100644
--- a/src/app/features/search/components/filters/funder/funder-filter.component.html
+++ b/src/app/features/search/components/filters/funder/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"
diff --git a/src/app/features/search/components/filters/institution-filter/institution-filter.component.html b/src/app/features/search/components/filters/institution-filter/institution-filter.component.html
index 0f59afc86..a64e45f99 100644
--- a/src/app/features/search/components/filters/institution-filter/institution-filter.component.html
+++ b/src/app/features/search/components/filters/institution-filter/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"
diff --git a/src/app/features/search/components/filters/license-filter/license-filter.component.html b/src/app/features/search/components/filters/license-filter/license-filter.component.html
index ce0d34b4d..026184a1d 100644
--- a/src/app/features/search/components/filters/license-filter/license-filter.component.html
+++ b/src/app/features/search/components/filters/license-filter/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"
diff --git a/src/app/features/search/components/filters/part-of-collection-filter/part-of-collection-filter.component.html b/src/app/features/search/components/filters/part-of-collection-filter/part-of-collection-filter.component.html
index cd1ea9e8c..f02cd33d8 100644
--- a/src/app/features/search/components/filters/part-of-collection-filter/part-of-collection-filter.component.html
+++ b/src/app/features/search/components/filters/part-of-collection-filter/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"
diff --git a/src/app/features/search/components/filters/provider-filter/provider-filter.component.html b/src/app/features/search/components/filters/provider-filter/provider-filter.component.html
index 3d299cdde..8ecff8f7d 100644
--- a/src/app/features/search/components/filters/provider-filter/provider-filter.component.html
+++ b/src/app/features/search/components/filters/provider-filter/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"
diff --git a/src/app/features/search/components/filters/resource-type-filter/resource-type-filter.component.html b/src/app/features/search/components/filters/resource-type-filter/resource-type-filter.component.html
index d001451ad..1ee9c515d 100644
--- a/src/app/features/search/components/filters/resource-type-filter/resource-type-filter.component.html
+++ b/src/app/features/search/components/filters/resource-type-filter/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"
diff --git a/src/app/features/search/components/filters/subject/subject-filter.component.html b/src/app/features/search/components/filters/subject/subject-filter.component.html
index a33f1f7af..a9f0a9f3e 100644
--- a/src/app/features/search/components/filters/subject/subject-filter.component.html
+++ b/src/app/features/search/components/filters/subject/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"
diff --git a/src/app/features/search/components/resources/resources.component.html b/src/app/features/search/components/resources/resources.component.html
index 3bc257cb5..6c92b910c 100644
--- a/src/app/features/search/components/resources/resources.component.html
+++ b/src/app/features/search/components/resources/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
+        class="text-center"
+        [(ngModel)]="selectedTab"
+        [options]="tabsOptions"
+        optionLabel="label"
+        optionValue="value"
+      />
     }
     @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 {
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html
index ab8359f26..2ed8337dd 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.html
+++ b/src/app/features/settings/profile-settings/profile-settings.component.html
@@ -15,7 +15,6 @@
       @if (isMobile()) {
         <p-select
           class="w-full mb-4"
-          [class.mobile]="isMobile()"
           [options]="tabOptions"
           optionLabel="label"
           optionValue="value"
diff --git a/src/app/shared/components/contributors/add-contributor-item/add-contributor-item.component.html b/src/app/shared/components/contributors/add-contributor-item/add-contributor-item.component.html
index 813c8c1c0..af20bec0d 100644
--- a/src/app/shared/components/contributors/add-contributor-item/add-contributor-item.component.html
+++ b/src/app/shared/components/contributors/add-contributor-item/add-contributor-item.component.html
@@ -1,15 +1,17 @@
 <div>
   <p class="border-divider p-b-12 m-b-12">{{ contributor().fullName }}</p>
 
-  <div class="no-border-dropdown select-font-normal flex align-items-center p-b-12">
+  <div class="flex align-items-center p-b-12">
     <label class="label mr-2" [for]="`${contributor().id}-permission`">
       {{ 'project.contributors.table.headers.permissions' | translate }}:
     </label>
 
     <p-select
+      class="no-border-dropdown"
       [placeholder]="'project.contributors.permissionFilter' | translate"
       [options]="permissionsOptions"
       optionValue="value"
+      appendTo="body"
       [(ngModel)]="contributor().permission"
     >
       <ng-template #selectedItem let-selectedOption>
diff --git a/src/app/shared/components/contributors/contributors-list/contributors-list.component.html b/src/app/shared/components/contributors/contributors-list/contributors-list.component.html
index 1453eaa9e..96aacf3c3 100644
--- a/src/app/shared/components/contributors/contributors-list/contributors-list.component.html
+++ b/src/app/shared/components/contributors/contributors-list/contributors-list.component.html
@@ -98,11 +98,12 @@ <h2>{{ 'project.contributors.curatorInfo.heading' | translate }}</h2>
           </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)]="contributor.permission"
             ></osf-select>
           </div>
diff --git a/src/app/shared/components/select/select.component.html b/src/app/shared/components/select/select.component.html
index 17a71494c..d89bf0914 100644
--- a/src/app/shared/components/select/select.component.html
+++ b/src/app/shared/components/select/select.component.html
@@ -1,5 +1,6 @@
 <p-select
   [class.w-full]="fullWidth()"
+  [class.no-border-dropdown]="noBorder()"
   [options]="options()"
   optionLabel="label"
   optionValue="value"
diff --git a/src/app/shared/components/select/select.component.ts b/src/app/shared/components/select/select.component.ts
index 6b658c9a4..035383241 100644
--- a/src/app/shared/components/select/select.component.ts
+++ b/src/app/shared/components/select/select.component.ts
@@ -20,6 +20,8 @@ export class SelectComponent {
   selectedValue = model.required<Primitive>();
   placeholder = input<string>('');
   appendTo = input<string | null>(null);
-  changeValue = output<Primitive>();
   fullWidth = input(false);
+  noBorder = input(false);
+
+  changeValue = output<Primitive>();
 }
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 0a452f422..5464fb342 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -143,6 +143,7 @@ $white-60: var(--white-60);
   --p-form-field-hover-border-color: var(--grey-1);
   --p-form-field-disabled-background: var(--white);
   --p-form-field-disabled-color: var(--grey-1);
+  --p-form-field-placeholder-color: var(--grey-1);
 
   // Stepper
   --stepper-step-background: var(--white);
diff --git a/src/assets/styles/overrides/paginator.scss b/src/assets/styles/overrides/paginator.scss
index 8fda3faa9..c6e868f0c 100644
--- a/src/assets/styles/overrides/paginator.scss
+++ b/src/assets/styles/overrides/paginator.scss
@@ -1,11 +1,5 @@
 .p-paginator {
   --p-paginator-gap: 0.75rem;
-  --p-select-overlay-color: var(--dark-blue-1);
-  --p-select-overlay-border-color: var(--grey-2);
-  --p-select-option-focus-background: var(--bg-blue-3);
-  --p-select-option-focus-color: var(--dark-blue-1);
-  --p-select-option-selected-focus-background: var(--bg-blue-2);
-  --p-select-option-selected-color: var(--dark-blue-1);
   --p-paginator-nav-button-background: var(--white);
   --p-paginator-nav-button-color: var(--dark-blue-1);
   --p-paginator-nav-button-border-radius: 0.25rem;
diff --git a/src/assets/styles/overrides/select.scss b/src/assets/styles/overrides/select.scss
index 4ed209c55..ab3dca05b 100644
--- a/src/assets/styles/overrides/select.scss
+++ b/src/assets/styles/overrides/select.scss
@@ -1,17 +1,11 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
-
 .p-select {
-  height: mix.rem(44px);
-  border: 1px solid var(--grey-2);
-  border-radius: mix.rem(8px);
-  outline: none;
-  font-size: mix.rem(16px);
-  color: var.$dark-blue-1;
-
-  .p-placeholder {
-    color: var.$grey-1;
-  }
+  font-size: 1rem;
+  --p-select-hover-border-color: var(--pr-blue-1);
+  --p-select-overlay-color: var(--dark-blue-1);
+  --p-select-overlay-border-color: var(--grey-2);
+  --p-select-dropdown-color: var(--grey-1);
+  --p-select-padding-y: 0.6rem;
+  --p-icon-size: 0.875rem;
 
   &.accordion-dropdown {
     border: none;
@@ -19,138 +13,29 @@
     min-width: 120px;
     width: max-content;
     max-width: 300px;
-    font-size: 1rem;
-  }
-
-  &:not(:disabled):hover {
-    border-color: var.$pr-blue-1;
-  }
-}
-
-.p-select-label {
-  @include mix.flex-align-center;
-  width: 100%;
-
-  &::placeholder {
-    color: var.$grey-1;
   }
 }
 
 .p-select-option {
-  color: var.$dark-blue-1;
-
-  span {
-    white-space: wrap;
-  }
-
-  &:hover {
-    background: var.$bg-blue-3;
-  }
-
-  &.p-select-option-selected {
-    background: var.$bg-blue-2;
-  }
-}
-
-.select-option-wrap {
-  .p-select-option {
-    white-space: wrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-  }
-}
-
-.p-select-header {
-  width: 100%;
-
-  .p-iconfield {
-    width: 100%;
-  }
-}
-
-.p-select.mobile {
-  .p-select-label {
-    justify-content: center;
-    padding-left: 2.6rem;
-    font-weight: 700;
-  }
+  --p-select-option-focus-background: var(--bg-blue-2);
+  --p-select-option-focus-background: var(--bg-blue-3);
+  --p-select-option-focus-color: var(--dark-blue-1);
+  --p-select-option-selected-focus-background: var(--bg-blue-2);
+  --p-select-option-selected-color: var(--dark-blue-1);
+  --p-select-option-color: var(--dark-blue-1);
+  white-space: wrap;
 }
 
 .no-border-dropdown {
-  .p-select-option {
-    span {
-      white-space: nowrap;
-    }
-  }
-
-  .p-select {
+  &.p-select {
+    --p-select-padding-y: 0;
+    --p-select-padding-x: 0;
+    --p-select-shadow: none;
+    font-size: 0.875rem;
     border: none;
-    box-shadow: none;
-    height: 2rem;
 
     .p-select-label {
-      padding: 0;
-      font-weight: 700;
-    }
-
-    .p-select-overlay {
-      position: absolute;
-      right: 0;
-      left: auto;
-    }
-  }
-}
-
-.select-font-normal {
-  &.no-border-dropdown {
-    --p-icon-size: 0.875rem;
-
-    .p-select {
-      .p-select-label {
-        font-weight: 400;
-      }
-    }
-  }
-}
-
-.filter {
-  .p-select {
-    .p-select-label {
-      font-weight: 400;
-      color: var.$dark-blue-1;
-      padding-right: 0.5rem;
-    }
-
-    .p-select-clear-icon {
-      right: 1rem;
-      margin-left: 0.5rem;
-    }
-  }
-}
-
-.dropdown-filter {
-  .p-select {
-    .p-select-clear-icon {
-      right: 2.2rem;
-    }
-  }
-}
-
-.centered-select {
-  .p-select {
-    .p-select-label {
-      justify-content: center;
-    }
-
-    .p-select-option {
-      justify-content: center;
+      white-space: nowrap;
     }
   }
 }
-
-.grey-placeholder {
-  .p-select .p-placeholder span {
-    color: var.$grey-1;
-  }
-}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 91d36267b..c4a1c3c28 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,15 +5,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": [],
-    "typeRoots": [
-      "src/@types",
-      "node_modules/@types"
-    ]
+    "typeRoots": ["src/@types", "node_modules/@types"]
   },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}
\ No newline at end of file
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

From 65cd232f91555c079b0a43b34f160a6122b3dae1 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 10:43:30 +0300
Subject: [PATCH 14/20] fix(panel menu): updated panel menu styles

---
 src/assets/styles/overrides/panel-menu.scss | 41 +++++++++------------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/assets/styles/overrides/panel-menu.scss b/src/assets/styles/overrides/panel-menu.scss
index 10ba82095..ec22b1476 100644
--- a/src/assets/styles/overrides/panel-menu.scss
+++ b/src/assets/styles/overrides/panel-menu.scss
@@ -1,25 +1,24 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
 .nav-menu {
   .p-panelmenu {
-    gap: mix.rem(4px);
+    --p-panelmenu-item-focus-background: var(--dark-blue-2);
 
     .nav-link {
-      color: var.$white;
-      gap: mix.rem(8px);
+      color: var(--white);
+      gap: 0.5rem;
       text-decoration: none;
-      padding: mix.rem(12px);
+      padding: 0.75rem;
       width: 100%;
 
       .nav-icon {
-        font-size: mix.rem(20px);
+        font-size: 1.25rem;
       }
     }
 
     .p-panelmenu-panel {
-      padding: 0;
-      background-color: transparent;
+      --p-panelmenu-panel-background: transparent;
+      --p-panelmenu-panel-padding: 0;
       border: none;
+      outline: none;
       cursor: pointer;
 
       .p-panelmenu-header-link {
@@ -27,28 +26,21 @@
       }
     }
 
-    .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover,
-    .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
-      background-color: transparent;
-    }
-
-    .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content,
-    .p-panelmenu-item.p-focus > .p-panelmenu-item-content {
-      background-color: var.$dark-blue-2;
-      border-radius: mix.rem(8px);
+    .p-panelmenu-item-content:focus-visible {
+      outline: none;
+      background-color: var(--dark-blue-2);
     }
 
     .p-panelmenu-submenu {
-      padding: 0;
-      margin-left: mix.rem(24px);
-      margin-top: mix.rem(8px);
+      --p-panelmenu-submenu-indent: 1.5rem;
+      margin-top: 0.5rem;
 
       .p-panelmenu-item {
-        border-left: 1px solid var.$grey-2;
-        padding: 0 0 mix.rem(4px) mix.rem(8px);
+        border-left: 1px solid var(--grey-2);
+        padding: 0 0 0.25rem 0.5rem;
 
         .nav-link {
-          height: mix.rem(40px);
+          height: 2.5rem;
         }
       }
     }
@@ -59,6 +51,7 @@
   .view-panel {
     height: 100%;
   }
+
   p-panel,
   .p-panel {
     height: 100%;

From 745d4a1bec06e06f66885c864c457d75f1036ab7 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 10:51:43 +0300
Subject: [PATCH 15/20] fix(drawer): updated drawer

---
 src/assets/styles/overrides/carousel.scss |  2 --
 src/assets/styles/overrides/drawer.scss   | 17 ++++++-----------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/assets/styles/overrides/carousel.scss b/src/assets/styles/overrides/carousel.scss
index 24c20c789..d3a306dbe 100644
--- a/src/assets/styles/overrides/carousel.scss
+++ b/src/assets/styles/overrides/carousel.scss
@@ -1,5 +1,3 @@
-@use "../variables" as var;
-
 .p-carousel {
   --p-carousel-indicator-width: 1rem;
   --p-carousel-indicator-height: 1rem;
diff --git a/src/assets/styles/overrides/drawer.scss b/src/assets/styles/overrides/drawer.scss
index 436d88c7c..db29254ea 100644
--- a/src/assets/styles/overrides/drawer.scss
+++ b/src/assets/styles/overrides/drawer.scss
@@ -1,17 +1,12 @@
-@use "../variables" as var;
-
 .p-drawer.p-drawer-active.p-drawer-left {
-  width: 100%;
-  background-color: var.$dark-blue-1;
-  padding-left: 1.6rem;
+  --p-drawer-background: var(--dark-blue-1);
+  --p-drawer-header-padding: 0;
+  --p-drawer-content-padding: 0;
   border: none;
+  padding-left: 1.5rem;
+  width: 100%;
 }
 
 .p-drawer-header {
-  height: 6.17rem;
-  padding: 0;
-}
-
-.p-drawer-content {
-  padding: 0;
+  height: 5.75rem;
 }

From 7b25bfe881e4b451282d4bd0798ba460865eed82 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 11:16:53 +0300
Subject: [PATCH 16/20] fix(input group addon): updated styles

---
 .../components/social/social.component.html   | 13 +++++++-----
 .../components/social/social.component.scss   |  3 +++
 .../profile-settings.component.html           |  4 ++--
 .../styles/overrides/input-group-addon.scss   | 20 ++++++-------------
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/app/features/settings/profile-settings/components/social/social.component.html b/src/app/features/settings/profile-settings/components/social/social.component.html
index 871624140..5c89b76a3 100644
--- a/src/app/features/settings/profile-settings/components/social/social.component.html
+++ b/src/app/features/settings/profile-settings/components/social/social.component.html
@@ -4,7 +4,7 @@
       @for (link of links.controls; track index; let index = $index) {
         <div
           [formGroupName]="index"
-          class="flex flex-column border-1 border-round-lg p-3 sm:p-5 grey-border-color row-gap-4"
+          class="flex flex-column row-gap-4 border-1 border-round-lg grey-border-color p-3 md:p-4 xl:p-5"
         >
           <div class="flex flex-row">
             <h2>
@@ -36,12 +36,15 @@ <h2>
             </div>
 
             <div class="w-full md:w-8">
-              <p class="font-light mb-1">
+              <p class="mb-1">
                 {{ 'settings.profileSettings.social.webAddress' | translate }}
               </p>
-              <p-inputgroup class="addon-input">
-                <p-inputgroup-addon>{{ getDomain(index) }} </p-inputgroup-addon>
-                <input pInputText placeholder="{{ getPlaceholder(index) }}" formControlName="webAddress" />
+
+              <p-inputgroup class="addon-input flex-wrap">
+                <p-inputgroup-addon class="border-1 surface-border md:border-0">
+                  {{ getDomain(index) }}
+                </p-inputgroup-addon>
+                <input pInputText [placeholder]="getPlaceholder(index)" formControlName="webAddress" />
               </p-inputgroup>
             </div>
           </div>
diff --git a/src/app/features/settings/profile-settings/components/social/social.component.scss b/src/app/features/settings/profile-settings/components/social/social.component.scss
index e69de29bb..956f2eea5 100644
--- a/src/app/features/settings/profile-settings/components/social/social.component.scss
+++ b/src/app/features/settings/profile-settings/components/social/social.component.scss
@@ -0,0 +1,3 @@
+.surface-border {
+  --p-surface-200: var(--grey-2);
+}
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html
index 2ed8337dd..2354e8fc3 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.html
+++ b/src/app/features/settings/profile-settings/profile-settings.component.html
@@ -11,10 +11,10 @@
       </p-tablist>
     }
 
-    <p-tabpanels class="p-3 sm:p-5 flex-1">
+    <p-tabpanels class="p-3 flex-1 md:p-5 xl:p-4">
       @if (isMobile()) {
         <p-select
-          class="w-full mb-4"
+          class="w-full text-center mb-4"
           [options]="tabOptions"
           optionLabel="label"
           optionValue="value"
diff --git a/src/assets/styles/overrides/input-group-addon.scss b/src/assets/styles/overrides/input-group-addon.scss
index 4c01a79ae..c100f5a9a 100644
--- a/src/assets/styles/overrides/input-group-addon.scss
+++ b/src/assets/styles/overrides/input-group-addon.scss
@@ -1,18 +1,10 @@
-@use "../variables" as var;
-
-.p-inputgroupaddon {
-  padding: 0 0 0 12px;
-  color: var.$dark-blue-1;
-  border: 1px solid var.$grey-2;
-  border-right-style: none;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  font-size: 16px;
-  min-width: auto;
-}
+.p-inputgroup {
+  .p-inputtext {
+    width: auto;
+  }
 
-@media (max-width: 300px) {
   .p-inputgroupaddon {
-    display: none;
+    --p-inputgroup-addon-color: var(--dark-blue-1);
+    font-size: 1rem;
   }
 }

From 830eaca1d76bf293bbc14886ad3cfe092c2d3a68 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 12:01:45 +0300
Subject: [PATCH 17/20] fix(iconfield): updated styles

---
 .../account-settings.component.scss           | 168 +++++++++---------
 .../developer-app-details.component.html      |  59 +++---
 .../developer-app-details.component.scss      |  58 +-----
 .../developer-app-details.component.ts        |  37 +---
 .../token-created-dialog.component.html       |   2 +-
 src/assets/styles/overrides/card.scss         |   7 +-
 src/assets/styles/overrides/iconfield.scss    |  14 --
 7 files changed, 122 insertions(+), 223 deletions(-)

diff --git a/src/app/features/settings/account-settings/account-settings.component.scss b/src/app/features/settings/account-settings/account-settings.component.scss
index 1164df561..9eb88126f 100644
--- a/src/app/features/settings/account-settings/account-settings.component.scss
+++ b/src/app/features/settings/account-settings/account-settings.component.scss
@@ -6,113 +6,113 @@
   flex-direction: column;
   flex: 1;
   color: var(--dark-blue-1);
+}
+
+.header {
+  display: flex;
+  flex: 1;
+  padding: 7.14rem 1.71rem 3.43rem 1.71rem;
+  background: var(--gradient-1);
+
+  h1 {
+    margin-left: 0.85rem;
+  }
+
+  p-button {
+    margin-left: auto;
+  }
+
+  i {
+    color: var(--dark-blue-1);
+    font-size: 2.6rem;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.7rem;
+  padding: 1.7rem;
+  background: var.$white;
+}
 
-  .header {
+.account-setting {
+  border: 1px solid var.$grey-2;
+  padding: 1.7rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.7rem;
+  border-radius: 0.5rem;
+  font-weight: 400;
+  text-transform: none;
+
+  &-link {
+    font-weight: 600;
+  }
+
+  &-radio-group {
     display: flex;
     flex: 1;
-    padding: 7.14rem 1.71rem 3.43rem 1.71rem;
-    background: var(--gradient-1);
+    gap: 4rem;
+  }
 
-    h1 {
-      margin-left: 0.85rem;
-    }
+  &-radio-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 
-    p-button {
-      margin-left: auto;
-    }
+  &-content {
+    display: flex;
+  }
 
-    i {
-      color: var(--dark-blue-1);
-      font-size: 2.6rem;
-    }
+  &-description {
+    line-height: 2rem;
+    text-transform: none;
+    font-weight: 400;
   }
 
-  .content {
+  &-action {
     display: flex;
-    flex-direction: column;
-    gap: 1.7rem;
-    padding: 1.7rem;
-    background: var.$white;
+    justify-content: flex-end;
   }
 
-  .account-setting {
-    border: 1px solid var.$grey-2;
-    padding: 1.7rem;
+  &-emails {
     display: flex;
     flex-direction: column;
     gap: 1.7rem;
-    border-radius: 0.5rem;
-    font-weight: 400;
-    text-transform: none;
-
-    &-link {
-      font-weight: 600;
-    }
-
-    &-radio-group {
-      display: flex;
-      flex: 1;
-      gap: 4rem;
-    }
-
-    &-radio-item {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
+  }
 
-    &-content {
-      display: flex;
-    }
+  &-select {
+    width: 50%;
+  }
 
-    &-description {
-      line-height: 2rem;
-      text-transform: none;
-      font-weight: 400;
-    }
+  &-email {
+    display: flex;
+    gap: 2rem;
+    align-items: start;
 
-    &-action {
-      display: flex;
-      justify-content: flex-end;
+    &__title {
+      min-width: 10rem;
     }
 
-    &-emails {
+    &--readonly {
       display: flex;
-      flex-direction: column;
-      gap: 1.7rem;
-    }
-
-    &-select {
-      width: 50%;
+      align-items: center;
+      border: 1px solid var.$grey-2;
+      padding: 0.285rem 0.85rem;
+      border-radius: 0.285rem;
+
+      i {
+        color: var.$dark-blue-1;
+        font-size: 0.7rem;
+        margin-left: 0.7rem;
+      }
     }
 
-    &-email {
+    &__value {
       display: flex;
-      gap: 2rem;
-      align-items: start;
-
-      &__title {
-        min-width: 10rem;
-      }
-
-      &--readonly {
-        display: flex;
-        align-items: center;
-        border: 1px solid var.$grey-2;
-        padding: 0.285rem 0.85rem;
-        border-radius: 0.285rem;
-
-        i {
-          color: var.$dark-blue-1;
-          font-size: 0.7rem;
-          margin-left: 0.7rem;
-        }
-      }
-
-      &__value {
-        display: flex;
-        gap: 0.428rem;
-      }
+      gap: 0.428rem;
     }
   }
 }
diff --git a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html
index c771b81a8..746951d9a 100644
--- a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html
+++ b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html
@@ -1,69 +1,61 @@
-<section class="content-container" [class.mobile]="isXSmall()">
-  <nav class="navigation-bar-container">
-    <a routerLink="/settings/developer-apps">
-      <i class="osf-icon-arrow-left inline"></i>
-      {{ 'settings.developerApps.details.navigation.back' | translate }}
+<section class="bg-white py-4 px-3 md:p-5 xl:p-4">
+  <nav class="flex align-items-center gap-2">
+    <osf-icon iconClass="fas fa-chevron-left fa-sm"></osf-icon>
+
+    <a routerLink="/settings/tokens" class="font-semibold">
+      {{ 'settings.tokens.details.navigation.back' | translate }}
     </a>
   </nav>
 
   @if (developerApp()) {
-    <section class="title-container" [class.mobile]="isXSmall()">
+    <section class="flex align-items-center justify-content-between mt-5">
       <h1>{{ developerApp()?.name }}</h1>
+
       <p-button
         [label]="'settings.developerApps.list.deleteButton' | translate"
-        [class.btn-full-width]="isXSmall()"
         severity="danger"
         (click)="deleteApp()"
       />
     </section>
 
-    <section class="cards-container" [class.mobile]="isXSmall()">
-      <p-card>
-        <section class="card-body">
+    <section class="flex flex-column gap-4 mt-4 md:mt-6">
+      <p-card class="no-padding-card">
+        <section class="p-3 md:p-4">
           <h2>
             {{ 'settings.developerApps.details.clientId.title' | translate }}
           </h2>
 
-          <p>
+          <p class="mt-4">
             {{ 'settings.developerApps.details.clientId.description' | translate }}
           </p>
 
-          <div class="inline-block relative">
-            <span class="copy-notification" [class.visible]="clientIdCopiedNotificationVisible()">
-              {{ 'settings.developerApps.messages.copied' | translate }}
-            </span>
+          <div class="mt-3 w-4">
             <p-iconfield iconPosition="right">
               <input type="text" pInputText readonly [value]="clientId()" />
-              <p-inputicon [cdkCopyToClipboard]="clientId()" (cdkCopyToClipboardCopied)="clientIdCopiedToClipboard()">
-                <i class="osf-icon-copy"></i>
+              <p-inputicon>
+                <osf-copy-button [copyItem]="clientId()"></osf-copy-button>
               </p-inputicon>
             </p-iconfield>
           </div>
         </section>
       </p-card>
 
-      <p-card>
-        <section class="card-body">
+      <p-card class="no-padding-card">
+        <section class="p-3 md:p-4">
           <h2>
             {{ 'settings.developerApps.details.clientSecret.title' | translate }}
           </h2>
 
-          <p>
+          <p class="mt-4">
             {{ 'settings.developerApps.details.clientSecret.description' | translate }}
           </p>
 
-          <section class="client-secret-container" [class.mobile]="isXSmall()">
+          <section class="flex flex-column gap-2 mt-3 md:flex-row">
             <div class="relative">
-              <span class="copy-notification" [class.visible]="clientSecretCopiedNotificationVisible()">
-                {{ 'settings.developerApps.messages.copied' | translate }}
-              </span>
               <p-iconfield iconPosition="right">
                 <input pInputText [value]="isClientSecretVisible() ? clientSecret() : hiddenClientSecret()" readonly />
-                <p-inputicon
-                  [cdkCopyToClipboard]="clientSecret()"
-                  (cdkCopyToClipboardCopied)="clientSecretCopiedToClipboard()"
-                >
-                  <i class="osf-icon-copy"></i>
+                <p-inputicon>
+                  <osf-copy-button [copyItem]="clientSecret()"></osf-copy-button>
                 </p-inputicon>
               </p-iconfield>
             </div>
@@ -79,20 +71,19 @@ <h2>
             />
           </section>
 
-          <section class="card-actions">
+          <section class="flex justify-content-end mt-4">
             <p-button
               [label]="'settings.developerApps.details.clientSecret.resetSecret' | translate"
-              [class.btn-half-width]="isXSmall()"
               (click)="resetClientSecret()"
             />
           </section>
         </section>
       </p-card>
 
-      <p-card>
-        <section class="card-body">
+      <p-card class="no-padding-card">
+        <section class="p-3 md:p-4">
           <h2>{{ 'settings.developerApps.form.editTitle' | translate }}</h2>
-          <osf-developer-app-add-edit-form [isEditMode]="true" [initialValues]="developerApp()!" />
+          <osf-developer-app-add-edit-form class="block mt-4" [isEditMode]="true" [initialValues]="developerApp()!" />
         </section>
       </p-card>
     </section>
diff --git a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.scss b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.scss
index 55b2d3a52..507eb8f27 100644
--- a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.scss
+++ b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.scss
@@ -1,57 +1,3 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
-
-.content-container {
-  padding: 1.7rem;
-  color: var.$dark-blue-1;
-  background-color: var.$white;
-
-  &.mobile {
-    padding: 1rem;
-  }
-
-  .navigation-bar-container {
-    margin-bottom: 1.7rem;
-  }
-
-  .title-container {
-    @include mix.flex-center-between;
-    margin-bottom: 3.4rem;
-
-    &.mobile {
-      @include mix.flex-column;
-      align-items: inherit;
-      gap: 1.7rem;
-    }
-  }
-
-  .cards-container {
-    @include mix.flex-column;
-    gap: 1.7rem;
-
-    .card-body {
-      h2 {
-        margin-bottom: 1.7rem;
-      }
-
-      p {
-        margin-bottom: 0.85rem;
-      }
-
-      .client-secret-container {
-        @include mix.flex-align-center;
-        gap: 0.85rem;
-        margin-bottom: 1.7rem;
-
-        &.mobile {
-          @include mix.flex-column;
-          align-items: start;
-        }
-      }
-
-      .card-actions {
-        @include mix.flex-center-right;
-      }
-    }
-  }
+.p-iconfield {
+  --p-icon-size: 1.5rem;
 }
diff --git a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.ts b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.ts
index c75a56da7..a98443fb3 100644
--- a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.ts
+++ b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.ts
@@ -9,14 +9,13 @@ import { IconField } from 'primeng/iconfield';
 import { InputIcon } from 'primeng/inputicon';
 import { InputText } from 'primeng/inputtext';
 
-import { map, of, switchMap, timer } from 'rxjs';
+import { map, of, switchMap } from 'rxjs';
 
-import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
+import { CopyButtonComponent, IconComponent } from '@osf/shared/components';
 import { CustomConfirmationService } from '@osf/shared/services';
 import { IS_XSMALL } from '@osf/shared/utils';
 
@@ -32,11 +31,10 @@ import { DeleteDeveloperApp, DeveloperAppsSelectors, GetDeveloperAppDetails, Res
     InputText,
     IconField,
     InputIcon,
-    CdkCopyToClipboard,
-    FormsModule,
-    ReactiveFormsModule,
     DeveloperAppAddEditFormComponent,
     TranslatePipe,
+    CopyButtonComponent,
+    IconComponent,
   ],
   templateUrl: './developer-app-details.component.html',
   styleUrl: './developer-app-details.component.scss',
@@ -45,7 +43,6 @@ import { DeleteDeveloperApp, DeveloperAppsSelectors, GetDeveloperAppDetails, Res
 })
 export class DeveloperAppDetailsComponent {
   private readonly customConfirmationService = inject(CustomConfirmationService);
-  private readonly destroyRef = inject(DestroyRef);
   private readonly activatedRoute = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly store = inject(Store);
@@ -60,8 +57,6 @@ export class DeveloperAppDetailsComponent {
   protected readonly isClientSecretVisible = signal(false);
   protected readonly clientSecret = computed<string>(() => this.developerApp()?.clientSecret ?? '');
   protected readonly hiddenClientSecret = computed<string>(() => '*'.repeat(this.clientSecret().length));
-  protected readonly clientSecretCopiedNotificationVisible = signal<boolean>(false);
-  protected readonly clientIdCopiedNotificationVisible = signal<boolean>(false);
 
   readonly clientId = toSignal(
     this.activatedRoute.params.pipe(
@@ -109,24 +104,4 @@ export class DeveloperAppDetailsComponent {
       onConfirm: () => this.actions.resetClientSecret(this.clientId()),
     });
   }
-
-  clientIdCopiedToClipboard(): void {
-    this.clientIdCopiedNotificationVisible.set(true);
-
-    timer(2500)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.clientIdCopiedNotificationVisible.set(false);
-      });
-  }
-
-  clientSecretCopiedToClipboard(): void {
-    this.clientSecretCopiedNotificationVisible.set(true);
-
-    timer(2500)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.clientSecretCopiedNotificationVisible.set(false);
-      });
-  }
 }
diff --git a/src/app/features/settings/tokens/components/token-created-dialog/token-created-dialog.component.html b/src/app/features/settings/tokens/components/token-created-dialog/token-created-dialog.component.html
index 442daea1b..60c92d057 100644
--- a/src/app/features/settings/tokens/components/token-created-dialog/token-created-dialog.component.html
+++ b/src/app/features/settings/tokens/components/token-created-dialog/token-created-dialog.component.html
@@ -9,7 +9,7 @@
   <div class="flex flex-column gap-2">
     <div class="p-inputgroup">
       <p-iconfield class="w-full" iconPosition="right">
-        <input class="overflow-ellipsis" pInputText [value]="tokenId()" readonly #tokenInput />
+        <input class="w-full overflow-ellipsis" pInputText [value]="tokenId()" readonly #tokenInput />
         <p-inputicon>
           <osf-copy-button [copyItem]="tokenId()"></osf-copy-button>
         </p-inputicon>
diff --git a/src/assets/styles/overrides/card.scss b/src/assets/styles/overrides/card.scss
index e430f4f4f..ba8032d3b 100644
--- a/src/assets/styles/overrides/card.scss
+++ b/src/assets/styles/overrides/card.scss
@@ -1,6 +1,3 @@
-@use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
-
 .p-card {
   border: 1px solid var(--grey-2);
   --p-card-shadow: none;
@@ -11,3 +8,7 @@
 .mobile .p-card .p-card-body {
   --p-card-body-padding: 0.85rem;
 }
+
+.no-padding-card {
+  --p-card-body-padding: 0;
+}
diff --git a/src/assets/styles/overrides/iconfield.scss b/src/assets/styles/overrides/iconfield.scss
index 7781e8f4b..e69de29bb 100644
--- a/src/assets/styles/overrides/iconfield.scss
+++ b/src/assets/styles/overrides/iconfield.scss
@@ -1,14 +0,0 @@
-@use "assets/styles/variables" as var;
-
-.p-iconfield {
-  display: inline-block;
-
-  .p-inputicon {
-    cursor: pointer;
-    color: var.$dark-blue-1;
-
-    i {
-      font-size: 1.2rem;
-    }
-  }
-}

From 59c3a8e67320ac37afe236c3c92d3841c16e9f3c Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 12:28:00 +0300
Subject: [PATCH 18/20] fix(datepicker): updated styles

---
 src/assets/styles/overrides/button.scss     |  1 -
 src/assets/styles/overrides/datepicker.scss | 57 ++++++++-------------
 2 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 47dfaaf65..cbd3f8fa1 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -1,4 +1,3 @@
-@use "../variables" as var;
 @use "../mixins" as mix;
 
 :root {
diff --git a/src/assets/styles/overrides/datepicker.scss b/src/assets/styles/overrides/datepicker.scss
index 346f7f0c2..6857cf56c 100644
--- a/src/assets/styles/overrides/datepicker.scss
+++ b/src/assets/styles/overrides/datepicker.scss
@@ -1,55 +1,38 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
 .p-datepicker {
   width: 100%;
+  --p-datepicker-input-icon-color: var(--grey-1);
 
   .p-datepicker-header {
-    .p-button {
-      background: none;
-      color: var.$grey-2;
-      padding: 0;
-    }
-
-    .p-button-icon-only {
-      width: auto;
-    }
-
-    .p-datepicker-title {
-      button {
-        font-size: 16px;
-        padding: 0;
-        color: var.$dark-blue-1;
-      }
-    }
+    --p-button-text-primary-color: var(--grey-1);
+    --p-datepicker-select-month-color: var(--dark-blue-1);
+    --p-datepicker-select-month-padding: 0;
+    --p-datepicker-date-hover-background: var(--bg-blue-3);
+    --p-datepicker-date-hover-color: var(--dark-blue-1);
+    --p-datepicker-select-year-padding: 0;
+    --p-datepicker-select-year-hover-background: var(--bg-blue-3);
+    --p-datepicker-select-year-hover-color: var(--dark-blue-1);
   }
 
-  .p-datepicker-day:hover {
-    background: var.$bg-blue-3;
+  .p-datepicker-title {
+    .p-datepicker-select-month,
+    .p-datepicker-select-year {
+      font-size: 1rem;
+    }
   }
 
   .p-datepicker-today > .p-datepicker-day {
-    background: none;
-    color: var.$pr-blue-1;
+    --p-datepicker-today-background: none;
+    --p-datepicker-today-color: var(--pr-blue-1);
     font-weight: 700;
 
     &:hover {
-      background: var.$pr-blue-2;
-      color: var.$white;
+      --p-datepicker-date-hover-background: var(--pr-blue-2);
+      --p-datepicker-date-hover-color: var(--white);
     }
   }
 
   .p-datepicker-day-selected {
-    background: var.$pr-blue-1;
-
-    &:hover {
-      background: var.$pr-blue-2;
-      color: var.$white;
-    }
-  }
-
-  .p-datepicker-today > .p-datepicker-day-selected {
-    background: var.$pr-blue-1;
-    color: var.$white;
+    --p-datepicker-date-hover-background: var(--pr-blue-2);
+    --p-datepicker-date-hover-color: var(--white);
   }
 }

From d85dace5529099cb62c40e594d63431d8a110ec1 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 14:37:52 +0300
Subject: [PATCH 19/20] fix(styles): updated some styles

---
 .../forgot-password.component.html            |  1 -
 .../reset-password.component.scss             | 76 +++++++-------
 .../auth/pages/sign-up/sign-up.component.html |  1 -
 .../my-profile-search.component.html          |  6 +-
 .../filter-chips/filter-chips.component.scss  |  1 +
 .../resource-filters.component.ts             |  2 -
 .../resources/resources.component.html        |  5 +-
 .../resources/resources.component.ts          |  2 -
 src/app/features/search/search.component.html |  4 +-
 src/app/features/search/search.component.ts   |  2 -
 .../settings/addons/addons.component.ts       |  2 -
 ...developer-app-add-edit-form.component.html | 20 +---
 .../education-history-dialog.component.html   |  2 +-
 .../education-history.component.html          |  2 +-
 .../employment-history-dialog.component.html  |  2 +-
 .../employment-history.component.html         |  4 +-
 .../resource-card.component.html              |  4 +-
 src/assets/styles/_variables.scss             |  4 +
 src/assets/styles/overrides/accordion.scss    | 98 ++++++-------------
 src/assets/styles/overrides/autocomplete.scss | 30 ------
 src/assets/styles/overrides/breadcrumbs.scss  |  5 +-
 .../styles/overrides/button-toggle.scss       |  6 +-
 src/assets/styles/overrides/input.scss        |  2 +-
 src/assets/styles/overrides/multiselect.scss  | 25 +----
 src/assets/styles/overrides/tree.scss         |  5 +-
 25 files changed, 97 insertions(+), 214 deletions(-)

diff --git a/src/app/features/auth/pages/forgot-password/forgot-password.component.html b/src/app/features/auth/pages/forgot-password/forgot-password.component.html
index 36f9242cc..e3d0a3001 100644
--- a/src/app/features/auth/pages/forgot-password/forgot-password.component.html
+++ b/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
diff --git a/src/app/features/auth/pages/reset-password/reset-password.component.scss b/src/app/features/auth/pages/reset-password/reset-password.component.scss
index 1bc67d621..0914a6af2 100644
--- a/src/app/features/auth/pages/reset-password/reset-password.component.scss
+++ b/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;
+}
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.html b/src/app/features/auth/pages/sign-up/sign-up.component.html
index 0fedd2814..8932e499b 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.html
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.html
@@ -46,7 +46,6 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
             pInputText
             formControlName="email"
             [placeholder]="'auth.common.emailPlaceholder' | translate"
-            autocomplete="off"
           />
         </div>
 
diff --git a/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html b/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html
index 85fa26ebc..4066a1f5e 100644
--- a/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html
+++ b/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 pt-6 px-4">
-  <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>
diff --git a/src/app/features/search/components/filter-chips/filter-chips.component.scss b/src/app/features/search/components/filter-chips/filter-chips.component.scss
index 1d02e27aa..e461f550b 100644
--- a/src/app/features/search/components/filter-chips/filter-chips.component.scss
+++ b/src/app/features/search/components/filter-chips/filter-chips.component.scss
@@ -2,6 +2,7 @@
 
 :host {
   display: flex;
+  align-items: baseline;
   flex-direction: column;
   gap: 0.4rem;
 
diff --git a/src/app/features/search/components/resource-filters/resource-filters.component.ts b/src/app/features/search/components/resource-filters/resource-filters.component.ts
index 412fbc3e1..c63ec60b3 100644
--- a/src/app/features/search/components/resource-filters/resource-filters.component.ts
+++ b/src/app/features/search/components/resource-filters/resource-filters.component.ts
@@ -1,7 +1,6 @@
 import { Store } from '@ngxs/store';
 
 import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
-import { AutoCompleteModule } from 'primeng/autocomplete';
 
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -27,7 +26,6 @@ import { ResourceFiltersOptionsSelectors } from '../filters/store';
     AccordionContent,
     AccordionHeader,
     AccordionPanel,
-    AutoCompleteModule,
     ReactiveFormsModule,
     CreatorsFilterComponent,
     DateCreatedFilterComponent,
diff --git a/src/app/features/search/components/resources/resources.component.html b/src/app/features/search/components/resources/resources.component.html
index 6c92b910c..2f10c2abf 100644
--- a/src/app/features/search/components/resources/resources.component.html
+++ b/src/app/features/search/components/resources/resources.component.html
@@ -20,9 +20,10 @@ <h3>0 results</h3>
 
   <div class="sorting-container">
     @if (isWeb()) {
-      <h3>Sort by:</h3>
+      <p>Sort by:</p>
+
       <p-select
-        class="no-border-dropdown font-bold"
+        class="no-border-dropdown font-bold ml-2"
         [options]="searchSortingOptions"
         optionLabel="label"
         optionValue="value"
diff --git a/src/app/features/search/components/resources/resources.component.ts b/src/app/features/search/components/resources/resources.component.ts
index 08b81b172..cfcb6142b 100644
--- a/src/app/features/search/components/resources/resources.component.ts
+++ b/src/app/features/search/components/resources/resources.component.ts
@@ -1,7 +1,6 @@
 import { Store } from '@ngxs/store';
 
 import { AccordionModule } from 'primeng/accordion';
-import { AutoCompleteModule } from 'primeng/autocomplete';
 import { Button } from 'primeng/button';
 import { DataViewModule } from 'primeng/dataview';
 import { Select } from 'primeng/select';
@@ -28,7 +27,6 @@ import { ResourceFiltersSelectors } from '../resource-filters/store';
     FormsModule,
     ResourceFiltersComponent,
     ReactiveFormsModule,
-    AutoCompleteModule,
     AccordionModule,
     TableModule,
     DataViewModule,
diff --git a/src/app/features/search/search.component.html b/src/app/features/search/search.component.html
index 197ee1001..e4f5cefb4 100644
--- a/src/app/features/search/search.component.html
+++ b/src/app/features/search/search.component.html
@@ -8,8 +8,8 @@
     />
   </div>
 
-  <div class="flex-column flex w-full pt-6 px-4">
-    <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
+  <div class="flex-column flex w-full pt-6">
+    <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1 px-3 md:px-5 xl:px-4">
       @if (isSmall()) {
         <p-tablist>
           @for (item of resourceTabOptions; track $index) {
diff --git a/src/app/features/search/search.component.ts b/src/app/features/search/search.component.ts
index 76ae3f23e..7741190a6 100644
--- a/src/app/features/search/search.component.ts
+++ b/src/app/features/search/search.component.ts
@@ -3,7 +3,6 @@ import { Store } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { AccordionModule } from 'primeng/accordion';
-import { AutoCompleteModule } from 'primeng/autocomplete';
 import { DataViewModule } from 'primeng/dataview';
 import { TableModule } from 'primeng/table';
 import { Tab, TabList, Tabs } from 'primeng/tabs';
@@ -42,7 +41,6 @@ import { GetResources, ResetSearchState, SearchSelectors, SetResourceTab, SetSea
     TabList,
     Tabs,
     TranslatePipe,
-    AutoCompleteModule,
     FormsModule,
     AccordionModule,
     TableModule,
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index d44b67c2e..2ed61313c 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { AutoCompleteModule } from 'primeng/autocomplete';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
 import { debounceTime, distinctUntilChanged } from 'rxjs';
@@ -43,7 +42,6 @@ import {
     TabPanel,
     TabPanels,
     SearchInputComponent,
-    AutoCompleteModule,
     AddonCardListComponent,
     SelectComponent,
     FormsModule,
diff --git a/src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.html b/src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.html
index cb939f07e..55785f2a8 100644
--- a/src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.html
+++ b/src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.html
@@ -3,13 +3,7 @@
     <label for="app-name">
       {{ 'settings.developerApps.form.appName' | translate }}
     </label>
-    <input
-      pInputText
-      id="app-name"
-      type="text"
-      autocomplete="off"
-      [formControlName]="DeveloperAppFormFormControls.AppName"
-    />
+    <input pInputText id="app-name" type="text" [formControlName]="DeveloperAppFormFormControls.AppName" />
   </div>
 
   <div class="flex flex-column">
@@ -20,7 +14,6 @@
       pInputText
       id="proj-homepage-url"
       type="url"
-      autocomplete="off"
       [formControlName]="DeveloperAppFormFormControls.ProjectHomePageUrl"
     />
   </div>
@@ -29,13 +22,7 @@
     <label for="app-descr">
       {{ 'settings.developerApps.form.description' | translate }}
     </label>
-    <input
-      pInputText
-      id="app-descr"
-      type="text"
-      autocomplete="off"
-      [formControlName]="DeveloperAppFormFormControls.AppDescription"
-    />
+    <input pInputText id="app-descr" type="text" [formControlName]="DeveloperAppFormFormControls.AppDescription" />
   </div>
 
   <div class="flex flex-column">
@@ -45,13 +32,12 @@
     <input
       pInputText
       type="url"
-      autocomplete="off"
       id="auth-callback-url"
       [formControlName]="DeveloperAppFormFormControls.AuthorizationCallbackUrl"
     />
   </div>
 
-  <div class="flex justify-content-end gap-2">
+  <div class="flex justify-content-end gap-2 mt-3">
     @if (isEditMode()) {
       <p-button
         [ngClass]="isMobile() ? 'btn-half-width' : 'w-10rem btn-full-width'"
diff --git a/src/app/shared/components/education-history-dialog/education-history-dialog.component.html b/src/app/shared/components/education-history-dialog/education-history-dialog.component.html
index c52df1407..578a1e8ce 100644
--- a/src/app/shared/components/education-history-dialog/education-history-dialog.component.html
+++ b/src/app/shared/components/education-history-dialog/education-history-dialog.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-column">
-  <section class="card">
+  <section>
     <osf-education-history [education]="educationHistory()"></osf-education-history>
   </section>
 
diff --git a/src/app/shared/components/education-history/education-history.component.html b/src/app/shared/components/education-history/education-history.component.html
index c95b2f8e6..0286d01d8 100644
--- a/src/app/shared/components/education-history/education-history.component.html
+++ b/src/app/shared/components/education-history/education-history.component.html
@@ -1,4 +1,4 @@
-<p-accordion>
+<p-accordion class="card-accordion">
   @for (education of education(); track $index) {
     <p-accordion-panel value="{{ $index }}" class="accordion-panel">
       <p-accordion-header>
diff --git a/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html b/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html
index 179578c7c..7f1a9a6a1 100644
--- a/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html
+++ b/src/app/shared/components/employment-history-dialog/employment-history-dialog.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-column">
-  <section class="card">
+  <section>
     <osf-employment-history [employment]="employmentHistory()"></osf-employment-history>
   </section>
 
diff --git a/src/app/shared/components/employment-history/employment-history.component.html b/src/app/shared/components/employment-history/employment-history.component.html
index 2360ea9a7..d947bca41 100644
--- a/src/app/shared/components/employment-history/employment-history.component.html
+++ b/src/app/shared/components/employment-history/employment-history.component.html
@@ -1,6 +1,6 @@
-<p-accordion>
+<p-accordion class="card-accordion">
   @for (employment of employment(); track $index) {
-    <p-accordion-panel value="{{ $index }}" class="accordion-panel">
+    <p-accordion-panel [value]="$index">
       <p-accordion-header>
         <div class="flex flex-row w-full">
           <p>{{ employment.institution }}</p>
diff --git a/src/app/shared/components/resource-card/resource-card.component.html b/src/app/shared/components/resource-card/resource-card.component.html
index c8c33900a..cc22dcefc 100644
--- a/src/app/shared/components/resource-card/resource-card.component.html
+++ b/src/app/shared/components/resource-card/resource-card.component.html
@@ -1,7 +1,7 @@
-<div class="resource accordion-auto-height">
+<div class="resource">
   <p-accordion (onOpen)="onOpen()">
     <p-accordion-panel value="0">
-      <p-accordion-header class="flex flex-row column-gap-3 align-items-start">
+      <p-accordion-header class="flex flex-row column-gap-3 align-items-start p-0 pb-4">
         <div class="flex flex-column row-gap-3">
           @if (item().resourceType && item().resourceType === ResourceType.Agent) {
             <p class="type">User</p>
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 5464fb342..07bfec294 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -144,6 +144,10 @@ $white-60: var(--white-60);
   --p-form-field-disabled-background: var(--white);
   --p-form-field-disabled-color: var(--grey-1);
   --p-form-field-placeholder-color: var(--grey-1);
+  --p-list-option-color: var(--dark-blue-1);
+  --p-list-option-focus-color: var(--dark-blue-1);
+  --p-list-option-focus-background: var(--bg-blue-3);
+  --p-list-option-selected-background: var(--bg-blue-2);
 
   // Stepper
   --stepper-step-background: var(--white);
diff --git a/src/assets/styles/overrides/accordion.scss b/src/assets/styles/overrides/accordion.scss
index 126282060..9b5c6e78f 100644
--- a/src/assets/styles/overrides/accordion.scss
+++ b/src/assets/styles/overrides/accordion.scss
@@ -1,59 +1,32 @@
-@use "assets/styles/variables" as var;
-
 .p-accordion {
-  display: flex;
-  flex-direction: column;
+  --p-accordion-header-color: var(--dark-blue-1);
+  --p-accordion-header-font-weight: 700;
+  --p-accordion-header-padding: 1.5rem 0;
+  --p-accordion-panel-header-color: var(--grey-2);
+  --p-accordion-panel-border-color: var(--grey-2);
+  --p-accordion-content-padding: 0;
 
   .p-accordionheader {
-    height: 5.1rem;
-    color: var.$dark-blue-1;
-    font-weight: 700;
-    padding: 0;
-    display: flex;
-
     .p-iconwrapper {
       transform: rotate(180deg);
-
-      svg {
-        color: var.$grey-1;
-      }
-    }
-  }
-
-  .p-accordioncontent-content {
-    padding: 0;
-  }
-}
-
-.accordion-auto-height {
-  .p-accordion {
-    .p-accordionheader {
-      height: auto;
-    }
-    .p-accordionpanel {
-      border: none;
-    }
-    .p-accordioncontent-content {
-      padding: 1.2rem 0 0 0;
+      color: var(--grey-1);
     }
   }
 }
 
 .resource {
   .p-accordion {
+    --p-accordion-panel-border-width: 0;
+
     .p-accordionheader {
       .p-iconwrapper {
-        transform: rotate(180deg);
-        background: var.$bg-blue-3;
-        height: 2.3rem;
-        min-width: 2.3rem;
+        background: var(--bg-blue-3);
+        height: 2rem;
+        min-width: 2rem;
         border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
 
         svg {
-          color: var.$pr-blue-1;
+          color: var(--pr-blue-1);
         }
       }
     }
@@ -78,37 +51,26 @@
   }
 }
 
-.card {
-  .p-accordion {
-    .p-accordioncontent-content {
-      display: flex;
-      flex-direction: column;
-      row-gap: 1rem;
-      padding: 0.4rem 0 0.1rem 0;
-      border: none;
-    }
-
-    .p-accordionpanel {
-      border: none;
-    }
+.card-accordion.p-accordion {
+  --p-accordion-panel-border-width: 0;
+  --p-accordion-header-padding: 0;
 
-    .p-accordionheader {
-      height: 3.5rem;
-    }
+  .p-accordioncontent-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+    padding: 0.4rem 0 0.1rem 0;
+    border: none;
+  }
 
-    .p-iconwrapper {
-      transform: rotate(180deg);
-      background: var.$bg-blue-3;
-      height: 2.3rem;
-      min-width: 2.3rem;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  .p-iconwrapper {
+    background: var(--bg-blue-3);
+    height: 2rem;
+    min-width: 2rem;
+    border-radius: 50%;
 
-      svg {
-        color: var.$pr-blue-1;
-      }
+    svg {
+      color: var(--pr-blue-1);
     }
   }
 }
diff --git a/src/assets/styles/overrides/autocomplete.scss b/src/assets/styles/overrides/autocomplete.scss
index e3fbd660f..e69de29bb 100644
--- a/src/assets/styles/overrides/autocomplete.scss
+++ b/src/assets/styles/overrides/autocomplete.scss
@@ -1,30 +0,0 @@
-@use "assets/styles/variables" as var;
-
-.p-autocomplete {
-  height: 3.125rem;
-  border: 1px solid var(--grey-2);
-  border-radius: 0.57rem;
-  outline: none;
-
-  .p-inputtext {
-    border: none;
-    outline: none;
-    height: 3rem;
-    width: 100%;
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  .p-autocomplete-dropdown {
-    border: none;
-    background-color: transparent;
-  }
-
-  .p-icon {
-    color: var.$grey-1;
-  }
-}
-
-.p-autocomplete.p-inputwrapper {
-  width: 100%;
-}
diff --git a/src/assets/styles/overrides/breadcrumbs.scss b/src/assets/styles/overrides/breadcrumbs.scss
index c9d5d4657..648053762 100644
--- a/src/assets/styles/overrides/breadcrumbs.scss
+++ b/src/assets/styles/overrides/breadcrumbs.scss
@@ -1,9 +1,6 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
 .folders-breadcrumbs {
   .p-breadcrumb {
-    padding: 0 0 mix.rem(20px) 0;
+    padding: 0 0 1.25rem 0;
   }
 
   .p-breadcrumb-item > a {
diff --git a/src/assets/styles/overrides/button-toggle.scss b/src/assets/styles/overrides/button-toggle.scss
index db9126b9d..284045dde 100644
--- a/src/assets/styles/overrides/button-toggle.scss
+++ b/src/assets/styles/overrides/button-toggle.scss
@@ -1,17 +1,15 @@
-@use "assets/styles/mixins" as mix;
-
 .review-state-select {
   --p-togglebutton-color: var(--dark-blue-1);
   --p-togglebutton-background: transparent;
   --p-togglebutton-border-color: transparent;
   --p-togglebutton-checked-background: transparent;
   --p-togglebutton-checked-border-color: transparent;
-  --p-togglebutton-content-checked-shadow: 0 0 4px 0 var(--grey-outline);
+  --p-togglebutton-content-checked-shadow: 0 0 0.25rem 0 var(--grey-outline);
   --p-togglebutton-content-padding: 0.625rem 0.75rem;
   --p-togglebutton-hover-background: transparent;
 
   .p-togglebutton {
-    font-size: mix.rem(14px);
+    font-size: 0.875rem;
     opacity: 0.6;
 
     &:hover {
diff --git a/src/assets/styles/overrides/input.scss b/src/assets/styles/overrides/input.scss
index e7b6a5c6c..8c296e21c 100644
--- a/src/assets/styles/overrides/input.scss
+++ b/src/assets/styles/overrides/input.scss
@@ -1,5 +1,5 @@
 .p-inputtext {
-  --p-inputtext-padding-y: 0.6rem;
+  --p-inputtext-padding-y: 0.625rem;
   --p-inputtext-hover-border-color: var(--pr-blue-1);
 
   width: 100%;
diff --git a/src/assets/styles/overrides/multiselect.scss b/src/assets/styles/overrides/multiselect.scss
index 95e0d08e2..e8a5d1990 100644
--- a/src/assets/styles/overrides/multiselect.scss
+++ b/src/assets/styles/overrides/multiselect.scss
@@ -1,34 +1,11 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
-.p-multiselect {
-  border-color: var(--p-multiselect-border-color);
-}
-
 .p-multiselect-header {
   .p-inputtext {
-    height: mix.rem(38px);
+    --p-inputtext-padding-y: 0.4rem;
   }
 }
 
 .p-multiselect-option {
-  color: var.$dark-blue-1;
-
   span {
     white-space: wrap;
   }
-
-  &:hover {
-    background: var.$bg-blue-3;
-  }
-
-  &.p-multiselect-option-selected {
-    background: var.$bg-blue-2;
-  }
-}
-
-.p-multiselect-filter-container {
-  .p-iconfield {
-    display: flex;
-  }
 }
diff --git a/src/assets/styles/overrides/tree.scss b/src/assets/styles/overrides/tree.scss
index d1ff90558..c8edbddf1 100644
--- a/src/assets/styles/overrides/tree.scss
+++ b/src/assets/styles/overrides/tree.scss
@@ -1,6 +1,3 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
 .files-table {
   .p-tree {
     padding: 0;
@@ -21,7 +18,7 @@
 
     .p-tree-node-dragover {
       .files-table-row {
-        background: var.$bg-blue-3;
+        background: var(--bg-blue-3);
       }
     }
 

From 727a4f3743724c7b6d1e73bbe4ae052ef8b87c6e Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 27 Jun 2025 16:16:54 +0300
Subject: [PATCH 20/20] fix(menu): fixed hover state

---
 src/assets/styles/overrides/panel-menu.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/overrides/panel-menu.scss b/src/assets/styles/overrides/panel-menu.scss
index ec22b1476..cc3a64f4e 100644
--- a/src/assets/styles/overrides/panel-menu.scss
+++ b/src/assets/styles/overrides/panel-menu.scss
@@ -1,6 +1,6 @@
 .nav-menu {
   .p-panelmenu {
-    --p-panelmenu-item-focus-background: var(--dark-blue-2);
+    --p-panelmenu-item-focus-background: transparent;
 
     .nav-link {
       color: var(--white);
@@ -9,6 +9,11 @@
       padding: 0.75rem;
       width: 100%;
 
+      &:hover {
+        background-color: var(--dark-blue-2);
+        border-radius: 0.375rem;
+      }
+
       .nav-icon {
         font-size: 1.25rem;
       }