From 2f9097a94a400090f291da2fa70a664a6dbf0fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Harun=20Ba=C5=A1i=C4=87?= <harun@bleech.de>
Date: Thu, 26 Sep 2024 17:52:14 +0200
Subject: [PATCH] feat(TestRun): adjust modal and actions success

---
 components/alert-actions/_style.scss | 18 +++++++++++++++++-
 components/alert-actions/index.php   |  1 +
 components/alert-actions/script.js   | 13 ++++++++++---
 components/modal/_style.scss         |  4 ++--
 components/test-run-page/_style.scss |  4 ++--
 5 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/alert-actions/_style.scss b/components/alert-actions/_style.scss
index 3624be6..6e425eb 100644
--- a/components/alert-actions/_style.scss
+++ b/components/alert-actions/_style.scss
@@ -83,14 +83,30 @@
 	&__modal {
 
 		&-action {
-			margin-top: 15px;
+			margin-top: 10px;
 			display: inline-flex;
 			align-items: center;
 			gap: 0.5rem;
 		}
 
+		&-action-success {
+			color: #00a32a;
+			font-size: 0.75rem;
+			margin-left: 0.5rem;
+			display: none;
+
+			&.is-active {
+				display: block;
+			}
+		}
+
 		.spinner {
 			margin: 0;
+			display: none;
+
+			&.is-active {
+				display: block;
+			}
 		}
 
 		textarea {
diff --git a/components/alert-actions/index.php b/components/alert-actions/index.php
index fd9af62..e632ef8 100644
--- a/components/alert-actions/index.php
+++ b/components/alert-actions/index.php
@@ -43,6 +43,7 @@
 					<div class="vrts-alert-actions__modal-action">
 						<button type="submit" class="button button-primary"><?php esc_html_e( 'Save Changes', 'visual-regression-tests' ); ?></button>
 						<span class="spinner"></span>
+						<span class="vrts-alert-actions__modal-action-success"><?php esc_html_e( 'Saved successfully.', 'visual-regression-tests' ); ?></span>
 					</div>
 				</form>
 			</div>
diff --git a/components/alert-actions/script.js b/components/alert-actions/script.js
index fa4aad3..7c8e732 100644
--- a/components/alert-actions/script.js
+++ b/components/alert-actions/script.js
@@ -16,6 +16,10 @@ class VrtsAlertActions extends window.HTMLElement {
 		this.$hideElementsForm = this.querySelector(
 			'[data-vrts-hide-elements-form]'
 		);
+		this.$spinner = this.querySelector( '.spinner' );
+		this.$success = this.querySelector(
+			'.vrts-alert-actions__modal-action-success'
+		);
 	}
 
 	bindFunctions() {
@@ -41,11 +45,10 @@ class VrtsAlertActions extends window.HTMLElement {
 	onHideElementsFormSubmit( e ) {
 		e.preventDefault();
 		const $form = e.currentTarget;
-		const $spinner = $form.querySelector( '.spinner' );
 		const formData = new window.FormData( $form );
 		const postId = formData.get( 'post_id' );
 
-		$spinner.classList.add( 'is-active' );
+		this.$spinner.classList.add( 'is-active' );
 
 		fetch( `${ window.vrts_admin_vars.rest_url }/tests/post/${ postId }`, {
 			method: 'PUT',
@@ -58,7 +61,11 @@ class VrtsAlertActions extends window.HTMLElement {
 				return response.json();
 			} )
 			.then( () => {
-				$spinner.classList.remove( 'is-active' );
+				this.$spinner.classList.remove( 'is-active' );
+				this.$success.classList.add( 'is-active' );
+				setTimeout( () => {
+					this.$success.classList.remove( 'is-active' );
+				}, 2000 );
 			} );
 	}
 
diff --git a/components/modal/_style.scss b/components/modal/_style.scss
index 9f1869d..378a125 100644
--- a/components/modal/_style.scss
+++ b/components/modal/_style.scss
@@ -59,10 +59,10 @@
 		border-radius: 3px;
 		font-size: 0;
 		z-index: 1;
-		transition: opacity 0.2s;
+		transition: background-color 0.2s;
 
 		&:hover {
-			opacity: 0.8;
+			background-color: #f6f7f7;
 		}
 
 		&:focus-visible {
diff --git a/components/test-run-page/_style.scss b/components/test-run-page/_style.scss
index 4e86856..0f7defa 100644
--- a/components/test-run-page/_style.scss
+++ b/components/test-run-page/_style.scss
@@ -58,7 +58,7 @@
 		flex: 1;
 		padding-bottom: 20px;
 
-		&[data-vrts-fullscreen] {
+		&[data-vrts-fullscreen="true"] {
 			overflow: auto;
 			padding: 0 20px 20px 20px;
 			background-color: #f0f0f1;
@@ -81,7 +81,7 @@
 				background: #f0f0f1;
 				z-index: 1;
 
-				[data-vrts-fullscreen] & {
+				[data-vrts-fullscreen="true"] & {
 					top: 0;
 				}
 			}