a bit more styling for site icon & add "remove icon" button

Author: ilicfilip

assets/css/onboarding/onboarding.css

@@ -1221,12 +1221,42 @@
 		border-color: var(--prpl-color-field-border-active);
 	}
 
+	/* When an image has been uploaded. */
+	.prpl-file-drop-zone.has-image {
+		border-color: var(--prpl-color-field-border-active);
+		background-color: var(--prpl-background-field-active);
+
+		& > .prpl-icon-image,
+		& > p,
+		& > .prpl-file-upload-hints {
+			display: none;
+		}
+
+		.prpl-file-preview img {
+			border: 2px solid var(--prpl-color-field-border);
+			border-radius: 8px;
+			padding: 8px;
+			background: var(--prpl-color-background-white);
+		}
+	}
+
 	.prpl-file-browse-link {
 		color: var(--prpl-color-link);
 		text-decoration: underline;
 		cursor: pointer;
 	}
 
+	.prpl-file-remove-btn {
+		border: none;
+		background: none;
+		cursor: pointer;
+		padding: 0;
+		margin: 12px 0 0;
+		font-size: 16px;
+		color: var(--prpl-color-link);
+		text-decoration: underline;
+	}
+
 	.prpl-file-upload-hints {
 		display: flex;
 		flex-direction: column;

assets/js/onboarding/OnboardTask.js

@@ -322,6 +322,13 @@ class PrplOnboardTask {
 				);
 			}
 		} );
+
+		// Remove button handler.
+		const removeBtn = uploadContainer.querySelector( '.prpl-file-remove-btn' );
+		const previewDiv = uploadContainer.querySelector( '.prpl-file-preview' );
+		removeBtn?.addEventListener( 'click', () => {
+			this.removeUploadedFile( uploadContainer, previewDiv );
+		} );
 	}
 
 	async uploadFile( file, statusDiv ) {
@@ -365,6 +372,22 @@ class PrplOnboardTask {
 				if ( previewDiv ) {
 					previewDiv.innerHTML = `<img src="${ response.source_url }" alt="${ file.name }" />`;
 					previewDiv.style.display = 'block';
+
+					// Add has-image class to drop zone to update styling.
+					const dropZone = this.taskContent.querySelector(
+						'.prpl-file-drop-zone'
+					);
+					if ( dropZone ) {
+						dropZone.classList.add( 'has-image' );
+
+						// Show the remove button.
+						const removeBtn = dropZone.querySelector(
+							'.prpl-file-remove-btn'
+						);
+						if ( removeBtn ) {
+							removeBtn.hidden = false;
+						}
+					}
 				}
 				return response;
 			} )
@@ -402,4 +425,46 @@ class PrplOnboardTask {
 			return false;
 		} );
 	}
+
+	/**
+	 * Remove uploaded file and reset the drop zone state.
+	 * @param {HTMLElement} dropZone   The drop zone element.
+	 * @param {HTMLElement} previewDiv The preview container element.
+	 */
+	removeUploadedFile( dropZone, previewDiv ) {
+		// Clear the preview.
+		previewDiv.innerHTML = '';
+		previewDiv.style.display = 'none';
+
+		// Remove has-image class.
+		dropZone.classList.remove( 'has-image' );
+
+		// Hide the remove button.
+		const removeBtn = dropZone.querySelector( '.prpl-file-remove-btn' );
+		if ( removeBtn ) {
+			removeBtn.hidden = true;
+		}
+
+		// Clear the file input.
+		const fileInput = dropZone.querySelector( 'input[type="file"]' );
+		if ( fileInput ) {
+			fileInput.value = '';
+		}
+
+		// Clear the hidden post_id input and trigger validation.
+		const postIdInput = dropZone.querySelector( 'input[name="post_id"]' );
+		if ( postIdInput ) {
+			postIdInput.value = '';
+			postIdInput.dispatchEvent(
+				new CustomEvent( 'change', { bubbles: true } )
+			);
+		}
+
+		// Show status div again.
+		const statusDiv = dropZone.querySelector( '.prpl-upload-status' );
+		if ( statusDiv ) {
+			statusDiv.style.display = '';
+			statusDiv.textContent = '';
+		}
+	}
 }

views/onboarding/tasks/core-siteicon.php

@@ -43,6 +43,7 @@
 			<input type="hidden" name="post_id" value="" data-validate="required">
 			<div class="prpl-upload-status"></div> <!-- WIP -->
 			<div class="prpl-file-preview"></div>
+			<button type="button" class="prpl-file-remove-btn" hidden><?php \esc_html_e( 'Remove icon', 'progress-planner' ); ?></button>
 		</div>
 		<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-secondary">
 			<?php \esc_html_e( 'Set site icon', 'progress-planner' ); ?>