Update static/script.js

static/script.js

@@ -156,18 +156,20 @@ function displaySelectedIngredients() {
         nameSpan.textContent = ingredient.name;
         nameSpan.style.flex = '1';
         const removeButton = document.createElement('button');
-        removeButton.textContent = 'Remove';
+        removeButton.innerHTML = '✖'; // Unicode for "X" symbol
         removeButton.onclick = () => {
             selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
             displaySelectedIngredients();
         };
         removeButton.style.marginLeft = '10px';
         removeButton.style.padding = '2px 8px';
-        removeButton.style.backgroundColor = '#f44336';
-        removeButton.style.color = 'white';
+        removeButton.style.backgroundColor = '#000000'; // Black background to match image
+        removeButton.style.color = 'white'; // White "X" to match image
         removeButton.style.border = 'none';
         removeButton.style.borderRadius = '5px';
         removeButton.style.cursor = 'pointer';
+        removeButton.style.fontSize = '16px'; // Adjust size for visibility
+        removeButton.style.lineHeight = '1'; // Ensure "X" is centered
         div.appendChild(nameSpan);
         div.appendChild(removeButton);
         selectedArea.appendChild(div);