Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

frontend/src/dialogues/standard/ErrorDialog.vue

@@ -1,7 +1,8 @@
 <template>
-    <DialogWidget ref="dialog" title="error.title" :show-close="true" :buttons="buttons" :modal="true" width="25em"
-        height="15em" name="ErrorDialog" :isTitleTranslated=true>
+    <DialogWidget ref="dialog" title="error.title" :show-close="true" :buttons="buttons" :modal="true" width="28em"
+        height="16em" name="ErrorDialog" :isTitleTranslated=true>
         <div class="error-content">
+            <span class="error-content__badge">Fehler</span>
             <p>{{ translatedErrorMessage }}</p>
         </div>
     </DialogWidget>
@@ -45,8 +46,27 @@ export default {
 
 <style scoped>
 .error-content {
-    padding: 1em;
-    color: red;
+    display: grid;
+    gap: 12px;
+    padding: 1.2em;
     text-align: center;
 }
+
+.error-content__badge {
+    justify-self: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(177, 59, 53, 0.12);
+    color: var(--color-danger);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.error-content p {
+    margin: 0;
+    color: var(--color-text-primary);
+    line-height: 1.55;
+}
 </style>

frontend/src/dialogues/standard/MessageDialog.vue

@@ -1,7 +1,8 @@
 <template>
-    <DialogWidget ref="dialog" :title="translatedTitle" :show-close="true" :buttons="translatedButtons" :modal="true" width="25em"
-        height="15em" name="MessageDialog" :isTitleTranslated=false>
+    <DialogWidget ref="dialog" :title="translatedTitle" :show-close="true" :buttons="translatedButtons" :modal="true" width="28em"
+        height="16em" name="MessageDialog" :isTitleTranslated=false>
         <div class="message-content">
+            <span class="message-content__badge">Hinweis</span>
             <p>{{ translatedMessage }}</p>
         </div>
     </DialogWidget>
@@ -41,14 +42,6 @@ export default {
             if (this.message.startsWith('tr:')) {
                 const i18nKey = this.message.substring(3);
                 const translation = this.$t(i18nKey);
-                console.log('translatedMessage:', {
-                    i18nKey: i18nKey,
-                    translation: translation,
-                    parameters: this.parameters,
-                    allMinigames: this.$t('minigames'),
-                    crashSection: this.$t('minigames.taxi.crash')
-                });
-                // Ersetze Parameter in der Übersetzung
                 return this.interpolateParameters(translation);
             }
             return this.message;
@@ -89,26 +82,16 @@ export default {
             }
         },
         interpolateParameters(text) {
-            // Ersetze {key} Platzhalter mit den entsprechenden Werten
             let result = text;
-            console.log('interpolateParameters:', {
-                originalText: text,
-                parameters: this.parameters
-            });
-            
             for (const [key, value] of Object.entries(this.parameters)) {
                 const placeholder = `{${key}}`;
                 const regex = new RegExp(placeholder.replace(/[{}]/g, '\\$&'), 'g');
                 result = result.replace(regex, value);
-                console.log(`Replaced ${placeholder} with ${value}:`, result);
             }
-            
-            console.log('Final result:', result);
             return result;
         }
     },
-    beforeDestroy() {
-        // Stelle sicher, dass Event Listener entfernt wird
+    beforeUnmount() {
         document.removeEventListener('keydown', this.handleKeyDown);
     }
 };
@@ -116,8 +99,27 @@ export default {
 
 <style scoped>
 .message-content {
-    padding: 1em;
-    color: #000000;
+    display: grid;
+    gap: 12px;
+    padding: 1.2em;
     text-align: center;
 }
+
+.message-content__badge {
+    justify-self: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(120, 195, 138, 0.16);
+    color: #24523a;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.message-content p {
+    margin: 0;
+    color: var(--color-text-primary);
+    line-height: 1.55;
+}
 </style>