Harmonize CSS

static/app.js

@@ -59,7 +59,7 @@ const ui = {
   inputIcon: el('[data-role="input-icon"]'),
   sheet: el('[data-role="sheet"]'),
   options: el('[data-role="options"]'),
-  source: el('.card.source'),
+  avr: el('.card.avr'),
   joined: el('[data-role="joined"]'),
   avrNowPlaying: el('[data-role="avr-now-playing"]'),
   avrCover: el('[data-role="avr-cover"]'),
@@ -129,7 +129,7 @@ els('.room').forEach((node) => {
     prev: el('[data-role="prev"]', node),
     play: el('[data-role="play"]', node),
     next: el('[data-role="next"]', node),
-    spotify: el('.spotify-row', node),   // the resume buttons and the host toggle
+    sources: el('.sources', node),   // the resume buttons and the host toggle
     nowPlaying: el('[data-role="now-playing"]', node),
     cover: el('[data-role="cover"]', node),
     song: el('[data-role="song"]', node),
@@ -203,7 +203,7 @@ function paintRoom(room) {
   // is not on offer. They hide one by one rather than the row hiding with
   // them, because the row also holds the host toggle, which stays put and
   // merely disables.
-  els('.spotify', room.spotify).forEach((button) => {
+  els('.spotify', room.sources).forEach((button) => {
     const holding = button.dataset.account === room.spotifyAccount;
     button.hidden = !room.available || room.grouped;
     button.setAttribute('aria-pressed', String(holding));
@@ -214,8 +214,8 @@ function paintRoom(room) {
       `${holding ? 'Disconnect' : 'Resume'} ${button.querySelector('span').textContent}'s Spotify`);
   });
 
-  room.toggle.disabled = !room.available;
-  room.toggle.classList.toggle('busy', room.busy);
+  room.toggle.disabled = !room.available || room.busy;
+  room.toggle.classList.toggle('loading', room.busy);
   room.toggle.setAttribute('aria-pressed', String(room.grouped));
   // Out of the group the button names where tapping it sends the room; in it,
   // where the card sits already says so, so the button says what it does.
@@ -414,8 +414,8 @@ function paintGrouping() {
   // A film running on the Zidoo counts as the AVR playing too, grouped rooms or not.
   const playing = inside.some((node) => node.classList.contains('playing'))
     || avrNowPlaying?.play_state === 'play';
-  ui.source.classList.toggle('playing', playing);
-  ui.source.classList.toggle('on-top', playing);
+  ui.avr.classList.toggle('playing', playing);
+  ui.avr.classList.toggle('on-top', playing);
 }
 
 /* Press and hold to keep moving, accelerating as you hold. */