Fix/menu (CenterForOpenScience#261)

* fix(menu): added new items

* fix(menu): updated naming

* fix(menu): changed overview to discover and replaced some icons

* fix(menu): added margin

Author: nsemets

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