From e96dab9a37912a55d300581879c267114dcb3b0c Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Fri, 19 Sep 2025 16:46:45 +0300
Subject: [PATCH 1/3] refactor: welcome screen

---
 assets/src/dashboard/parts/connect/index.js | 62 ++++++++++++++-------
 inc/admin.php                               |  1 +
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/assets/src/dashboard/parts/connect/index.js b/assets/src/dashboard/parts/connect/index.js
index 623f1f205..63e2a061c 100644
--- a/assets/src/dashboard/parts/connect/index.js
+++ b/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,50 @@ 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
+						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"
+						role="button"
+						tabIndex="0"
+						onKeyPress={ ( e ) => {
+							if ( 'Enter' === e.key || ' ' === e.key ) {
+								setShowBenefits( ! showBenefits );
+							}
+						}}
+					>
+						<span>{ optimoleDashboardApp.strings.account_needed_benefits_toggle }</span>
+						<span
+							className={ `dashicons dashicons-arrow-${ showBenefits ? 'up' : 'down' } ml-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_4 } }
-						/>
-					</div>
+					{ 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">
diff --git a/inc/admin.php b/inc/admin.php
index a623a1502..0b5416605 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1535,6 +1535,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' ),

From 2951f017369bb00c2889d47412ac76eca2b3cc64 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Wed, 24 Sep 2025 10:39:01 +0300
Subject: [PATCH 2/3] chore: background color

---
 assets/src/dashboard/parts/connect/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/assets/src/dashboard/parts/connect/index.js b/assets/src/dashboard/parts/connect/index.js
index 63e2a061c..68ab8430d 100644
--- a/assets/src/dashboard/parts/connect/index.js
+++ b/assets/src/dashboard/parts/connect/index.js
@@ -276,6 +276,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 }

From 1ad40a7693b985a71aceba0b070e1c197b1df6dc Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Mon, 29 Sep 2025 10:33:53 +0300
Subject: [PATCH 3/3] chore: logic button error

---
 assets/src/dashboard/parts/connect/index.js | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/assets/src/dashboard/parts/connect/index.js b/assets/src/dashboard/parts/connect/index.js
index 68ab8430d..2111f0e7d 100644
--- a/assets/src/dashboard/parts/connect/index.js
+++ b/assets/src/dashboard/parts/connect/index.js
@@ -185,22 +185,16 @@ const ConnectLayout = () => {
 					/>
 
 
-					<div
+					<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"
+						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"
-						tabIndex="0"
-						onKeyPress={ ( e ) => {
-							if ( 'Enter' === e.key || ' ' === e.key ) {
-								setShowBenefits( ! showBenefits );
-							}
-						}}
 					>
 						<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">