Merge pull request #965 from Codeinwp/refactor/welcome-screen

refactor: welcome screen

Author: selul

assets/src/dashboard/parts/connect/index.js

@@ -39,6 +39,7 @@ const ConnectLayout = () => {
 	const [ email, setEmail ] = useState( optimoleDashboardApp.current_user.email );
 	const [ method, setMethod ] = useState( 'email' );
 	const [ errors, setErrors ] = useState({});
+	const [ showBenefits, setShowBenefits ] = useState( false );
 
 	const { setAutoConnect } = useDispatch( 'optimole' );
 
@@ -184,29 +185,44 @@ const ConnectLayout = () => {
 					/>
 
 
-					<div className="flex py-3 items-center">
-						<Icon icon="yes-alt" />
-						<p
-							className="text-base ml-3 m-0"
-							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_1 } }
-						/>
-					</div>
-
-					<div className="flex py-3 items-center">
-						<Icon icon="yes-alt" />
-						<p
-							className="text-base ml-3 m-0"
-							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_2 } }
-						/>
-					</div>
-
-					<div className="flex py-3 items-center">
-						<Icon icon="yes-alt" />
-						<p
-							className="text-base ml-3 m-0"
-							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_4 } }
+					<button
+						onClick={ () => setShowBenefits( ! showBenefits ) }
+						className="inline-flex items-center bg-light-blue px-4 py-1.5 rounded-full mb-4 text-sm text-gray-500 cursor-pointer transition-all hover:bg-blue-100 border-none"
+						role="button"
+					>
+						<span>{ optimoleDashboardApp.strings.account_needed_benefits_toggle }</span>
+						<span
+							className={ `dashicons dashicons-arrow-${ showBenefits ? 'up' : 'down' } ml-1` }
 						/>
-					</div>
+					</button>
+
+					{ showBenefits && (
+						<div className="mb-4">
+							<div className="flex py-3 items-center">
+								<Icon icon="yes-alt" />
+								<p
+									className="text-base ml-3 m-0"
+									dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_1 } }
+								/>
+							</div>
+
+							<div className="flex py-3 items-center">
+								<Icon icon="yes-alt" />
+								<p
+									className="text-base ml-3 m-0"
+									dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_2 } }
+								/>
+							</div>
+
+							<div className="flex py-3 items-center">
+								<Icon icon="yes-alt" />
+								<p
+									className="text-base ml-3 m-0"
+									dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_4 } }
+								/>
+							</div>
+						</div>
+					) }
 				</div>
 
 				<div className="optml-connect__form basis-4/12 p-8 bg-light-blue border border-blue-300 rounded-md">
@@ -254,6 +270,11 @@ const ConnectLayout = () => {
 					<Button
 						variant="secondary"
 						className="optml__button flex w-full justify-center rounded font-bold mt-4 min-h-40 mb-4"
+						style={{
+							backgroundColor: '#EAE7F1',
+							borderColor: '#9CA3AF',
+							color: '#000000'
+						}}
 						onClick={ () => setMethod( 'key' ) }
 					>
 						{ optimoleDashboardApp.strings.api_exists }

inc/admin.php

@@ -1557,6 +1557,7 @@ private function get_dashboard_strings() {
 			'account_needed_sub_heading'     => __( 'Stop sacrificing image quality for page speed. Optimole delivers both.', 'optimole-wp' ),
 			'account_needed_trust_badge'     => __( 'TRUSTED BY 200,000+ HAPPY USERS', 'optimole-wp' ),
 			'account_needed_setup_time'      => __( 'Setup is instant - just click connect', 'optimole-wp' ),
+			'account_needed_benefits_toggle' => __( 'See what you\'ll get', 'optimole-wp' ),
 			'invalid_key'                    => __( 'Invalid API Key', 'optimole-wp' ),
 			'keep_connected'                 => __( 'Ok, keep me connected', 'optimole-wp' ),
 			'cloud_library'                  => __( 'Cloud Library', 'optimole-wp' ),