From 26846b3eda35238398b86df6faaf50ef30c38bf2 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 22 Feb 2024 16:05:12 +0100
Subject: [PATCH] Trying better UI for the slow mode info box.

---
 conversejs/custom/shared/styles/_peertubetheme.scss | 5 +++--
 conversejs/custom/templates/muc-bottom-panel.js     | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss
index db637c87..1e627a53 100644
--- a/conversejs/custom/shared/styles/_peertubetheme.scss
+++ b/conversejs/custom/shared/styles/_peertubetheme.scss
@@ -17,8 +17,8 @@
 
   .chatbox {
     // Slow mode info box
-    livechat-slow-mode {
-      border-top: var(--chatroom-message-input-border-top);
+    .livechat-slow-mode-info-box {
+      border: 1px dashed var(--peertube-menu-background);
       color: var(--peertube-main-foreground);
       background-color: var(--peertube-main-background);
 
@@ -29,6 +29,7 @@
     }
 
     converse-chat-toolbar {
+      border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
       color: var(--peertube-main-foreground);
       background-color: var(--peertube-main-background);
     }
diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js
index dbf2ecaa..2723b663 100644
--- a/conversejs/custom/templates/muc-bottom-panel.js
+++ b/conversejs/custom/templates/muc-bottom-panel.js
@@ -51,7 +51,7 @@ class SlowMode extends CustomElement {
     if (this.hideInfoBox) {
       return html``
     }
-    return html`
+    return html`<div class="livechat-slow-mode-info-box">
       <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
       ${__(
         'Slow mode is enabled, users can send a message every %1$s seconds.',
@@ -59,7 +59,8 @@ class SlowMode extends CustomElement {
       )}
       <i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
         <converse-icon class="fa fa-times" size="1em"></converse-icon>
-      </i>`
+      </i>
+    </div>`
   }
 
   closeSlowModeInfoBox (ev) {