CSS: Reuse `list-item-action` class for "Contact Requests" actions

css/converse.css

@@ -11176,8 +11176,6 @@ body.reset {
         padding-bottom: 0.3rem; }
       #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
         line-height: var(--line-height); }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.far, #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fas, #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
-          width: 1.5em; }
       #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
         padding: 0 0.2em 0 0; }
       #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
@@ -11271,7 +11269,7 @@ body.reset {
       font-size: var(--font-size-tiny);
       padding: 0;
       margin: 0 0 0 var(--inline-action-margin);
-      width: 1.6em;
+      width: 2em;
       color: var(--subdued-color); }
       #conversejs .items-list .list-item .list-item-action:before {
         font-size: var(--font-size); }
@@ -11282,6 +11280,8 @@ body.reset {
       #conversejs .items-list .list-item .list-item-action:hover {
         color: var(--list-toggle-hover-color);
         opacity: 1; }
+    #conversejs .items-list .list-item .list-item-action--visible {
+      opacity: 1 !important; }
     #conversejs .items-list .list-item.open {
       background-color: var(--list-item-open-color); }
       #conversejs .items-list .list-item.open:hover {

dist/converse.js

@@ -93967,11 +93967,11 @@ __e(o.display_name) +
  if (o.allow_chat_pending_contacts)  { ;
 __p += '\n</a>\n';
  } ;
-__p += '\n<a class="accept-xmpp-request fa fa-check"\n   aria-label="' +
+__p += '\n<a class="accept-xmpp-request list-item-action list-item-action--visible fa fa-check"\n   aria-label="' +
 __e(o.desc_accept) +
 '" title="' +
 __e(o.desc_accept) +
-'" href="#"></a>\n<a class="decline-xmpp-request fa fa-times"\n   aria-label="' +
+'" href="#"></a>\n<a class="decline-xmpp-request list-item-action list-item-action--visible  fa fa-times"\n   aria-label="' +
 __e(o.desc_decline) +
 '" title="' +
 __e(o.desc_decline) +

mockup/controlbox.html

@@ -119,13 +119,13 @@
             <ul class="items-list roster-group-contacts">
                 <li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
                     <span class="req-contact-name w-100">The Nurse</span>
-                    <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
-                    <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
+                    <a class="list-item-action list-item-action--visible accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
+                    <a class="list-item-action list-item-action--visible decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
                 </li>
                 <li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
                     <span class="req-contact-name w-100">Friar Laurence</span>
-                    <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
-                    <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
+                    <a class="list-item-action list-item-action--visible accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
+                    <a class="list-item-action list-item-action--visible decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
                 </li>
             </ul>
         </div>

sass/_lists.scss

@@ -53,7 +53,7 @@
                 font-size: var(--font-size-tiny);
                 padding: 0;
                 margin: 0 0 0 var(--inline-action-margin);
-                width: 1.6em;
+                width: 2em;
                 &:before {
                     font-size: var(--font-size);
                 }
@@ -70,6 +70,10 @@
                 }
             }
 
+            .list-item-action--visible {
+                opacity: 1 !important;
+            }
+
             &.open {
                 background-color: var(--list-item-open-color);
                 &:hover {

sass/_roster.scss

@@ -71,9 +71,6 @@
                 &.requesting-xmpp-contact {
                     a {
                         line-height: var(--line-height);
-                        &.far, &.fas, &.fa {
-                            width: 1.5em;
-                        }
                     }
                     .req-contact-name {
                         padding: 0 0.2em 0 0;

src/templates/requesting_contact.html

@@ -5,7 +5,7 @@
 {[ if (o.allow_chat_pending_contacts)  { ]}
 </a>
 {[ } ]}
-<a class="accept-xmpp-request fa fa-check"
+<a class="accept-xmpp-request list-item-action list-item-action--visible fa fa-check"
    aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
-<a class="decline-xmpp-request fa fa-times"
+<a class="decline-xmpp-request list-item-action list-item-action--visible  fa fa-times"
    aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>