From 2ffb04ad5d0f73c3ebdd24b557243d2174b56734 Mon Sep 17 00:00:00 2001
From: Nazar Semets <nsemets@exoft.net>
Date: Wed, 21 May 2025 16:18:14 +0300
Subject: [PATCH 1/2] feat(toast): added toast

---
 src/app/app.component.html                    |  1 +
 src/app/app.component.ts                      |  4 ++-
 src/app/app.config.ts                         |  3 +-
 .../my-profile-resource-card.component.html   |  3 +-
 .../my-profile/my-profile.component.ts        |  1 -
 src/app/shared/components/index.ts            |  2 +-
 .../components/toast/toast.component.html     |  1 +
 .../components/toast/toast.component.scss     |  0
 .../components/toast/toast.component.spec.ts  | 22 ++++++++++++
 .../components/toast/toast.component.ts       | 12 +++++++
 src/app/shared/services/index.ts              |  3 ++
 src/app/shared/services/toast.service.ts      | 26 ++++++++++++++
 src/assets/styles/_base.scss                  |  4 ---
 src/assets/styles/_mixins.scss                |  3 +-
 src/assets/styles/overrides/toast.scss        | 34 +++++++++++++++++++
 src/assets/styles/styles.scss                 |  1 +
 16 files changed, 109 insertions(+), 11 deletions(-)
 create mode 100644 src/app/shared/components/toast/toast.component.html
 create mode 100644 src/app/shared/components/toast/toast.component.scss
 create mode 100644 src/app/shared/components/toast/toast.component.spec.ts
 create mode 100644 src/app/shared/components/toast/toast.component.ts
 create mode 100644 src/app/shared/services/index.ts
 create mode 100644 src/app/shared/services/toast.service.ts
 create mode 100644 src/assets/styles/overrides/toast.scss

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 67e7bd4cd..94a21db1e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
 <router-outlet />
+<osf-toast></osf-toast>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7ca737092..700f2af7b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,9 +5,11 @@ import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
 
