Add hover color for svg icons

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

@@ -8,7 +8,7 @@ export default (o) => {
     return html`
         <div class="occupants-header">
             <i class="hide-occupants" @click=${o.closeSidebar}>
-                <converse-icon color="var(--text-color)" class="fa fa-times" size="1em"></converse-icon>
+                <converse-icon color="var(--subdued-color)" class="fa fa-times" size="1em"></converse-icon>
             </i>
             <div class="occupants-header--title">
                 <span class="occupants-heading">${i18n_participants}</span>

src/plugins/profile/templates/profile.js

@@ -8,14 +8,14 @@ import { html } from "lit";
 function tpl_signout (o) {
     const i18n_logout = __('Log out');
     return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${o.logout}>
-        <converse-icon color="var(--subdued-color)" class="fa fa-sign-out-alt" size="1em"></converse-icon>
+        <converse-icon class="fa fa-sign-out-alt" size="1em"></converse-icon>
     </a>`
 }
 
 function tpl_user_settings_button (o) {
     const i18n_details = __('Show details about this chat client');
     return html`<a class="controlbox-heading__btn show-client-info align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}>
-        <converse-icon color="var(--subdued-color)" class="fa fa-cog" size="1em"></converse-icon>
+        <converse-icon class="fa fa-cog" size="1em"></converse-icon>
     </a>`;
 }
 

src/plugins/roomslist/templates/roomslist.js

@@ -70,12 +70,12 @@ export default (o) => {
             <a class="controlbox-heading__btn show-list-muc-modal"
                 @click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
                 title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal">
-                    <converse-icon class="fa fa-list-ul right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
+                    <converse-icon class="fa fa-list-ul right" path-prefix="/dist" size="1em"></converse-icon>
             </a>
             <a class="controlbox-heading__btn show-add-muc-modal"
                 @click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
                 title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal">
-                    <converse-icon class="fa fa-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
+                    <converse-icon class="fa fa-plus right" path-prefix="/dist" size="1em"></converse-icon>
             </a>
         </div>
 

src/plugins/rosterview/styles/roster.scss

@@ -32,7 +32,6 @@
 
         span {
             padding: 0.3em;
-            cursor: pointer;
             min-width: 25px;
             text-align: center;
         }
@@ -42,6 +41,7 @@
             margin: 0.2em;
             font-size: calc(var(--font-size) - 2px);
         }
+
         .state-type {
             font-size: calc(var(--font-size) - 2px);
             width: 100%;

src/plugins/rosterview/templates/roster.js

@@ -47,7 +47,7 @@ export default (el) => {
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--contacts">${i18n_heading_contacts}</span>
             <a class="controlbox-heading__btn sync-contacts" @click=${ev => el.syncContacts(ev)} title="${i18n_title_sync_contacts}">
-                <converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
+                <converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" size="1em"></converse-icon>
             </a>
             ${ api.settings.get('allow_contact_requests') ? html`
                 <a class="controlbox-heading__btn add-contact"
@@ -55,7 +55,7 @@ export default (el) => {
                     title="${i18n_title_add_contact}"
                     data-toggle="modal"
                     data-target="#add-contact-modal">
-                    <converse-icon class="fa fa-user-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1.25em"></converse-icon>
+                    <converse-icon class="fa fa-user-plus right" size="1.25em"></converse-icon>
                 </a>` : '' }
         </div>
         <converse-roster-filter></converse-roster-filter>

src/plugins/rosterview/templates/roster_filter.js

@@ -21,9 +21,9 @@ export default (o) => {
             @submit=${o.submitFilter}>
             <div class="form-inline flex-nowrap">
                 <div class="filter-by d-flex flex-nowrap">
-                    <span @click=${o.changeTypeFilter} class="fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span>
-                    <span @click=${o.changeTypeFilter} class="fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span>
-                    <span @click=${o.changeTypeFilter} class="fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span>
+                    <span @click=${o.changeTypeFilter} class="clickable fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span>
+                    <span @click=${o.changeTypeFilter} class="clickable fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span>
+                    <span @click=${o.changeTypeFilter} class="clickable fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span>
                 </div>
                 <div class="btn-group">
                     <input .value="${o.filter_text || ''}"

src/shared/components/styles/icon.scss

@@ -2,9 +2,17 @@ converse-icon {
     display: inline-block;
     padding: 0;
     margin: 0;
-    fill: var(--subdued-color);
+    svg {
+	fill: var(--subdued-color);
+    }
+}
 
-    &:hover {
-	fill: var(--text-color);
+a, .clickable {
+    converse-icon {
+	svg {
+	    &:hover {
+		fill: var(--icon-hover-color);
+	    }
+	}
     }
 }

src/shared/styles/_core.scss

@@ -211,7 +211,7 @@
       cursor: pointer;
     }
 
-    a, a:visited, a:not([href]):not([tabindex]) {
+    a, a:visited, a:not([href]):not([tabindex]), .clickable {
         text-decoration: none;
         color: var(--link-color);
         text-shadow: none;
@@ -223,14 +223,19 @@
         }
 
         &.fa, &.far, &.fas {
-            fill: var(--subdued-color);
             color: var(--subdued-color);
             &:hover {
-                color: var(--gray-color);
+                color: var(--icon-hover-color);
             }
         }
     }
 
+    .clickable {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
     svg {
         border-radius: var(--chatbox-border-radius);
     }
@@ -239,10 +244,6 @@
         color: var(--subdued-color);
     }
 
-    .fa:hover, .far:hover, .fas:hover {
-        color: var(--gray-color);
-    }
-
     q {
       quotes: "“" "”" "‘" "’";
       &.reason {

src/shared/styles/themes/classic.scss

@@ -19,6 +19,7 @@
 
     // ---
 
+    --icon-hover-color: var(--text-color);
     --info-color: #1E9652; // $dark-green
 
     --chat-status-online: var(--green);

src/shared/styles/themes/dracula.scss

@@ -22,6 +22,7 @@
 
     // ---
 
+    --icon-hover-color: var(--cyan);
     --gray-color: var(--comment);
 
     --highlight-color: var(--foreground);