+
+ info_outline
+ help_outline
+ warning_amber
+ thumb_up_off_alt
+
-
diff --git a/src/app/cdk/alert-message/alert-message.component.scss b/src/app/cdk/alert-message/alert-message.component.scss
index 6c90a6314f..cdcddc88f9 100644
--- a/src/app/cdk/alert-message/alert-message.component.scss
+++ b/src/app/cdk/alert-message/alert-message.component.scss
@@ -1,4 +1,28 @@
:host {
+ ::ng-deep {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 0 0 8px 0 !important;
+ }
+ }
+ width: 100%;
+ display: inline-block;
+}
+
+.title {
+ line-height: 24px;
+}
+
+.content {
+ line-height: 21px !important;
+ letter-spacing: 0.25px !important;
+}
+
+.alert-container {
border: solid 2px;
border-radius: 4px;
padding: 16px;
diff --git a/src/app/cdk/alert-message/alert-message.component.scss-theme.scss b/src/app/cdk/alert-message/alert-message.component.scss-theme.scss
index 2823c4d698..9b1878bac6 100644
--- a/src/app/cdk/alert-message/alert-message.component.scss-theme.scss
+++ b/src/app/cdk/alert-message/alert-message.component.scss-theme.scss
@@ -8,18 +8,72 @@
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
- :host {
- border-color: mat.get-color-from-palette(
- $foreground,
- 'state-notice-dark'
- ) !important;
- background-color: rgba($state-notice-light, 0.15);
- }
- mat-icon {
- color: mat.get-color-from-palette(
- $foreground,
- 'state-notice-dark'
- ) !important;
+ $alert-colors: (
+ 'alert-notice': (
+ 'border': 'state-notice-darkest',
+ 'background': 'state-notice-lightest',
+ 'link-darkest': 'brand-quad-darkest',
+ 'link-dark': 'brand-quad-dark',
+ ),
+ 'alert-info': (
+ 'border': 'state-info-darkest',
+ 'background': 'state-info-lightest',
+ 'link-darkest': 'state-info-darkest',
+ 'link-dark': 'state-info-dark',
+ ),
+ 'alert-warning': (
+ 'border': 'state-warning-dark',
+ 'background': 'state-warning-lightest',
+ 'link-darkest': 'state-warning-darkest',
+ 'link-dark': 'state-warning-dark',
+ ),
+ 'alert-success': (
+ 'border': 'brand-primary-dark',
+ 'background': 'brand-primary-lightest',
+ 'link-darkest': 'brand-primary-darkest',
+ 'link-dark': 'brand-primary-dark',
+ ),
+ );
+
+ @each $class, $settings in $alert-colors {
+ $border-color: map-get($settings, 'border');
+ $background-color: map-get($settings, 'background');
+ $link-darkest: map-get($settings, 'link-darkest');
+ $link-dark: map-get($settings, 'link-dark');
+
+ .#{$class} {
+ border-color: mat.get-color-from-palette(
+ $foreground,
+ $border-color
+ ) !important;
+ background-color: mat.get-color-from-palette(
+ $foreground,
+ $background-color
+ ) !important;
+
+ mat-icon {
+ color: mat.get-color-from-palette(
+ $foreground,
+ $border-color
+ ) !important;
+ }
+
+ ::ng-deep a {
+ color: mat.get-color-from-palette(
+ $foreground,
+ $link-darkest
+ ) !important;
+
+ &:visited {
+ color: black !important;
+ }
+ &:hover,
+ &:active,
+ &:focus {
+ color: mat.get-color-from-palette($foreground, $link-dark) !important;
+ }
+ }
+ }
}
}
diff --git a/src/app/cdk/alert-message/alert-message.component.ts b/src/app/cdk/alert-message/alert-message.component.ts
index 4e9a6b2598..d796d75a7b 100644
--- a/src/app/cdk/alert-message/alert-message.component.ts
+++ b/src/app/cdk/alert-message/alert-message.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
+import { AlertType } from 'src/app/constants'
@Component({
selector: 'app-alert-message',
@@ -8,8 +9,12 @@ import { Component, OnInit } from '@angular/core'
'alert-message.component.scss-theme.scss',
],
})
-export class AlertMessageComponent implements OnInit {
- constructor() {}
-
- ngOnInit(): void {}
+/**
+ * Use `title` and `content` attributes to display the message
+ * Use headings (h1, h2...) for the title
+ * Margin is set to `0 0 8px 0` for all headings
+ * Line height and letter spacing is also standardized
+ */
+export class AlertMessageComponent {
+ @Input() type: AlertType = 'notice'
}
From 04f021ae365db08240a68c3717e4ec8aee539c82 Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:32:50 +0200
Subject: [PATCH 02/22] replace deprecation warning
---
.../account-settings.module.ts | 2 ++
.../dialog-actions-duplicated.component.html | 25 ++++++-------------
.../dialog-actions-duplicated.component.scss | 13 ----------
...tions-duplicated.component.scss-theme.scss | 13 ----------
4 files changed, 9 insertions(+), 44 deletions(-)
diff --git a/src/app/account-settings/account-settings.module.ts b/src/app/account-settings/account-settings.module.ts
index 7ac6c1e4b9..7c01fa2762 100644
--- a/src/app/account-settings/account-settings.module.ts
+++ b/src/app/account-settings/account-settings.module.ts
@@ -46,6 +46,7 @@ import { SettingsSharingComponent } from './components/settings-sharing/settings
import { SettingsComponent } from './components/settings/settings.component'
import { AccountSettingsComponent } from './pages/account-settings/account-settings.component'
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
@NgModule({
declarations: [
@@ -98,6 +99,7 @@ import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/lega
TwoFactorAuthenticationFormModule,
AccountPanelModule,
TopBarMyPublicRecordPreviewModule,
+ AlertMessageModule,
],
providers: [VerificationEmailModalService],
})
diff --git a/src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.html b/src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.html
index 85f318c869..4ed2df5107 100644
--- a/src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.html
+++ b/src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.html
@@ -3,24 +3,13 @@
>Remove duplicate record
-
-
- info
-
-
-
- Warning! All information will be deleted from the duplicate record. Only
- the email addresses will be transferred to your main ORCID record.
- Removing a duplicate record cannot be undone.
-
-
-
+
+
+ Warning! All information will be deleted from the duplicate record. Only
+ the email addresses will be transferred to your main ORCID record.
+ Removing a duplicate record cannot be undone.
+
+
Date: Sat, 7 Dec 2024 00:33:48 +0200
Subject: [PATCH 03/22] replace revoke trusted org warning
---
.../account-trusted-parties.module.ts | 2 +
...revoke-trusted-organization.component.html | 49 +++++++------------
...revoke-trusted-organization.component.scss | 13 -----
...ted-organization.component.scss-theme.scss | 13 -----
4 files changed, 21 insertions(+), 56 deletions(-)
diff --git a/src/app/account-trusted-parties/account-trusted-parties.module.ts b/src/app/account-trusted-parties/account-trusted-parties.module.ts
index 734ead2035..37461fb92a 100644
--- a/src/app/account-trusted-parties/account-trusted-parties.module.ts
+++ b/src/app/account-trusted-parties/account-trusted-parties.module.ts
@@ -36,6 +36,7 @@ import { SettingsTrustedOrganizationsComponent } from './components/settings-tru
import { SettingsUsersThatThrustYouComponent } from './components/settings-users-that-thrust-you/settings-users-that-thrust-you.component'
import { SettingsComponent } from './components/settings/settings.component'
import { AccountTrustedPartiesComponent } from './pages/account-trusted-parties/account-trusted-parties.component'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
@NgModule({
declarations: [
@@ -78,6 +79,7 @@ import { AccountTrustedPartiesComponent } from './pages/account-trusted-parties/
TwoFactorAuthenticationFormModule,
AccountPanelModule,
TopBarMyPublicRecordPreviewModule,
+ AlertMessageModule,
MatTooltipModule,
],
providers: [VerificationEmailModalService],
diff --git a/src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.html b/src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.html
index 3d31c3b5d5..0a38990640 100644
--- a/src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.html
+++ b/src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.html
@@ -22,37 +22,26 @@
{{ permissions.key | scopePathType }}