Merge pull request #40 from newfold-labs/update/modal-view

Update Modal styles/UX

build/1.2.2/installer.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '09a165a23da81a348e0d');

includes/Data/Constants.php

@@ -15,7 +15,7 @@ class Constants {
 	 */
 	public function __construct( $container ) {
 		if ( ! defined( 'NFD_INSTALLER_VERSION' ) ) {
-			define( 'NFD_INSTALLER_VERSION', '1.2.1' );
+			define( 'NFD_INSTALLER_VERSION', '1.2.2' );
 		}
 		if ( ! defined( 'NFD_INSTALLER_BUILD_DIR' ) && defined( 'NFD_INSTALLER_VERSION' ) ) {
 			define( 'NFD_INSTALLER_BUILD_DIR', dirname( __DIR__, 2 ) . '/build/' . NFD_INSTALLER_VERSION );

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "1.2.2",
   "name": "@newfold-labs/wp-module-installer",
   "description": "An installer for WordPress plugins and themes.",
   "license": "GPL-2.0-or-later",

src/Installer/components/Modal/index.jsx

@@ -63,7 +63,11 @@ const Modal = ( {
 	};
 
 	const handleClickOutside = ( event ) => {
-		if ( modalRef.current && ! modalRef.current.contains( event.target ) ) {
+		if (
+			pluginStatus === 'failed' && // only close on outside click when in failed state
+			modalRef.current &&
+			! modalRef.current.contains( event.target )
+		) {
 			showModal( false );
 		}
 	};
@@ -137,8 +141,8 @@ const Modal = ( {
 				},
 			} );
 			setPluginStatus( 'completed' );
-			showModal( false );
 			window.location.href = redirectUrl;
+			showModal(false);
 		} catch ( e ) {
 			setPluginStatus( 'failed' );
 		}
@@ -174,7 +178,7 @@ const Modal = ( {
 	const errorMessage = createInterpolateElement(
 		__(
 			'Sorry, there was an error installing and activating the plugin. Please try again. If the problem persists, <a>contact support</a>.',
-			'wp-module-onboarding'
+			'wp-module-installer'
 		),
 		{
 			// eslint-disable-next-line jsx-a11y/anchor-has-content
@@ -194,7 +198,7 @@ const Modal = ( {
 				<div className="nfd-installer-modal__content-section">
 					<img
 						src={ loadingInstaller }
-						alt={ __( 'Loading Vector.', 'wp-module-onboarding' ) }
+						alt={ __( 'Loading Vector.', 'wp-module-installer' ) }
 						className="nfd-installer-modal__content-image"
 					/>
 					{ pluginStatus === 'installing' && (
@@ -203,15 +207,26 @@ const Modal = ( {
 								{ sprintf(
 									/* translators: %s: Plugin Name */
 									__(
-										'Activating the %s',
-										'wp-module-onboarding'
+										'Activating %s',
+										'wp-module-installer'
 									),
 									pluginName
 								) }
 							</div>
 							<div className="nfd-installer-modal__loader"></div>
 						</>
 					) }
+					{ pluginStatus === 'completed' && (
+						<>
+							<div className="nfd-installer-modal__content-subheading">
+								{ __(
+									'Activation Complete! Redirecting…',
+									'wp-module-installer'
+								) }
+							</div>
+							<div className="nfd-installer-modal__loader"></div>
+						</>
+					) }
 					{ pluginStatus === 'failed' && (
 						<div className="nfd-installer-modal__content-error">
 							<img

src/Installer/components/Modal/stylesheet.scss

@@ -1,39 +1,40 @@
 .nfd-installer-modal {
-	top: 0;
-	left: 0;
-	z-index: 99;
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	position: fixed;
 	align-items: center;
+	background: rgba(0, 0, 0, 0.5);
+	display: flex;
+	height: 100vh;
 	justify-content: center;
-	background: rgba(255, 255, 255, 0.5);
+	left: 0;
+	position: fixed;
+	top: 0;
+	width: 100vw;
+	z-index: 99;
 
 	@media (max-width: #{ ($break-small) }) {
 		top: 30px;
 	}
 
 	&__content {
-		width: 40vw;
+		background-color: #fff;
+		border-radius: 8px;
+		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+		max-width: 80vw;
 		padding: 72px;
 		position: relative;
-		border-radius: 8px;
 		text-align: center;
-		background-color: #fff;
-		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+		width: 620px;
 
 		@media (max-width: #{ ($break-small) }) {
-			width: 80vw;
 			padding: 24px;
+			width: 80vw;
 		}
 
 		&-heading {
 			color: #333;
 			font-size: 22px;
 			font-weight: 300;
+			line-height: 1.2;
 			margin-bottom: 60px;
-			letter-spacing: 1.1px;
 
 			@media (max-width: #{ ($break-small) }) {
 				font-size: 18px;
@@ -42,9 +43,9 @@
 		}
 
 		&-section {
+			align-items: center;
 			display: flex;
 			flex-direction: column;
-			align-items: center;
 		}
 
 		&-image {
@@ -69,18 +70,18 @@
 		}
 
 		&-error {
+			align-items: center;
 			display: flex;
-			font-size: 16px;
 			flex-direction: row;
-			align-items: center;
+			font-size: 16px;
 
 			@media (max-width: #{ ($break-small) }) {
 				font-size: 14px;
 			}
 
 			&--icon {
-				margin-right: 5px;
 				flex-shrink: 0;
+				margin-right: 5px;
 			}
 
 			&--text {
@@ -89,23 +90,23 @@
 
 				&-link {
 					all: unset;
-					cursor: pointer;
 					color: #1e90ff;
+					cursor: pointer;
 					font-weight: 300;
 				}
 			}
 		}
 	}
 
 	&__loader {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
+		animation: spin 1s linear infinite;
 		border: 4px solid #f3f3f3;
-		border-top: 4px solid #3a3a3a;
-		border-right: 4px solid #3a3a3a;
 		border-bottom: 4px solid #3a3a3a;
-		animation: spin 1s linear infinite;
+		border-radius: 50%;
+		border-right: 4px solid #3a3a3a;
+		border-top: 4px solid #3a3a3a;
+		height: 30px;
+		width: 30px;
 
 		@media (max-width: #{ ($break-small) }) {
 			width: 20px;

src/Installer/styles/app.scss

@@ -15,4 +15,6 @@ body {
 #nfd-installer {
 	display: none;
 	transition: all 3s ease-in-out;
+	position: relative;
+	z-index: 1000000;
 }