Fix/menu

src/app/core/constants/nav-items.constant.ts

@@ -394,14 +394,14 @@ export const MENU_ITEMS: MenuItem[] = [
     visible: false,
     routerLink: null,
     routerLinkActiveOptions: { exact: false },
-    styleClass: 'mt-5',
+    styleClass: 'my-5',
   },
   {
     id: 'log-out',
     label: 'navigation.logOut',
     visible: false,
     routerLink: null,
     routerLinkActiveOptions: { exact: false },
-    styleClass: 'mt-5',
+    styleClass: 'my-5',
   },
 ];

src/app/features/home/pages/dashboard/dashboard.component.html

@@ -34,12 +34,14 @@
     />
   </div>
 
-  <div class="public-projects-container flex flex-row pt-6 pb-4 px-3 md:px-4 xl:py-6">
-    <i class="osf-icon-search"></i>
+  <div class="public-projects-container flex align-items-center flex-row pt-6 pb-4 px-3 md:px-4 xl:py-6">
+    <osf-icon class="mr-2" iconClass="fas fa-2xl fa-magnifying-glass"></osf-icon>
     <h1>{{ 'home.loggedIn.publicProjects.title' | translate }}</h1>
   </div>
 
-  <div class="latest-research-container flex flex-column py-6 px-3 md:px-4 xl:flex-row xl:justify-content-between">
+  <div
+    class="latest-research-container flex flex-column gap-4 py-6 px-3 md:px-4 xl:flex-row xl:justify-content-between"
+  >
     <div>
       <h1>{{ 'home.loggedIn.latestResearch.title' | translate }}</h1>
       <p class="m-t-12">{{ 'home.loggedIn.latestResearch.subtitle' | translate }}</p>
@@ -48,7 +50,7 @@ <h1>{{ 'home.loggedIn.latestResearch.title' | translate }}</h1>
     <p-button routerLink="/preprints" [label]="'home.loggedIn.latestResearch.button' | translate" severity="success" />
   </div>
 
-  <div class="hosting-container flex flex-column py-6 px-3 md:px-4 xl:flex-row xl:justify-content-between">
+  <div class="hosting-container flex flex-column gap-4 py-6 px-3 md:px-4 xl:flex-row xl:justify-content-between">
     <div class="text-container">
       <h1>{{ 'home.loggedIn.hosting.title' | translate }}</h1>
       <p class="m-t-12">{{ 'home.loggedIn.hosting.subtitle' | translate }}</p>

src/app/features/home/pages/dashboard/dashboard.component.scss

