Show disruption alerts on white background

stadtnavi · Dec 16, 2024 · 2581fae · 2581fae
1 parent 5e8d914
commit 2581fae
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/app/component/MessageBar.js b/app/component/MessageBar.js
@@ -215,7 +215,7 @@ class MessageBar extends Component {
     const iconName = `icon-icon_${icon}`;
     const isDisruption = msg.type === 'disruption';
     const backgroundColor = msg.backgroundColor || '#fff';
-    const textColor = isDisruption ? '#fff' : msg.textColor || '#000';
+    const textColor = msg.textColor || '#000';
     const dataURI = msg.dataURI || null;
     const ariaContent = (content, id) => {
       return (

diff --git a/sass/themes/herrenberg/stadtnavi.scss b/sass/themes/herrenberg/stadtnavi.scss
@@ -211,3 +211,49 @@
   font-weight: normal;
   line-height: normal;
 }
+
+// --- Show disruptions on white background ---
+.message-bar {
+  .banner-container {
+    &.banner-disruption {
+      background: white;
+
+      .swipe-tab-ball {
+        &.selected {
+          border: solid 2px black;
+          background-color: black;
+        }
+      }
+      .icon {
+        color: white;
+        fill: $disruption-color;
+      }
+      #close-message-bar {
+        .icon {
+          fill: $disruption-color !important;
+        }
+      }
+      .message-bar-content,
+      a,
+      h2 {
+        color: black;
+      }
+      .message-bar-container {
+        .react-swipe-container, .single-alert {
+          .message-content {
+            .message-bar-link {
+              color: black;
+            }
+          }
+        }
+      }
+    }
+  }
+  .message-bar-container {
+    &.message-bar-disruption {
+      a {
+        color: white;
+      }
+    }
+  }
+}