diff --git a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
index 1179ae876..29c00ed1a 100644
--- a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/notification-service/ui/inapp-notification/listing/mine-inapp-notification-listing.component.scss b/frontend/src/notification-service/ui/inapp-notification/listing/mine-inapp-notification-listing.component.scss
index 951e433eb..61d228b5d 100644
--- a/frontend/src/notification-service/ui/inapp-notification/listing/mine-inapp-notification-listing.component.scss
+++ b/frontend/src/notification-service/ui/inapp-notification/listing/mine-inapp-notification-listing.component.scss
@@ -21,21 +21,7 @@
z-index: 5;
}
}
- .create-btn {
- border-radius: 30px;
- background-color: var(--secondary-color);
- padding-left: 2em;
- padding-right: 2em;
-
- .button-text{
- display: inline-block;
- }
- }
-
- .dlt-btn {
- color: rgba(0, 0, 0, 0.54);
- }
-
+
.status-chip{
border-radius: 20px;
diff --git a/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html b/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
index 4b07cd778..84870091f 100644
--- a/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
+++ b/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
@@ -19,7 +19,7 @@
-
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 1b6da6617..0340b7e7d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -8,6 +8,7 @@
--primary-color-2: #1E59B1;
--primary-color-3: #246AD3;
--secondary-color: #36900B;
+ --warning-color: #f44336;
}
// Define your theme with color palettes, typography and density
@@ -66,7 +67,7 @@ $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-ser
$body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
// $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
- $button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
+ $button: mat.m2-define-typography-level($font-size: 0.87rem, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
// Line-height must be unit-less fraction of the font-size.
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
);
@@ -403,75 +404,78 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]), .md-button {
&.rounded-btn{
- font-size: 0.87rem;
padding: 0.62rem 1.87rem;
height: 40px;
- font-weight: 400;
border-radius: 30px;
- border: none;
opacity: 1;
// padding-left: 2em;
// padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
- &:hover {
- box-shadow: var(--mdc-protected-button-hover-container-elevation-shadow);
- }
+
&.primary {
background: var(--primary-color) 0% 0% no-repeat padding-box;
color: #ffffff;
- }
- &.secondary {
- background: var(--secondary-color) 0% 0% no-repeat padding-box;
- color: #000000;
- }
-
- &.save-btn {
- background: var(--secondary-color) 0% 0% no-repeat padding-box;
- color: #000000;
- padding-left: 2em;
- padding-right: 2em;
- &:disabled {
- background-color: #CBCBCB;
- color: #FFF;
- border: 0px;
- }
- }
-
- &.cancel-btn {
- background: #ffffff 0% 0% no-repeat padding-box;
- border: 1px solid #b5b5b5;
- padding-left: 2em;
- padding-right: 2em;
- &:disabled {
- background-color: #CBCBCB;
- color: #FFF;
- border: 0px;
- }
- }
-
- // &.finalize-btn {
-
- // }
-
- &.delete-btn {
- background: #ffffff;
- color: #ba2c2c;
- border: 1px solid #ba2c2c;
- padding-left: 2em;
- padding-right: 2em;
- &:disabled {
- background-color: #CBCBCB;
- color: #FFF;
- border: 0px;
+ border: none;
+ &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+ background: #CBCBCB;
+ color: #ffffff;
+ border: none;
}
}
- &.mat-mdc-button.mat-mdc-button-disabled {
- background-color: #CBCBCB; //!important
- color: #FFF; //!important
- border: 0px; //!important
- }
+ &.secondary {
+ background: var(--secondary-color) 0% 0% no-repeat padding-box;
+ color: #000000;
+ border: none;
+ &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+ background: #CBCBCB;
+ color: #ffffff;
+ border: none;
+ }
+ }
+
+ &.primary-inverted {
+ color: var(--primary-color);
+ border: 1px solid var(--primary-color);
+ background: #fafafafa;
+ &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+ border: 1px solid #CBCBCB;
+ color: #CBCBCB;
+ }
+ }
+
+
+ &.neutral{
+ border: 1px solid #CBCBCB;
+ background: #fafafafa;
+ color: #000000;
+ &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+ color: #CBCBCB;
+ }
+ }
+
+ &.delete {
+ background: var(--warning-color);
+ border: none;
+ color: #ffffff;
+ }
+
+ &.delete-inverted {
+ background: #fafafafa;
+ border: 1px solid var(--warning-color);
+ color: var(--warning-color);
+ }
+
+ &.import {
+ border: 1px solid #000000;
+ background: #fafafafa;
+ color: #000000;
+ }
+
+ &.stepper {
+ width: 9rem;
+ }
}
}
@@ -503,6 +507,7 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
}
.status-chip {
+ width: fit-content;
border-radius: 20px;
padding-left: 1em;
padding-right: 1em;
@@ -519,7 +524,7 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
}
&.status-chip-error {
- color: #cf1407;
+ color: var(--warning-color);
background: #ffe6e5 0% 0% no-repeat padding-box;
}
}
@@ -536,3 +541,6 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
gap: 0.5rem;
}
+.gap-quarter-rem {
+ gap: 0.25rem;
+}
\ No newline at end of file