css: Fix headlines header

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

@@ -3,7 +3,6 @@
         .chat-head {
             display: flex;
             flex-direction: row;
-            color: #ffffff;
             font-size: 100%;
             margin: 0;
             padding: 0;
@@ -63,7 +62,6 @@
             }
 
             .chatbox-btn {
-                color: white;
                 &:active {
                     position: relative;
                     top: 1px;

src/plugins/disco-views/tests/disco-browser.js

@@ -1,6 +1,6 @@
 const { u } = converse.env;
 
-fdescribe('DiscoBrowser', function () {
+describe('DiscoBrowser', function () {
     beforeAll(() => jasmine.addMatchers({ toEqualStanza: jasmine.toEqualStanza }));
 
     it(

src/plugins/headlines-view/styles/headlines-head.scss

@@ -4,17 +4,20 @@
             converse-headlines-heading {
                 &.chat-head {
                     .chatbox-title--no-desc {
-                        padding: 0.75rem 1rem;
+                        padding: 1rem 0.75rem;
                     }
 
                     &.chat-head-chatbox {
-                        background-color: var(--background-color);
+                        background-color: var(--headlines-header-bg-color);
                         border-bottom: 0.15em solid var(--headlines-color);
                     }
-                    background-color: var(--background-color);
+
+                    .chat-head__desc {
+                        color: var(--headlines-header-fg-color) !important;
+                    }
 
                     .chatbox-title__text {
-                        color: var(--headlines-color) !important;
+                        color: var(--headlines-header-fg-color) !important;
                     }
 
                     converse-dropdown {
@@ -30,7 +33,7 @@
                     .chatbox-btn {
                         converse-icon {
                             svg {
-                                fill: var(--headlines-color);
+                                fill: var(--headlines-header-fg-color);
                             }
                         }
                     }

src/plugins/headlines-view/styles/headlines.scss

@@ -1,4 +1,9 @@
 .conversejs {
+    converse-headlines-feeds-list {
+        margin-bottom: 1em;
+        display: block;
+    }
+
     .chatbox {
         &.headlines {
             .chat-body {

src/shared/styles/themes/classic.scss

@@ -78,7 +78,6 @@
     --error-color: var(--red);
     --focus-color: var(--light-blue);
     --heading-color: var(--light-blue);
-    --headlines-color: var(--orange);
     --link-color: #2D3991;
     --subdued-color: gray;
 
@@ -99,6 +98,11 @@
     --muc-header-fg-color: var(--background-color);
     --muc-header-bg-color: var(--muc-color);
 
+    // Headlines related colors
+    --headlines-color: var(--orange);
+    --headlines-header-fg-color: var(--background-color);
+    --headlines-header-bg-color: var(--headlines-color);
+
     // Derived colors
     // --------------
     --brand-heading-color: var(--blue);

src/shared/styles/themes/cyberpunk.scss

@@ -20,6 +20,7 @@
     --red: #e44c55;
     --red-rgb: 228, 76, 84;
     --teal: #3f81a2;
+    --teal-rgb: 63, 130, 162;
     --white: #efefef;
     --yellow: #ffc107;
     --yellow-rgb: 255, 193, 7;
@@ -31,8 +32,6 @@
     --background-color-lighter: #2c174c;
     --foreground-color: var(--white);
 
-    --chat-rgb: var(--green-rgb);
-    --muc-rgb: var(--orange-rgb);
 
     // Bootstrap variables
     --primary-color: var(--pink) !important;
@@ -100,7 +99,6 @@
     --error-color: var(--red);
     --focus-color: var(--secondary-color);
     --heading-color: var(--purple);
-    --headlines-color: var(--indigo);
     --link-color: var(--cyan);
     --subdued-color: gray;
 
@@ -113,14 +111,22 @@
 
     // 1:1 Chat-related colors
     --chat-color: var(--green);
+    --chat-rgb: var(--green-rgb);
     --chat-header-fg-color: var(--chat-color);
     --chat-header-bg-color: var(--background-color);
 
     // MUC-related colors
     --muc-color: var(--orange);
+    --muc-rgb: var(--orange-rgb);
     --muc-header-fg-color: var(--muc-color);
     --muc-header-bg-color: var(--background-color);
 
+    // Headlines-related colors
+    --headlines-color: var(--teal);
+    --headlines-rgb: var(--teal-rgb);
+    --headlines-header-fg-color: var(--headlines-color);
+    --headlines-header-bg-color: var(--background-color);
+
     // Derived colors
     // --------------
     --brand-heading-color: var(--cyan);
@@ -257,7 +263,17 @@
             0 0 4rem rgba(var(--chat-rgb), 0.1) !important;
     }
 
-    .chat-head-chatbox {
+    converse-headlines-heading {
+        box-shadow:
+            0 0 1rem 0rem rgba(var(--headlines-rgb), 0.5) inset,
+            0 0 2rem 0rem rgba(var(--headlines-rgb), 0.4) inset,
+            0 0 4rem 2rem rgba(var(--headlines-rgb), 0.2) inset,
+            0 0 1rem 0rem rgba(var(--headlines-rgb), 0.4),
+            0 0 2rem 0rem rgba(var(--headlines-rgb), 0.2),
+            0 0 4rem 0rem rgba(var(--headlines-rgb), 0.1) !important;
+    }
+
+    converse-chat-heading {
         box-shadow:
             0 0 1rem 0rem rgba(var(--chat-rgb), 0.5) inset,
             0 0 2rem 0rem rgba(var(--chat-rgb), 0.4) inset,

src/shared/styles/themes/dracula.scss

@@ -92,7 +92,6 @@
     --error-color: var(--red);
     --focus-color: var(--pink);
     --heading-color: var(--purple);
-    --headlines-color: var(--pink);
     --link-color: var(--cyan);
     --subdued-color: var(--gray);
 
@@ -113,6 +112,11 @@
     --muc-header-fg-color: var(--muc-color);
     --muc-header-bg-color: var(--background-color);
 
+    // 1:1 headlines-related colors
+    --headlines-color: var(--pink);
+    --headlines-header-fg-color: var(--headlines-color);
+    --headlines-header-bg-color: var(--background-color);
+
     // Derived colors
     // --------------
     --brand-heading-color: var(--cyan);

src/shared/styles/themes/nordic.scss

@@ -102,7 +102,6 @@
     --error-color: var(--red);
     --focus-color: var(--secondary-color);
     --heading-color: var(--purple);
-    --headlines-color: var(--yellow);
     --link-color: var(--blue-2);
     --subdued-color: gray;
 
@@ -127,6 +126,11 @@
     --muc-header-fg-color: var(--background-color);
     --muc-header-bg-color: var(--muc-color);
 
+    // Headlines-related colors
+    --headlines-color: var(--purple);
+    --headlines-header-fg-color: var(--background-color);
+    --headlines-header-bg-color: var(--headlines-color);
+
     // Derived colors
     // --------------
     --brand-heading-color: var(--green-4);