Icon fixes

static/js/main.js

@@ -1229,7 +1229,7 @@ function refreshPlaylistUI() {
 
         // Move Up button
         const moveUpBtn = document.createElement('button');
-        moveUpBtn.textContent = '▲'; // Up arrow symbol
+        moveUpBtn.innerHTML = '<i class="fa-solid fa-turn-up"></i>'; // Up arrow symbol
         moveUpBtn.classList.add('move-button');
         moveUpBtn.onclick = () => {
             if (index > 0) {
@@ -1244,7 +1244,7 @@ function refreshPlaylistUI() {
 
         // Move Down button
         const moveDownBtn = document.createElement('button');
-        moveDownBtn.textContent = '▼'; // Down arrow symbol
+        moveDownBtn.innerHTML = '<i class="fa-solid fa-turn-down"></i>'; // Down arrow symbol
         moveDownBtn.classList.add('move-button');
         moveDownBtn.onclick = () => {
             if (index < playlist.length - 1) {
@@ -1259,7 +1259,7 @@ function refreshPlaylistUI() {
 
         // Remove button
         const removeBtn = document.createElement('button');
-        removeBtn.textContent = '✖';
+        removeBtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
         removeBtn.classList.add('remove-button');
         removeBtn.onclick = () => {
             playlist.splice(index, 1);
@@ -1278,12 +1278,12 @@ function toggleSaveCancelButtons(show) {
     if (actionButtons) {
         // Show/hide all buttons except Save and Cancel
         actionButtons.querySelectorAll('button:not(.save-cancel)').forEach(button => {
-            button.style.display = show ? 'none' : 'inline-block';
+            button.style.display = show ? 'none' : 'flex';
         });
 
         // Show/hide Save and Cancel buttons
         actionButtons.querySelectorAll('.save-cancel').forEach(button => {
-            button.style.display = show ? 'inline-block' : 'none';
+            button.style.display = show ? 'flex' : 'none';
         });
     } else {
         logMessage('Error: Action buttons container not found.', LOG_TYPE.ERROR);
@@ -1406,7 +1406,7 @@ function closeStickySection(sectionId) {
         // Reset the fullscreen button text if it exists
         const fullscreenButton = section.querySelector('.fullscreen-button');
         if (fullscreenButton) {
-            fullscreenButton.textContent = '<i class="fa-solid fa-compress"></i>'; // Reset to enter fullscreen icon/text
+            fullscreenButton.innerHtml = '<i class="fa-solid fa-compress"></i>'; // Reset to enter fullscreen icon/text
         }
 
         logMessage(`Closed section: ${sectionId}`);
@@ -1455,7 +1455,7 @@ function attachFullScreenListeners() {
                         // Reset the fullscreen button text for other sections
                         const otherFullscreenButton = section.querySelector('.fullscreen-button');
                         if (otherFullscreenButton) {
-                            otherFullscreenButton.textContent = '⛶'; // Enter fullscreen icon/text
+                            otherFullscreenButton.innerHTML = '<i class="fa-solid fa-expand"></i>'; // Enter fullscreen icon/text
                         }
                     }
                 });
@@ -1464,9 +1464,9 @@ function attachFullScreenListeners() {
 
                 // Update button icon or text
                 if (stickySection.classList.contains('fullscreen')) {
-                    this.textContent = '-'; // Exit fullscreen icon/text
+                    this.innerHTML = '<i class="fa-solid fa-compress"></i>'; // Exit fullscreen icon/text
                 } else {
-                    this.textContent = '⛶'; // Enter fullscreen icon/text
+                    this.innerHTML = '<i class="fa-solid fa-expand"></i>'; // Enter fullscreen icon/text
                 }
             } else {
                 console.error('Error: Fullscreen button is not inside a sticky section.');
@@ -1526,7 +1526,7 @@ async function updateCurrentlyPlaying() {
 
             // Update play/pause button
             const pausePlayButton = document.getElementById('pausePlayCurrent');
-            if (pausePlayButton) pausePlayButton.textContent = pause_requested ? '▶' : '⏸';
+            if (pausePlayButton) pausePlayButton.innerHTML = pause_requested ? '<i class="fa-solid fa-play"></i>' : '<i class="fa-solid fa-pause"></i>';
         } else {
             document.body.classList.remove('playing');
         }

templates/index.html

@@ -59,9 +59,18 @@
 
             <!-- Action Buttons -->
             <div class="action-buttons">
-                <button onclick="runThetaRho()" class="cta" >Run</button>
-                <button id="toggle-playlist-button" onclick="toggleSecondaryButtons('add-to-playlist-container', populatePlaylistDropdown)">Add to Playlist</button>
-                <button onclick="removeCurrentPattern()" class="cancel remove-button hidden">Delete</button>
+                <button onclick="runThetaRho()" class="cta" >
+                    <i class="fa-solid fa-play"></i>
+                    <span>Play</span>
+                </button>
+                <button id="toggle-playlist-button" onclick="toggleSecondaryButtons('add-to-playlist-container', populatePlaylistDropdown)">
+                    <i class="fa-solid fa-list-ul"></i>
+                    <span class="small">Add to Playlist</span>
+                </button>
+                <button onclick="removeCurrentPattern()" class="cancel remove-button hidden">
+                    <i class="fa-solid fa-trash"></i>
+                    <span class="small">Delete</span>
+                </button>
             </div>
 
             <!-- Add to Playlist Section -->
@@ -180,9 +189,18 @@
             </ul>
             <hr/>
             <div class="action-buttons">
-                <button onclick="runPlaylist()" class="cta">Play</button>
-                <button onclick="toggleSecondaryButtons('rename-playlist-container')">Rename</button>
-                <button onclick="deleteCurrentPlaylist()" class="cancel">Delete</button>
+                <button onclick="runPlaylist()" class="cta">
+                    <i class="fa-solid fa-play"></i>
+                    <span>Play</span>
+                </button>
+                <button onclick="toggleSecondaryButtons('rename-playlist-container')">
+                    <i class="fa-solid fa-pencil"></i>
+                    <span class="small">Rename</span>
+                </button>
+                <button onclick="deleteCurrentPlaylist()" class="cancel">
+                    <i class="fa-solid fa-trash"></i>
+                    <span class="small">Delete</span>
+                </button>
                 <!-- Save and Cancel buttons -->
                 <button onclick="savePlaylist()" class="save-cancel cta" style="display: none;">
                     <i class="fa-solid fa-floppy-disk"></i>
@@ -190,7 +208,7 @@
                 </button>
                 <button onclick="cancelPlaylistChanges()" class="save-cancel cancel" style="display: none;">
                     <i class="fa-solid fa-xmark"></i>
-                    <span>Cancel</span>
+                    <span class="small">Cancel</span>
                 </button>
             </div>
             <!-- Playlist Rename Section -->
@@ -216,7 +234,7 @@
             <div class="header">
                 <h2>Device Controls</h2>
                 <button id="open-settings-button" class="no-bg" onclick="toggleSettings()">
-                    <i class="fa-solid fa-wrench"></i>
+                    <i class="fa-solid fa-gears"></i>
                 </button>
             </div>
             <div class="action-buttons square">
@@ -280,7 +298,7 @@
         <section id="settings-container">
             <div class="header">
                 <h2>Settings</h2>
-                <button class="no-bg" onclick="toggleSettings()">
+                <button class="close-button no-bg" onclick="toggleSettings()">
                     <i class="fa-solid fa-xmark"></i>
                 </button>
             </div>