+import { ToastComponent } from './shared';
+
 @Component({
   selector: 'osf-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ToastComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index b6d04d7a1..eca2ff44c 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -3,7 +3,7 @@ import { provideStore } from '@ngxs/store';
 
 import { TranslateModule } from '@ngx-translate/core';
 
-import { ConfirmationService } from 'primeng/api';
+import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 
 import { provideHttpClient } from '@angular/common/http';
@@ -38,6 +38,7 @@ export const appConfig: ApplicationConfig = {
     provideAnimations(),
     provideHttpClient(),
     ConfirmationService,
+    MessageService,
     importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
   ],
 };
diff --git a/src/app/features/my-profile/components/resources/components/resource-card/my-profile-resource-card.component.html b/src/app/features/my-profile/components/resources/components/resource-card/my-profile-resource-card.component.html
index abdacb37e..9d0040f19 100644
--- a/src/app/features/my-profile/components/resources/components/resource-card/my-profile-resource-card.component.html
+++ b/src/app/features/my-profile/components/resources/components/resource-card/my-profile-resource-card.component.html
@@ -13,8 +13,7 @@
             @if (item()?.resourceType === ResourceType.File && item()?.fileName) {
               <a class="title" [href]="item()?.id">{{ item()?.fileName }}</a>
             } @else if (item()?.title && item()?.title) {
-              @let id = item()?.id;
-              @let url = id ? '/my-projects/' + id.split('/')?.pop() + '/overview' : '';
+              @let url = item()?.id ? '/my-projects/' + item()?.id?.split('/')?.pop() + '/overview' : '';
               <a class="title" [routerLink]="url">{{ item()?.title }}</a>
             }
             @if (item()?.orcid) {
diff --git a/src/app/features/my-profile/my-profile.component.ts b/src/app/features/my-profile/my-profile.component.ts
index a8b541d79..76103752f 100644
--- a/src/app/features/my-profile/my-profile.component.ts
+++ b/src/app/features/my-profile/my-profile.component.ts
@@ -18,7 +18,6 @@ import { ResourceTab } from '@shared/entities/resource-card/resource-tab.enum';
 
 @Component({
   selector: 'osf-my-profile',
-  standalone: true,
   imports: [
     Button,
     DatePipe,
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 5a1785edf..7cceda6f9 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -7,5 +7,5 @@ export { PasswordInputHintComponent } from './password-input-hint/password-input
 export { PieChartComponent } from './pie-chart/pie-chart.component';
 export { SearchInputComponent } from './search-input/search-input.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
-export * from './view-only-table/view-only-table.component';
+export { ToastComponent } from './toast/toast.component';
 export * from './view-only-table/view-only-table.component';
diff --git a/src/app/shared/components/toast/toast.component.html b/src/app/shared/components/toast/toast.component.html
new file mode 100644
index 000000000..a1712e1dc
--- /dev/null
+++ b/src/app/shared/components/toast/toast.component.html
@@ -0,0 +1 @@
+<p-toast [baseZIndex]="2302" />
diff --git a/src/app/shared/components/toast/toast.component.scss b/src/app/shared/components/toast/toast.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/components/toast/toast.component.spec.ts b/src/app/shared/components/toast/toast.component.spec.ts
new file mode 100644
index 000000000..3cd9aaa66
--- /dev/null
+++ b/src/app/shared/components/toast/toast.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastComponent } from './toast.component';
+
+describe('ToastComponent', () => {
+  let component: ToastComponent;
+  let fixture: ComponentFixture<ToastComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToastComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ToastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/toast/toast.component.ts b/src/app/shared/components/toast/toast.component.ts
new file mode 100644
index 000000000..e91a8d330
--- /dev/null
+++ b/src/app/shared/components/toast/toast.component.ts
@@ -0,0 +1,12 @@
+import { ToastModule } from 'primeng/toast';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-toast',
+  imports: [ToastModule],
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToastComponent {}
diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts
new file mode 100644
index 000000000..ecd67f72f
--- /dev/null
+++ b/src/app/shared/services/index.ts
@@ -0,0 +1,3 @@
+export { FiltersOptionsService } from './filters-options.service';
+export { SearchService } from './search.service';
+export { ToastService } from './toast.service';
diff --git a/src/app/shared/services/toast.service.ts b/src/app/shared/services/toast.service.ts
new file mode 100644
index 000000000..155186c40
--- /dev/null
+++ b/src/app/shared/services/toast.service.ts
@@ -0,0 +1,26 @@
+import { MessageService } from 'primeng/api';
+
+import { inject, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  private messageService = inject(MessageService);
+
+  showSuccess(summary: string) {
+    this.messageService.add({ severity: 'success', summary });
+  }
+
+  showInfo(summary: string) {
+    this.messageService.add({ severity: 'info', summary });
+  }
+
+  showWarn(summary: string) {
+    this.messageService.add({ severity: 'warn', summary });
+  }
+
+  showError(summary: string) {
+    this.messageService.add({ severity: 'error', summary });
+  }
+}
diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index 13c4a5e92..7252c8db5 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -65,10 +65,6 @@
     @include mix.flex-center;
   }
 
-  button {
-    color: var.$white;
-  }
-
   dl {
     margin-bottom: 1.7rem;
     padding: 0;
diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss
index b78b2b1c3..af64dad0c 100644
--- a/src/assets/styles/_mixins.scss
+++ b/src/assets/styles/_mixins.scss
@@ -1,7 +1,8 @@
+@use "sass:math";
 @use "assets/styles/variables" as var;
 
 @function rem($px) {
-  @return ($px / var.$base-font-size) * 1rem;
+  @return math.div($px, var.$base-font-size) * 1rem;
 }
 
 @mixin flex-center {
diff --git a/src/assets/styles/overrides/toast.scss b/src/assets/styles/overrides/toast.scss
new file mode 100644
index 000000000..6641adb92
--- /dev/null
+++ b/src/assets/styles/overrides/toast.scss
@@ -0,0 +1,34 @@
+@use "../variables" as var;
+@use "../mixins" as mix;
+
+.p-toast-message-success {
+  --p-toast-success-border-color: transparent;
+  --p-toast-success-color: var(--green-1);
+  --p-toast-success-background: var(--green-2);
+}
+
+.p-toast-message-info {
+  --p-toast-info-border-color: transparent;
+  --p-toast-info-color: var(--green-1);
+  --p-toast-info-background: var(--green-2);
+}
+
+.p-toast-message-warn {
+  --p-toast-warn-border-color: transparent;
+  --p-toast-warn-color: var(--yellow-1);
+  --p-toast-warn-background: var(--yellow-2);
+}
+
+.p-toast-message-error {
+  --p-toast-error-border-color: transparent;
+  --p-toast-error-color: var(--red-1);
+  --p-toast-error-background: var(--red-2);
+}
+
+.p-toast-detail {
+  display: none;
+}
+
+.p-toast-close-button {
+  margin: -10% 0 0 0;
+}
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index 73a26186a..322830410 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -34,3 +34,4 @@
 @use "./overrides/spinner";
 @use "./overrides/password";
 @use "./overrides/tooltip";
+@use "./overrides/toast";

From 7fc5f12ba82cc390af9a0db3c3babad774987049 Mon Sep 17 00:00:00 2001
From: Nazar Semets <nsemets@exoft.net>
Date: Wed, 21 May 2025 18:13:06 +0300
Subject: [PATCH 2/2] feat(toast): update toast

---
 .../components/footer/footer.component.scss   |  2 +-
 .../analytics/analytics.component.html        | 52 +++++++++----------
 .../components/toast/toast.component.html     |  2 +-
 src/app/shared/services/toast.service.ts      |  4 --
 src/assets/styles/overrides/toast.scss        | 46 ++++++++--------
 5 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss
index 842299162..ecdb70f1f 100644
--- a/src/app/core/components/footer/footer.component.scss
+++ b/src/app/core/components/footer/footer.component.scss
@@ -32,7 +32,7 @@
 
     .footer-socials {
       @include mix.flex-center;
-      gap: 0.2rem;
+      gap: 0.4285rem;
     }
   }
 
diff --git a/src/app/features/project/analytics/analytics.component.html b/src/app/features/project/analytics/analytics.component.html
index 5fad3239d..76025dafc 100644
--- a/src/app/features/project/analytics/analytics.component.html
+++ b/src/app/features/project/analytics/analytics.component.html
@@ -1,31 +1,7 @@
 <osf-sub-header [title]="'navigation.project.analytics' | translate"></osf-sub-header>
 
 <section class="flex flex-column bg-white flex-1 h-full p-5 gap-4">
-  <div class="flex flex-column sm:flex-row sm:justify-content-between gap-3 sm:gap-4">
-    <osf-analytics-kpi
-      [isLoading]="isRelatedCountsLoading()"
-      [title]="'project.analytics.kpi.forks'"
-      [value]="relatedCounts()?.forksCount"
-      [showButton]="true"
-      [buttonLabel]="'project.analytics.kpi.viewForks'"
-    ></osf-analytics-kpi>
-
-    <osf-analytics-kpi
-      [isLoading]="isRelatedCountsLoading()"
-      [title]="'project.analytics.kpi.linksToThisProject'"
-      [value]="relatedCounts()?.linksToCount"
-      [showButton]="true"
-      [buttonLabel]="'project.analytics.kpi.viewLinks'"
-    ></osf-analytics-kpi>
-
-    <osf-analytics-kpi
-      [isLoading]="isRelatedCountsLoading()"
-      [title]="'project.analytics.kpi.templateCopies'"
-      [value]="relatedCounts()?.templateCount"
-    ></osf-analytics-kpi>
-  </div>
-
-  <div class="flex align-items-center justify-content-end mt-6">
+  <div class="flex align-items-center justify-content-end">
     <label class="date-range-label" for="date-range">{{ 'project.analytics.charts.showAnalytics' | translate }}</label>
 
     <p-select
@@ -47,7 +23,7 @@
     </p-select>
   </div>
 
-  <div class="flex flex-column xl:flex-row flex-wrap gap-4" [class]="{ disabled: isMetricsError() }">
+  <div class="flex flex-column flex-wrap gap-4 xl:flex-row" [class]="{ disabled: isMetricsError() }">
     <osf-line-chart
       class="chart xl-half-width"
       [isLoading]="isMetricsLoading()"
@@ -82,4 +58,28 @@
       [datasets]="popularPagesDataset"
     ></osf-bar-chart>
   </div>
+
+  <div class="flex flex-column gap-3 mt-6 sm:flex-row sm:justify-content-between sm:gap-4">
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.forks'"
+      [value]="relatedCounts()?.forksCount"
+      [showButton]="true"
+      [buttonLabel]="'project.analytics.kpi.viewForks'"
+    ></osf-analytics-kpi>
+
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.linksToThisProject'"
+      [value]="relatedCounts()?.linksToCount"
+      [showButton]="true"
+      [buttonLabel]="'project.analytics.kpi.viewLinks'"
+    ></osf-analytics-kpi>
+
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.templateCopies'"
+      [value]="relatedCounts()?.templateCount"
+    ></osf-analytics-kpi>
+  </div>
 </section>
diff --git a/src/app/shared/components/toast/toast.component.html b/src/app/shared/components/toast/toast.component.html
index a1712e1dc..3206359b2 100644
--- a/src/app/shared/components/toast/toast.component.html
+++ b/src/app/shared/components/toast/toast.component.html
@@ -1 +1 @@
-<p-toast [baseZIndex]="2302" />
+<p-toast position="top-right" [baseZIndex]="2302" />
diff --git a/src/app/shared/services/toast.service.ts b/src/app/shared/services/toast.service.ts
index 155186c40..7e656f524 100644
--- a/src/app/shared/services/toast.service.ts
+++ b/src/app/shared/services/toast.service.ts
@@ -12,10 +12,6 @@ export class ToastService {
     this.messageService.add({ severity: 'success', summary });
   }
 
-  showInfo(summary: string) {
-    this.messageService.add({ severity: 'info', summary });
-  }
-
   showWarn(summary: string) {
     this.messageService.add({ severity: 'warn', summary });
   }
diff --git a/src/assets/styles/overrides/toast.scss b/src/assets/styles/overrides/toast.scss
index 6641adb92..f9c486af5 100644
--- a/src/assets/styles/overrides/toast.scss
+++ b/src/assets/styles/overrides/toast.scss
@@ -1,34 +1,36 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
+.p-toast-message-icon {
+  display: none;
+}
 
-.p-toast-message-success {
-  --p-toast-success-border-color: transparent;
-  --p-toast-success-color: var(--green-1);
-  --p-toast-success-background: var(--green-2);
+.p-toast-summary {
+  --p-toast-summary-font-weight: 700;
 }
 
-.p-toast-message-info {
-  --p-toast-info-border-color: transparent;
-  --p-toast-info-color: var(--green-1);
-  --p-toast-info-background: var(--green-2);
+.p-toast-detail {
+  display: none;
 }
 
-.p-toast-message-warn {
-  --p-toast-warn-border-color: transparent;
-  --p-toast-warn-color: var(--yellow-1);
-  --p-toast-warn-background: var(--yellow-2);
+.p-toast-close-button {
+  margin: -10% 0 0 0;
 }
 
-.p-toast-message-error {
-  --p-toast-error-border-color: transparent;
-  --p-toast-error-color: var(--red-1);
-  --p-toast-error-background: var(--red-2);
+.p-toast-message-success {
+  --p-toast-success-border-color: transparent;
+  --p-toast-success-color: var(--white);
+  --p-toast-success-background: var(--green-1);
+  --p-toast-success-close-button-hover-background: var(--green-2);
 }
 
-.p-toast-detail {
-  display: none;
+.p-toast-message-warn {
+  --p-toast-warn-border-color: transparent;
+  --p-toast-warn-color: var(--white);
+  --p-toast-warn-background: var(--yellow-1);
+  --p-toast-warn-close-button-hover-background: var(--yellow-2);
 }
 
-.p-toast-close-button {
-  margin: -10% 0 0 0;
+.p-toast-message-error {
+  --p-toast-error-border-color: transparent;
+  --p-toast-error-color: var(--white);
+  --p-toast-error-background: var(--red-1);
+  --p-toast-error-close-button-hover-background: var(--red-2);
 }