Various CSS improvements

- Unfurl and card styling fixes
- Better color choices for the `dracula` theme
- Fix dropdown icons color in MUC sidebar

dev.html

@@ -38,7 +38,7 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
-        // view_mode: 'fullscreen',
+        view_mode: 'fullscreen',
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],

src/plugins/chatview/tests/styling.js

@@ -221,8 +221,8 @@ describe("An incoming chat Message", function () {
         msg_el = Array.from(view.querySelectorAll('converse-chat-message-body')).pop();
         expect(msg_el.innerHTML.replace(/<!-.*?->/g, '')).toBe(
             'Here\'s a code block: \n'+
-            '<div class="styling-directive">```</div><code class="block">Inside the code-block, &lt;code&gt;hello&lt;/code&gt; we don\'t enable *styling hints* like ~these~\n'+
-            '</code><div class="styling-directive">```</div>'
+            '<div class="styling-directive">```</div><pre><code class="block">Inside the code-block, &lt;code&gt;hello&lt;/code&gt; we don\'t enable *styling hints* like ~these~\n'+
+            '</code></pre><div class="styling-directive">```</div>'
         );
 
         msg_text = "```\nignored\n(println \"Hello, world!\")\n```\nThis should show up as monospace, preformatted text ^";
@@ -232,7 +232,7 @@ describe("An incoming chat Message", function () {
         msg_el = Array.from(view.querySelectorAll('converse-chat-message-body')).pop();
         await u.waitUntil(() => msg_el.innerHTML.replace(/<!-.*?->/g, '') ===
             '<div class="styling-directive">```</div>'+
-            '<code class="block">ignored\n(println "Hello, world!")\n</code>'+
+            '<pre><code class="block">ignored\n(println "Hello, world!")\n</code></pre>'+
             '<div class="styling-directive">```</div>\n'+
             'This should show up as monospace, preformatted text ^');
 
@@ -312,8 +312,8 @@ describe("An incoming chat Message", function () {
         expect(msg_el.innerHTML.replace(/<!-.*?->/g, '')).toBe(
             '<blockquote>'+
                 '<div class="styling-directive">```</div>'+
-                '<code class="block">\u200Bignored\n\u200B\u200B&lt;span&gt;&lt;/span&gt; (println "Hello, world!")\n\u200B'+
-                '</code><div class="styling-directive">```</div>\n\u200B\u200B'+
+                '<pre><code class="block">\u200Bignored\n\u200B\u200B&lt;span&gt;&lt;/span&gt; (println "Hello, world!")\n\u200B'+
+                '</code></pre><div class="styling-directive">```</div>\n\u200B\u200B'+
                 'This should show up as monospace, preformatted text ^'+
             '</blockquote>');
 

src/plugins/muc-views/styles/muc-occupants.scss

@@ -1,6 +1,12 @@
 .conversejs {
     converse-muc.chatroom {
 
+        converse-icon {
+            svg {
+                fill: var(--chatroom-head-fg-color);
+            }
+        }
+
         .chat-status--avatar {
             background: var(--occupants-background-color);
             border: 1px solid var(--occupants-background-color);

src/shared/chat/styles/unfurl.scss

@@ -3,21 +3,20 @@
 @import "shared/styles/_mixins.scss";
 
 .conversejs {
-    @import "bootstrap/scss/card";
-
     converse-message-unfurl {
-        .card--unfurl {
-            background-color: var(--chat-content-background-color);
-            .card-body {
-                padding: 0.75rem;
-                .card-title {
-                    font-size: 95%;
-                    font-weight: bold;
+        .card {
+            background-color: var(--background);
+            &.card--unfurl {
+                .card-body {
+                    .card-title {
+                        font-size: 95%;
+                        font-weight: bold;
+                    }
                 }
-            }
-            .card-text {
-                converse-rich-text {
-                    font-size: 90%;
+                .card-text {
+                    converse-rich-text {
+                        font-size: 90%;
+                    }
                 }
             }
         }

src/shared/rich-text.js

@@ -424,7 +424,7 @@ const styling_templates = {
     // i is the offset of this directive relative to the start of the original message
     'emphasis': (txt, i, options) => html`<span class="styling-directive">_</span><i>${renderStylingDirectiveBody(txt, i, options)}</i><span class="styling-directive">_</span>`,
     'preformatted': txt => html`<span class="styling-directive">\`</span><code>${txt}</code><span class="styling-directive">\`</span>`,
-    'preformatted_block': txt => html`<div class="styling-directive">\`\`\`</div><code class="block">${txt}</code><div class="styling-directive">\`\`\`</div>`,
+    'preformatted_block': txt => html`<div class="styling-directive">\`\`\`</div><pre><code class="block">${txt}</code></pre><div class="styling-directive">\`\`\`</div>`,
     'quote': (txt, i, options) => html`<blockquote>${renderStylingDirectiveBody(txt, i, options)}</blockquote>`,
     'strike': (txt, i, options) => html`<span class="styling-directive">~</span><del>${renderStylingDirectiveBody(txt, i, options)}</del><span class="styling-directive">~</span>`,
     'strong': (txt, i, options) => html`<span class="styling-directive">*</span><b>${renderStylingDirectiveBody(txt, i, options)}</b><span class="styling-directive">*</span>`,

src/shared/styles/messages.scss

@@ -14,8 +14,8 @@
             margin-left: 0.5em;
             margin-bottom: 0.25em;
             padding-right: 1em;
-            color: var(--subdued-color);
-            border-left: 0.3em solid var(--subdued-color);
+            color: var(--chat-msg-quote-color);
+            border-left: 0.3em solid var(--chat-msg-quote-color);
             padding-left: 0.5em;
             display: inline-block;
         }

src/shared/styles/themes/classic.scss

@@ -168,9 +168,6 @@
 
     --overlayed-badge-color: var(--gray);
 
-    --close-color: var(--text-color);
-    --close-color: #585B51;
-
     --list-toggle-color: var(--gray);
     --list-toggle-hover-color: #585B51;
     --list-item-hover-color: rgba(0, 0, 0, 0.035);
@@ -183,5 +180,9 @@
     --list-item-action-hover-color: var(--inverse-link-color);
     --list-group-item-bg-color: var(--background);
 
+    --chat-msg-quote-color: var(--subdued-color);
     --chat-msg-hover-color: var(--list-item-hover-color);
+
+    --close-color: var(--text-color);
+    --close-color: #585B51;
 }

src/shared/styles/themes/dracula.scss

@@ -33,7 +33,7 @@
     --converse-secondary-rgb: var(--cyan-rgb);
 
     // Base theme variables
-    --subdued-color: var(--foreground);
+    --subdued-color: var(--comment);
     --muc-color: var(--orange);
     --chat-color: var(--green);
     --disabled-color-bg: lightgray;
@@ -68,6 +68,11 @@
     --controlbox-pane-background-color: var(--background);
     --controlbox-pane-bg-hover-color: var(--list-item-hover-color);
 
+    .card {
+        --converse-card-border-color: var(--comment);
+    }
+
+    --chat-msg-quote-color: var(--heading-color);
     --chat-msg-hover-color: var(--current-line);
     --chat-textarea-color: var(--foreground);
 
@@ -136,7 +141,7 @@
     --controlbox-text-color: var(--foreground);
     --message-text-color: var(--foreground);
     --text-color: var(--foreground);
-    --text-color-lighten-15-percent: var(--yellow);
+    --text-color-lighten-15-percent: var(--pink);
     --text-color-invert: var(--background);
 
     --message-author-color: var(--purple);