fix text colour in dark mode

Author: msanlli

common-front/lib/components/MessagesContainer/Messages/MessageView/Counter/Counter.module.scss

@@ -8,6 +8,6 @@
     font-size: 0.7rem;
     line-height: 90%;
 
-    color: white;
+    color: #333333; // Dark text color for better contrast on light background
     background-color: var(--light-color);
 }

common-front/lib/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.module.scss

@@ -15,4 +15,5 @@
 
 .payload {
     font-size: 0.7rem;
+    color: #333333; // Dark text color for better contrast
 }

common-front/lib/components/MessagesContainer/Messages/MessageView/MessageView.module.scss

@@ -31,6 +31,7 @@
     border-radius: 0.5rem;
     filter: (--shadow);
     font-size: 0.8rem;
+    color: #333333; // Dark text color for better contrast
 }
 
 .icon {

common-front/lib/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.module.scss

@@ -4,4 +4,5 @@
     column-gap: 1rem;
     font-size: 0.8rem;
     row-gap: 0.5rem;
+    color: #333333; // Dark text color for better contrast
 }

ethernet-view/src/components/MessagesContainer/Messages/MessageView/Counter/Counter.module.scss

@@ -8,6 +8,6 @@
     font-size: small;
     line-height: 90%;
 
-    color: white;
+    color: var(--main-color); // Use main color for better contrast
     background-color: var(--light-color);
 }

ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.module.scss

@@ -11,3 +11,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.payload {
+    font-size: 0.9rem;
+    color: black; // Inherit from parent which has proper theme color
+}

ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.tsx

@@ -11,7 +11,7 @@ export const InfoMessageView = ({ message, className }: Props) => {
     return (
         <div className={`${styles.infoMessageView} ${className}`}>
             <div className={styles.board}>{message.board}</div>
-            <div>{message.payload}</div>
+            <div className={styles.payload}>{message.payload}</div>
         </div>
     );
 };

ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.module.scss

@@ -2,6 +2,7 @@
     display: grid;
     grid-template-rows: auto 1fr;
     gap: 0.5rem;
+    color: black;
 }
 
 .kindAndOrigin {