Style tweaks

src/shared/modals/templates/user-details.js

@@ -13,7 +13,7 @@ function tplUnblockButton(el) {
     const i18n_block = __('Remove from blocklist');
     return html`
         <button type="button" @click="${(ev) => el.unblockContact(ev)}" class="btn btn-danger">
-            <converse-icon class="fas fa-times" color="var(--foreground-color)" size="1em"></converse-icon
+            <converse-icon class="fas fa-times" color="var(--background-color)" size="1em"></converse-icon
             >&nbsp;${i18n_block}
         </button>
     `;
@@ -26,7 +26,7 @@ function tplBlockButton(el) {
     const i18n_block = __('Add to blocklist');
     return html`
         <button type="button" @click="${(ev) => el.blockContact(ev)}" class="btn btn-danger">
-            <converse-icon class="fas fa-times" color="var(--foreground-color)" size="1em"></converse-icon
+            <converse-icon class="fas fa-times" color="var(--background-color)" size="1em"></converse-icon
             >&nbsp;${i18n_block}
         </button>
     `;
@@ -39,7 +39,7 @@ function tplRemoveButton(el) {
     const i18n_remove_contact = __('Remove as contact');
     return html`
         <button type="button" @click="${(ev) => el.removeContact(ev)}" class="btn btn-danger remove-contact">
-            <converse-icon class="fas fa-trash-alt" color="var(--foreground-color)" size="1em"></converse-icon
+            <converse-icon class="fas fa-trash-alt" color="var(--background-color)" size="1em"></converse-icon
             >&nbsp;${i18n_remove_contact}
         </button>
     `;

src/shared/styles/buttons.scss

@@ -35,14 +35,15 @@
         --converse-btn-disabled-color: var(--primary-color);
         --converse-btn-hover-bg: var(--primary-color);
         --converse-btn-hover-border-color: var(--primary-color-hover);
+        --converse-btn-hover-color: var(--background-color);
     }
     .btn-primary {
         --converse-btn-color: var(--button-text-color);
         --converse-btn-bg: var(--primary-color);
     }
     .btn-outline-primary {
-        --converse-btn-color: var(--primary-color);
         --converse-btn-bg: var(--background);
+        --converse-btn-color: var(--primary-color);
     }
 
     .btn-secondary,
@@ -55,6 +56,7 @@
         --converse-btn-disabled-color: var(--secondary-color);
         --converse-btn-hover-bg: var(--secondary-color);
         --converse-btn-hover-border-color: var(--secondary-color-hover);
+        --converse-btn-hover-color: var(--background-color);
     }
     .btn-secondary {
         --converse-btn-color: var(--button-text-color);
@@ -115,6 +117,7 @@
         --converse-btn-disabled-color: var(--danger-color);
         --converse-btn-hover-bg: var(--danger-color-hover);
         --converse-btn-hover-border-color: var(--danger-color-hover);
+        --converse-btn-hover-color: var(--background-color);
     }
     .btn-danger {
         --converse-btn-color: var(--button-text-color);
@@ -134,6 +137,7 @@
         --converse-btn-disabled-border-color: var(--info-color);
         --converse-btn-disabled-color: var(--info-color);
         --converse-btn-hover-bg: var(--info-color-dark);
+        --converse-btn-hover-border-color: var(--danger-color-hover);
         --converse-btn-hover-border-color: var(--info-color-dark);
     }
     .btn-info {

src/shared/styles/themes/dracula.scss

@@ -23,7 +23,7 @@
     --primary-color: var(--purple) !important;
     --secondary-color: var(--pink) !important;
     --success-color: var(--green);
-    --danger-color: var(--pink);
+    --danger-color: var(--red);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
     --converse-highlight-color: var(--yellow) !important;