@@ -1,5 +1,3 @@
-@use "assets/styles/mixins" as mix;
-
 :host {
   display: flex;
   flex-direction: column;
@@ -20,20 +18,12 @@
 
 .public-projects-container {
   background-color: var(--gradient-1);
-
-  .osf-icon-search {
-    color: var(--dark-blue-1);
-    font-size: mix.rem(32px);
-    margin-right: mix.rem(12px);
-  }
 }
 
 .latest-research-container {
   background-color: var(--bg-blue-3);
-  row-gap: mix.rem(24px);
 }
 
 .hosting-container {
   background-color: var(--bg-blue-2);
-  row-gap: mix.rem(24px);
 }

src/app/features/home/pages/dashboard/dashboard.component.ts

@@ -16,7 +16,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { CreateProjectDialogComponent } from '@osf/features/my-projects/components';
 import { AccountSettingsService } from '@osf/features/settings/account-settings/services';
-import { MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
+import { IconComponent, MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
 import { MY_PROJECTS_TABLE_PARAMS } from '@osf/shared/constants';
 import { SortOrder } from '@osf/shared/enums';
 import { IS_MEDIUM } from '@osf/shared/helpers';
@@ -27,7 +27,7 @@ import { ConfirmEmailComponent } from '../../components';
 
 @Component({
   selector: 'osf-dashboard',
-  imports: [RouterLink, Button, SubHeaderComponent, MyProjectsTableComponent, TranslatePipe],
+  imports: [RouterLink, Button, SubHeaderComponent, MyProjectsTableComponent, IconComponent, TranslatePipe],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',
   providers: [DialogService],

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

@@ -42,7 +42,7 @@ <h1>{{ currentUser()?.fullName }}</h1>
         <div class="flex flex-column gap-3 md:flex-row xl:gap-4">
           @if (currentUser()?.education?.length) {
             <div class="flex flex-row align-items-center gap-2">
-              <i class="osf-icon-institution"></i>
+              <i class="fas fa-landmark"></i>
               <h3 class="font-bold">
                 {{ currentUser()?.education?.[0]?.institution }}
               </h3>

src/app/features/preprints/components/preprint-services/preprint-services.component.html

@@ -8,7 +8,7 @@ <h2 class="text-2xl text-white">{{ 'preprints.services.title' | translate }}</h2
     @for (preprintProvider of preprintProvidersToAdvertise(); track preprintProvider.id) {
       <a
         class="preprint-provider-grid-item"
-        [routerLink]="[preprintProvider.id]"
+        [routerLink]="['/preprints', preprintProvider.id]"
         [style.background-image]="'url(' + preprintProvider.whiteWideImageUrl + ')'"
         [title]="preprintProvider.name"
       ></a>

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

@@ -1,11 +1,12 @@
 <p-card class="w-full">
   <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
+
   <div class="warning-message m-t-24 m-b-12">
-    <p-message severity="error">
-      <i class="osf-icon-warning-sign mr-2"></i>
-      Warning: Changing your permissions will prevent you from editing your draft.
+    <p-message icon="fas fa-circle-exclamation" severity="error">
+      {{ 'preprints.preprintContributorsWarning' | translate }}
     </p-message>
   </div>
+
   <osf-contributors-list
     class="w-full"
     [contributors]="contributors()"
@@ -22,9 +23,9 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
     <p-button
       class="w-full md:w-auto"
       styleClass="w-full"
-      label="Add Contributor By Search"
+      [label]="'preprints.addContributorBySearch' | translate"
       type="submit"
-      (click)="openAddContributorDialog()"
+      (onClick)="openAddContributorDialog()"
     ></p-button>
   </div>
 </p-card>

src/app/features/preprints/components/stepper/title-and-abstract-step/title-and-abstract-step.component.html

@@ -50,7 +50,7 @@ <h2>{{ 'preprints.preprintStepper.titleAndAbstract.title' | translate }}</h2>
     styleClass="w-full"
     [label]="'common.buttons.back' | translate"
     severity="info"
-    [routerLink]="['/preprints', 'overview', providerId(), 'discover']"
+    [routerLink]="['/preprints', providerId(), 'discover']"
   />
   <p-button
     class="w-6 md:w-9rem"

src/app/features/preprints/pages/landing/preprints-landing.component.html

@@ -65,13 +65,12 @@ <h1>{{ 'preprints.title' | translate }}</h1>
     <h2 class="text-2xl">{{ 'preprints.createServer.title' | translate }}</h2>
     <p class="mt-2">
       {{ 'preprints.createServer.description' | translate }}
-      <a class="font-bold" href="https://github.com/CenterForOpenScience/ember-osf-web" target="_blank">{{
-        'preprints.createServer.openSourceCode' | translate
-      }}</a>
+      <a class="font-bold" href="https://github.com/CenterForOpenScience/ember-osf-web" target="_blank">
+        {{ 'preprints.createServer.openSourceCode' | translate }}
+      </a>
       {{ 'preprints.createServer.and' | translate }}
-      <a class="font-bold" href="https://www.cos.io/product-roadmap" target="_blank">{{
-        'preprints.createServer.publicRoadmap' | translate
-      }}</a
+      <a class="font-bold" href="https://www.cos.io/product-roadmap" target="_blank">
+        {{ 'preprints.createServer.publicRoadmap' | translate }} </a
       >. {{ 'preprints.createServer.inputWelcome' | translate }}
     </p>
   </div>

src/app/features/preprints/preprints.routes.ts

@@ -36,24 +36,24 @@ export const preprintsRoutes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'overview',
+        redirectTo: 'discover',
       },
       {
-        path: 'overview',
+        path: 'discover',
         loadComponent: () =>
           import('@osf/features/preprints/pages/landing/preprints-landing.component').then(
             (c) => c.PreprintsLandingComponent
           ),
       },
       {
-        path: 'overview/:providerId',
+        path: ':providerId',
         loadComponent: () =>
           import('@osf/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component').then(
             (c) => c.PreprintProviderOverviewComponent
           ),
       },
       {
-        path: 'overview/:providerId/discover',
+        path: ':providerId/discover',
         loadComponent: () =>
           import('@osf/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component').then(
             (c) => c.PreprintProviderDiscoverComponent

src/app/features/project/analytics/components/view-duplicates/view-duplicates.component.html

@@ -16,18 +16,19 @@ <h3 class="mt-5 text-center">{{ 'project.overview.dialog.fork.noForksMessage' |
         @if (duplicate.currentUserPermissions.includes(UserPermissions.Read)) {
           <div class="duplicate-wrapper flex flex-column gap-3 p-3 sm:p-4">
             <div class="flex justify-content-between align-items-center">
-              <h2 class="flex gap-2">
-                <i [ngClass]="duplicate.public ? 'osf-icon-padlock-unlock' : 'osf-icon-padlock'"></i>
+              <h2 class="flex align-items-center gap-2">
+                <osf-icon [iconClass]="duplicate.public ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
                 {{ duplicate.title }}
               </h2>
+
               <div>
                 @if (duplicate.currentUserPermissions.includes(UserPermissions.Write)) {
                   <p-button
                     severity="contrast"
                     icon="fas fa-ellipsis-vertical"
                     raised
                     variant="outlined"
-                    (click)="componentActionMenu.toggle($event)"
+                    (onClick)="componentActionMenu.toggle($event)"
                   >
                   </p-button>
                 }

src/app/features/project/analytics/components/view-duplicates/view-duplicates.component.ts

@@ -9,7 +9,7 @@ import { PaginatorState } from 'primeng/paginator';
 
 import { map, of } from 'rxjs';
 
-import { DatePipe, NgClass } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -32,6 +32,7 @@ import {
 } from '@osf/features/registry/store/registry-overview';
 import {
   CustomPaginatorComponent,
+  IconComponent,
   LoadingSpinnerComponent,
   SubHeaderComponent,
   TruncatedTextComponent,
@@ -49,11 +50,11 @@ import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@shared/
     Button,
     Menu,
     TruncatedTextComponent,
-    NgClass,
     DatePipe,
     LoadingSpinnerComponent,
     RouterLink,
     CustomPaginatorComponent,
+    IconComponent,
   ],
   templateUrl: './view-duplicates.component.html',
   styleUrl: './view-duplicates.component.scss',

src/app/features/project/overview/components/linked-resources/linked-resources.component.html

@@ -17,17 +17,18 @@ <h2>{{ 'project.overview.linkedProjects.title' | translate }}</h2>
         @for (linkedResource of linkedResources(); track linkedResource.id) {
           <div class="linked-project-wrapper flex flex-column p-3 gap-3">
             <div class="flex justify-content-between align-items-center">
-              <h2 class="flex gap-2">
-                <i [ngClass]="linkedResource.public ? 'osf-icon-padlock-unlock' : 'osf-icon-padlock'"></i>
+              <h2 class="flex align-items-center gap-2">
+                <osf-icon [iconClass]="linkedResource.public ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
                 <a class="linked-project-title" [href]="'project/' + linkedResource.id">{{ linkedResource.title }}</a>
               </h2>
+
               <div>
                 <p-button
                   class="danger-icon-btn"
                   icon="fas fa-trash"
                   severity="danger"
                   text
-                  (click)="openDeleteResourceModal(linkedResource.id)"
+                  (onClick)="openDeleteResourceModal(linkedResource.id)"
                 >
                 </p-button>
               </div>

src/app/features/project/overview/components/linked-resources/linked-resources.component.ts

@@ -6,18 +6,17 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
-import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 
 import { DeleteNodeLinkDialogComponent, LinkResourceDialogComponent } from '@osf/features/project/overview/components';
-import { TruncatedTextComponent } from '@osf/shared/components';
+import { IconComponent, TruncatedTextComponent } from '@osf/shared/components';
 import { IS_XSMALL } from '@osf/shared/helpers';
 import { NodeLinksSelectors } from '@shared/stores';
 
 @Component({
   selector: 'osf-linked-resources',
-  imports: [Button, NgClass, Skeleton, TranslatePipe, TruncatedTextComponent],
+  imports: [Button, Skeleton, TranslatePipe, TruncatedTextComponent, IconComponent],
   templateUrl: './linked-resources.component.html',
   styleUrl: './linked-resources.component.scss',
   providers: [DialogService],

src/app/features/project/overview/components/overview-components/overview-components.component.html

@@ -19,18 +19,19 @@ <h2>{{ 'project.overview.components.title' | translate }}</h2>
         @for (component of components(); track component.id) {
           <div class="component-wrapper flex flex-column p-3 gap-3">
             <div class="flex justify-content-between align-items-center">
-              <h2 class="flex gap-2">
-                <i [ngClass]="component.public ? 'osf-icon-padlock-unlock' : 'osf-icon-padlock'"></i>
+              <h2 class="flex align-items-center gap-2">
+                <osf-icon [iconClass]="component.public ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
                 <a class="component-title" [href]="'project/' + component.id">{{ component.title }}</a>
               </h2>
+
               <div>
                 @if (component.currentUserPermissions.includes(UserPermissions.Write)) {
                   <p-button
                     severity="contrast"
                     icon="fas fa-ellipsis-vertical"
                     raised
                     variant="outlined"
-                    (click)="componentActionMenu.toggle($event)"
+                    (onClick)="componentActionMenu.toggle($event)"
                   >
                   </p-button>
                 }

src/app/features/project/overview/components/overview-components/overview-components.component.ts

@@ -7,12 +7,11 @@ import { DialogService } from 'primeng/dynamicdialog';
 import { Menu } from 'primeng/menu';
 import { Skeleton } from 'primeng/skeleton';
 
-import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
-import { TruncatedTextComponent } from '@osf/shared/components';
+import { IconComponent, TruncatedTextComponent } from '@osf/shared/components';
 import { ResourceType, UserPermissions } from '@osf/shared/enums';
 import { IS_XSMALL } from '@osf/shared/helpers';
 
@@ -22,7 +21,7 @@ import { DeleteComponentDialogComponent } from '../delete-component-dialog/delet
 
 @Component({
   selector: 'osf-project-components',
-  imports: [Button, Menu, Skeleton, TranslatePipe, TruncatedTextComponent, NgClass],
+  imports: [Button, Menu, Skeleton, TranslatePipe, TruncatedTextComponent, IconComponent],
   templateUrl: './overview-components.component.html',
   styleUrl: './overview-components.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/registries/components/registry-services/registry-services.component.html

@@ -8,7 +8,7 @@ <h2 class="text-2xl text-white">{{ 'registries.services.title' | translate }}</h
     @for (registryService of registryServices; track $index) {
       <a
         class="registry-service-item"
-        [routerLink]="[registryService.id]"
+        [routerLink]="['/registries', registryService.id]"
         [style.background-image]="'url(' + registryService.src + ')'"
         [title]="registryService.id"
       ></a>

src/app/features/registries/pages/my-registrations/my-registrations.component.scss

@@ -0,0 +1,3 @@
+:host {
+  flex: 1;
+}

src/app/features/registries/registries.routes.ts

@@ -31,11 +31,11 @@ export const registriesRoutes: Routes = [
         redirectTo: 'overview',
       },
       {
-        path: 'overview',
+        path: 'discover',
         loadComponent: () => import('@osf/features/registries/pages').then((c) => c.RegistriesLandingComponent),
       },
       {
-        path: 'overview/:name',
+        path: ':name',
         loadComponent: () =>
           import('@osf/features/registries/pages/registries-provider-search/registries-provider-search.component').then(
             (c) => c.RegistriesProviderSearchComponent

src/app/features/registry/components/registration-links-card/registration-links-card.component.html

@@ -1,12 +1,9 @@
 <p-card>
   @if (registrationData()) {
     <div class="flex gap-3 flex-column">
-      <div class="flex flex-wrap gap-2 w-full">
-        @if (registrationData().isPublic) {
-          <i class="osf-icon-padlock-unlock"></i>
-        } @else {
-          <i class="osf-icon-padlock"></i>
-        }
+      <div class="flex align-items-center flex-wrap gap-2 w-full">
+        <osf-icon [iconClass]="registrationData().isPublic ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
+
         <h2 class="align-self-center">
           {{ registrationData().title || 'project.registrations.card.noTitle' | translate }}
         </h2>

src/app/features/registry/components/registration-links-card/registration-links-card.component.ts

@@ -6,13 +6,14 @@ import { Card } from 'primeng/card';
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 
-import { LinkedNode, LinkedRegistration, RegistryComponentModel } from '@osf/features/registry/models';
-import { DataResourcesComponent, TruncatedTextComponent } from '@shared/components';
-import { RevisionReviewStates } from '@shared/enums';
+import { DataResourcesComponent, IconComponent, TruncatedTextComponent } from '@osf/shared/components';
+import { RevisionReviewStates } from '@osf/shared/enums';
+
+import { LinkedNode, LinkedRegistration, RegistryComponentModel } from '../../models';
 
 @Component({
   selector: 'osf-registration-links-card',
-  imports: [Card, Button, TranslatePipe, DatePipe, DataResourcesComponent, TruncatedTextComponent],
+  imports: [Card, Button, TranslatePipe, DatePipe, DataResourcesComponent, TruncatedTextComponent, IconComponent],
   templateUrl: './registration-links-card.component.html',
   styleUrl: './registration-links-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,