Solve "transfer-complete" and "receive-complete" status detection via css instead of adding a new class

Author: schlagmichdoch

public/scripts/ui.js

@@ -807,16 +807,11 @@ class PeerUI {
         this.$el.querySelector('.status').innerText = statusName;
         this._currentStatus = status;
 
-        if (status === "transfer-complete" || status === "receive-complete") {
-            this.$el.classList.remove('blink');
-
+        if (status.indexOf("-complete") || status === "receive-complete") {
             this.statusTimeout = setTimeout(() => {
                 this.setProgress(0, null);
             }, 10000);
         }
-        else {
-            this.$el.classList.add('blink');
-        }
     }
 
     _onDrop(e) {

public/styles/styles-deferred.css

@@ -188,12 +188,12 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
     display: none;
 }
 
-x-peer:not([status].blink):hover,
-x-peer:not([status].blink):focus {
+x-peer:is(:not([status]), [status$=-complete]):hover,
+x-peer:is(:not([status]), [status$=-complete]):focus {
     transform: scale(1.05);
 }
 
-x-peer[status].blink x-icon {
+x-peer[status]:not([status$=-complete]) x-icon {
     box-shadow: none;
 }
 
@@ -249,15 +249,15 @@ x-peer[status] .device-name {
     display: none;
 }
 
-x-peer[status].blink {
+x-peer[status]:not([status$=-complete]) {
     pointer-events: none;
 }
 
 x-peer {
     animation: pop 600ms ease-out 1;
 }
 
-x-peer[status]:not(.blink) .status {
+x-peer[status$=-complete] .status {
     color: var(--primary-color);
 }