Use `btn-toolbar` class for rows of buttons.

- Make chat head buttons a `btn-toolbar`
- Make the chat toolbar a `btn-toolbar`

src/plugins/chatview/styles/chat-head.scss

@@ -58,10 +58,8 @@
             }
 
             .chatbox-title__buttons {
-                display: flex;
                 flex-direction: row-reverse;
                 flex-wrap: nowrap;
-                padding: 0;
             }
 
             .chatbox-btn {

src/plugins/chatview/templates/bottom-panel.js

@@ -16,7 +16,7 @@ export default (o) => {
                 html`<div class="new-msgs-indicator" @click=${ev => o.viewUnreadMessages(ev)}>▼ ${ unread_msgs } ▼</div>` : '' }
         ${api.settings.get('show_toolbar') ? html`
             <converse-chat-toolbar
-                class="chat-toolbar no-text-select"
+                class="btn-toolbar chat-toolbar no-text-select"
                 .model=${o.model}
                 ?composing_spoiler="${o.model.get('composing_spoiler')}"
                 ?show_call_button="${show_call_button}"

src/plugins/chatview/templates/chat-head.js

@@ -26,7 +26,7 @@ export default (o) => {
                     ${ (o.type !== HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ display_name }</a>` : display_name }
                 </div>
             </div>
-            <div class="chatbox-title__buttons row g-0">
+            <div class="chatbox-title__buttons btn-toolbar g-0">
                 ${ until(getDropdownButtons(o.heading_buttons_promise), '') }
                 ${ until(getStandaloneButtons(o.heading_buttons_promise), '') }
             </div>

src/plugins/muc-views/templates/muc-bottom-panel.js

@@ -18,7 +18,7 @@ const tplCanEdit = (o) => {
             : ''}
         ${show_toolbar
             ? html` <converse-chat-toolbar
-                  class="chat-toolbar no-text-select"
+                  class="btn-toolbar chat-toolbar no-text-select"
                   .model=${o.model}
                   ?hidden_occupants="${o.model.get('hidden_occupants')}"
                   ?is_groupchat="${o.is_groupchat}"

src/plugins/muc-views/templates/muc-head.js

@@ -45,7 +45,7 @@ export default (el) => {
                             </converse-icon>` : '' }
                 </div>
             </div>
-            <div class="chatbox-title__buttons row g-0">
+            <div class="chatbox-title__buttons btn-toolbar g-0">
                 ${ until(getStandaloneButtons(heading_buttons_promise), '') }
                 ${ until(getDropdownButtons(heading_buttons_promise), '') }
             </div>

src/plugins/omemo/utils.js

@@ -803,7 +803,11 @@ export function getOMEMOToolbarButton (toolbar_el, buttons) {
         color = `var(--muc-toolbar-btn-disabled-color)`;
     }
     buttons.push(html`
-        <button class="toggle-omemo" title="${title}" data-disabled=${!model.get('omemo_supported')} @click=${toggleOMEMO}>
+        <button type="button"
+                class="btn toggle-omemo"
+                title="${title}"
+                data-disabled=${!model.get('omemo_supported')}
+                @click=${toggleOMEMO}>
             <converse-icon
                 class="fa ${model.get('omemo_active') ? `fa-lock` : `fa-unlock`}"
                 path-prefix="${api.settings.get('assets_path')}"

src/shared/chat/emoji-dropdown.js

@@ -49,7 +49,7 @@ export default class EmojiDropdown extends DropdownBase {
         const color = is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
 
         return html`
-            <button class="dropdown-toggle dropdown-toggle--no-caret toggle-emojis"
+            <button class="btn dropdown-toggle dropdown-toggle--no-caret toggle-emojis"
                     type="button"
                     id="${this.id}"
                     title="${__('Insert emojis')}"

src/shared/chat/styles/toolbar.scss

@@ -1,13 +1,15 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-
 .conversejs {
 
-    .send-button {
-        border-radius: 0;
-        bottom: var(--send-button-bottom);
-        color: var(--inverse-link-color);
+    converse-chat-toolbar {
+        .btn {
+            padding: 0.25em 0.5em !important;
+        }
+
+        .send-button {
+            border-radius: 0;
+            bottom: var(--send-button-bottom);
+            color: var(--inverse-link-color);
+        }
     }
 
     .chatbox {
@@ -24,76 +26,15 @@
     }
 
     .chat-toolbar {
+        justify-content: space-between;
 
         .toolbar-buttons {
-            width: 100%;
             .message-limit {
                 padding: 0.5em;
                 font-weight: bold;
             }
-            * {
-                float: left;
-            }
-            .right {
-                float: right;
-            }
-        }
-
-        .unverified a,
-        .unverified {
-            color: #cf5300;
-        }
-        .private a,
-        .private {
-            color: #4b7003;
-        }
-        li {
-            cursor: pointer;
-            display: inline-block;
-            list-style: none;
-            padding: 0 0.5em;
-            &:hover {
-                cursor: pointer;
-            }
-            .toolbar-menu {
-                bottom: 1.7rem;
-                box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-                height: auto;
-                margin-bottom: 0;
-                min-width: 21rem;
-                position: absolute;
-                right: 0;
-                top: auto;
-                z-index: $zindex-dropdown;
-
-                &.otr-menu {
-                    left: -6em;
-                    min-width: 15rem;
-
-                    &.show {
-                        display: flex;
-                        flex-direction: column;
-                    }
-                }
-
-                a {
-                    color: var(--link-color);
-                }
-            }
-            &.toggle-otr {
-                ul {
-                    z-index: 99;
-                    li {
-                        &:hover {
-                            background-color: var(--highlight-color);
-                        }
-                        display: block;
-                        padding: 7px;
-                        a {
-                            display: block;
-                        }
-                    }
-                }
+            .toggle_occupants {
+                order: 99;
             }
         }
     }
@@ -101,9 +42,6 @@
     converse-chat-toolbar {
         background-color: var(--chat-background-color);
         box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        margin: 0;
         width: 100%;
 
         .fa, .fa:hover,
@@ -118,15 +56,9 @@
         .unencrypted a,
         .unencrypted {
             color: var(--text-color);
-            .toolbar-menu {
-                a {
-                    color: var(--link-color);
-                }
-            }
         }
 
         button {
-            margin-top: 0.4em;
             border: 1px transparent solid;
             background-color: transparent;
 
@@ -195,25 +127,4 @@
             }
         }
     }
-
-    converse-chats {
-        &.converse-overlayed  {
-            .chat-toolbar {
-                li {
-                    .toolbar-menu {
-                        min-width: 235px;
-                    }
-                }
-            }
-            .chatroom {
-                .chat-toolbar {
-                    li {
-                        .toolbar-menu {
-                            min-width: 280px;
-                        }
-                    }
-                }
-            }
-        }
-    }
 }

src/shared/chat/templates/toolbar.js

@@ -11,7 +11,7 @@ function tplSendButton () {
 
 export default (el) => {
     return html`
-        <span class="toolbar-buttons">${until(el.getButtons(), '')}</span>
+        <span class="btn-group toolbar-buttons">${until(el.getButtons(), '')}</span>
         ${ el.show_send_button ? tplSendButton() : '' }
     `;
 }

src/shared/chat/toolbar.js

@@ -68,7 +68,10 @@ export class ChatToolbar extends CustomElement {
             const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
             const i18n_start_call = __('Start a call');
             buttons.push(html`
-                <button class="toggle-call" @click=${this.toggleCall} title="${i18n_start_call}">
+                <button type="button"
+                        class="btn toggle-call"
+                        @click=${this.toggleCall}
+                        title="${i18n_start_call}">
                     <converse-icon color="var(${color})" class="fa fa-phone" size="1em"></converse-icon>
                 </button>`
             );
@@ -94,7 +97,8 @@ export class ChatToolbar extends CustomElement {
             const i18n_hide_occupants = __('Hide participants');
             const i18n_show_occupants = __('Show participants');
             buttons.push(html`
-                <button class="toggle_occupants right"
+                <button type="button"
+                        class="btn toggle_occupants"
                         title="${this.hidden_occupants ? i18n_show_occupants : i18n_hide_occupants}"
                         @click=${this.toggleOccupants}>
                     <converse-icon
@@ -124,13 +128,20 @@ export class ChatToolbar extends CustomElement {
             const i18n_choose_file =  __('Choose a file to send')
             const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
             return html`
-                <button title="${i18n_choose_file}" @click=${this.toggleFileUpload}>
+                <button type="button"
+                        class="btn"
+                        title="${i18n_choose_file}"
+                        @click=${this.toggleFileUpload}>
                     <converse-icon
                         color="var(${color})"
                         class="fa fa-paperclip"
                         size="1em"></converse-icon>
                 </button>
-                <input type="file" @change=${this.onFileSelection} class="fileupload" multiple="" style="display:none"/>`;
+                <input type="file"
+                    @change=${this.onFileSelection}
+                    class="fileupload"
+                    multiple=""
+                    style="display:none"/>`;
         } else {
             return '';
         }
@@ -150,7 +161,8 @@ export class ChatToolbar extends CustomElement {
         }
         const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
         const markup = html`
-            <button class="toggle-compose-spoiler"
+            <button type="button"
+                    class="btn toggle-compose-spoiler"
                     title="${i18n_toggle_spoiler}"
                     @click=${this.toggleComposeSpoilerMessage}>
                 <converse-icon

src/shared/chat/utils.js

@@ -29,17 +29,14 @@ export async function getHeadingDropdownItem (promise_or_data) {
 export async function getHeadingStandaloneButton (promise_or_data) {
     const data = await promise_or_data;
     return html`
-        <a
-            href="#"
-            class="chatbox-btn ${data.a_class}"
-            @click=${data.handler}
-            title="${data.i18n_title}"
-        >
+        <button type="button" class="btn chatbox-btn ${data.a_class}"
+                @click=${data.handler}
+                title="${data.i18n_title}">
             <converse-icon
                 size="1em"
                 class="fa ${data.icon_class}"
             ></converse-icon>
-        </a>
+        </button>
     `;
 }