Merge pull request #1120 from eclipse-tractusx/chore/#913-notificatio…

…n-status-uux chore(uux): 913 notification status colors change
eclipse-tractusx · Jun 28, 2024 · 9090711 · 9090711
2 parents 4df9128 + 858face
commit 9090711
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 38 deletions.
diff --git a/.../src/app/modules/shared/components/notification-reason/notification-reason.component.scss b/.../src/app/modules/shared/components/notification-reason/notification-reason.component.scss
@@ -91,7 +91,7 @@
 }
 
 .message--text__right {
-  @apply bg-createdLight text-createdDark;
+  @apply bg-closedLight text-closedDark;
   float: right;
 }
 
@@ -102,7 +102,7 @@
   right: -7px;
   height: 25px;
   border-right: 20px solid;
-  @apply border-createdLight;
+  @apply border-closedLight;
   border-bottom-left-radius: 16px 14px;
   transform: translate(0, -2px);
 }
@@ -121,7 +121,7 @@
 }
 
 .message--text__left {
-  @apply bg-receivedLight text-receivedDark;
+  @apply bg-createdLight text-createdDark;
   float: left;
 }
 
@@ -133,7 +133,7 @@
   left: -7px;
   height: 25px;
   border-left: 20px solid;
-  @apply border-receivedLight;
+  @apply border-createdLight;
   border-bottom-right-radius: 16px 14px;
   transform: translate(0, -2px);
 }
@@ -180,31 +180,31 @@
   }
 
   &--CANCELED {
-    @apply bg-closedDark text-closedLight before:bg-closedLight;
+    @apply bg-canceledLight text-canceledDark before:bg-canceledDark;
   }
 
   &--CLOSED {
-    @apply bg-closedDark text-closedLight before:bg-closedLight;
+    @apply bg-closedLight text-closedDark before:bg-closedDark;
   }
 
   &--CREATED {
     @apply bg-createdLight text-createdDark before:bg-createdDark;
   }
 
   &--SENT {
-    @apply bg-pendingLight text-pendingDark before:bg-pendingDark;
+    @apply bg-receivedLight text-receivedDark before:bg-receivedDark;
   }
 
   &--ACCEPTED {
-    @apply bg-declinedLight text-declinedDark before:bg-declinedDark;
+    @apply bg-confirmedLight text-confirmedDark before:bg-confirmedDark;
   }
 
   &--ACKNOWLEDGED {
     @apply bg-pendingLight text-pendingDark before:bg-pendingDark;
   }
 
   &--DECLINED {
-    @apply bg-confirmedLight text-confirmedDark before:bg-confirmedDark;
+    @apply bg-declinedLight text-declinedDark before:bg-declinedDark;
   }
 }
 

diff --git a/.../app/modules/shared/modules/notification/notification-tab/notification-tab.component.scss b/.../app/modules/shared/modules/notification/notification-tab/notification-tab.component.scss
@@ -39,30 +39,30 @@
   }
 
   &--CANCELED {
-    @apply bg-closedDark text-closedLight before:bg-closedLight;
+    @apply bg-canceledLight text-canceledDark before:bg-canceledDark;
   }
 
   &--CLOSED {
-    @apply bg-closedDark text-closedLight before:bg-closedLight;
+    @apply bg-closedLight text-closedDark before:bg-closedDark;
   }
 
   &--CREATED {
     @apply bg-createdLight text-createdDark before:bg-createdDark;
   }
 
   &--SENT {
-    @apply bg-pendingLight text-pendingDark before:bg-pendingDark;
+    @apply bg-receivedLight text-receivedDark before:bg-receivedDark;
   }
 
   &--ACCEPTED {
-    @apply bg-declinedLight text-declinedDark before:bg-declinedDark;
+    @apply bg-confirmedLight text-confirmedDark before:bg-confirmedDark;
   }
 
   &--ACKNOWLEDGED {
     @apply bg-pendingLight text-pendingDark before:bg-pendingDark;
   }
 
   &--DECLINED {
-    @apply bg-confirmedLight text-confirmedDark before:bg-confirmedDark;
+    @apply bg-declinedLight text-declinedDark before:bg-declinedDark;
   }
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -19,24 +19,24 @@
 
 /* eslint-disable no-undef */
 module.exports = {
-  content: ['./src/**/*.html', './src/**/*.scss'],
+  content: [ './src/**/*.html', './src/**/*.scss' ],
   theme: {
     extend: {
       fontFamily: {
-        bold: ['Catena-X Bold', 'sans-serif'],
-        boldItalic: ['Catena-X BoldItalic', 'sans-serif'],
+        bold: [ 'Catena-X Bold', 'sans-serif' ],
+        boldItalic: [ 'Catena-X BoldItalic', 'sans-serif' ],
 
-        italic: ['Catena-X Italic', 'sans-serif'],
-        regular: ['Catena-X Regular', 'sans-serif'],
+        italic: [ 'Catena-X Italic', 'sans-serif' ],
+        regular: [ 'Catena-X Regular', 'sans-serif' ],
 
-        light: ['Catena-X Light', 'sans-serif'],
-        lightItalic: ['Catena-X LightItalic', 'sans-serif'],
+        light: [ 'Catena-X Light', 'sans-serif' ],
+        lightItalic: [ 'Catena-X LightItalic', 'sans-serif' ],
 
-        medium: ['Catena-X Medium', 'sans-serif'],
-        mediumItalic: ['Catena-X MediumItalic', 'sans-serif'],
+        medium: [ 'Catena-X Medium', 'sans-serif' ],
+        mediumItalic: [ 'Catena-X MediumItalic', 'sans-serif' ],
 
-        semiBold: ['Catena-X SemiBold', 'sans-serif'],
-        semiBoldItalic: ['Catena-X SemiBoldItalic', 'sans-serif'],
+        semiBold: [ 'Catena-X SemiBold', 'sans-serif' ],
+        semiBoldItalic: [ 'Catena-X SemiBoldItalic', 'sans-serif' ],
       },
       minHeight: {
         0: '0',
@@ -131,23 +131,26 @@ module.exports = {
 
       // Status colors for notification badges
 
-      createdLight: '#f2f3fb',
-      createdDark: '#111111',
+      createdLight: '#d4eaff',
+      createdDark: '#0a2e4f',
 
-      receivedLight: '#e1f1fe',
-      receivedDark: '#2b4078',
+      receivedLight: '#fff5d6',
+      receivedDark: '#8b5e00',
 
-      pendingLight: '#FFECBD',
-      pendingDark: '#975b26',
+      pendingLight: '#ffe4b2',
+      pendingDark: '#cc5200',
 
-      confirmedLight: '#e2f6c7',
-      confirmedDark: '#5c8d46',
+      confirmedLight: '#d9f2d9',
+      confirmedDark: '#0b5e0b',
 
-      declinedLight: '#fee7e2',
-      declinedDark: '#ff5330',
+      canceledLight: '#ffa6a6',
+      canceledDark: '#800000',
 
-      closedLight: '#ffffff',
-      closedDark: '#5d3416',
+      declinedLight: '#ffd9d9',
+      declinedDark: '#b30000',
+
+      closedLight: '#f0f0f0',
+      closedDark: '#4a4a4a',
 
       qualityTypeOk: '#3db014',
       qualityTypeMinor: '#ffd74a',
@@ -161,7 +164,7 @@ module.exports = {
       severityLifeThreatening: '#E5231D',
 
       semanticDataModelSerialPart: '#3db014',
-      semanticDataModelBatch: '#ffd21d'
+      semanticDataModelBatch: '#ffd21d',
     },
     screens: {
       sm: '640px',