Repository: Codeinwp/optimole-wp
Pull request #886: feat: improve plugin first screen
Author: login: girishpanchal30
Labels: name: released
description: Indicate that an issue has been resolved and released in a particular version of the product.
Created: 2025-03-13T07:04:42Z | Merged: 2025-03-18T09:53:46Z

### All Submissions:

* [x] Have you followed the [Optimole Contributing guideline](https://github.com/Codeinwp/optimole-wp/blob/master/CONTRIBUTING.md)?
* [x] Does your code follow the [WordPress' coding standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/)?
* [x] Have you checked to ensure there aren't other open [Pull Requests](../../pulls) for the same update/change? 
 
### Changes proposed in this Pull Request:
Improve the account connections page layout as suggested [here](https://github.com/Codeinwp/optimole-service/issues/1335#issuecomment-2687267604).

![image](https://github.com/user-attachments/assets/8ca00a80-0f70-4e2d-aea0-3ea90e9ebb66)

Closes https://github.com/Codeinwp/optimole-service/issues/1335

### Other information:

* [x] Have you added an explanation of what your changes do and why you'd like us to include them?
* [x] Have you written new tests for your changes, as applicable?
* [x] Have you successfully ran tests with your changes locally?
 



Diff:
diff --git a/assets/src/dashboard/parts/connect/index.js b/assets/src/dashboard/parts/connect/index.js
index e002f22f5..623f1f205 100644
--- a/assets/src/dashboard/parts/connect/index.js
+++ b/assets/src/dashboard/parts/connect/index.js
@@ -166,13 +166,25 @@ const ConnectLayout = () => {
 
 			<div className={ connectContainerClasses }>
 				<div className="optml-connect__content basis-8/12">
-					<div className="text-gray-700 font-serif text-2 font-bold leading-7 m-0">{ optimoleDashboardApp.strings.account_needed_heading }</div>
+					<div className="inline-block bg-light-blue text-gray-500 text-sm font-medium px-4 py-1.5 rounded-full mb-4">{ optimoleDashboardApp.strings.account_needed_trust_badge }</div>
+
+					<div className="text-gray-700 font-serif text-2xl font-bold leading-7 m-0">{ optimoleDashboardApp.strings.account_needed_heading }</div>
 					<p
-						className="text-xl font-normal text-gray-800"
+						className="text-base font-normal text-gray-500"
+						dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_sub_heading } }
+					/>
+
+					<div className="inline-flex items-center bg-light-blue px-4 py-1.5 rounded-full mb-5 text-sm text-gray-800">
+						<span className="mr-2">⏱️</span>{ optimoleDashboardApp.strings.account_needed_setup_time }
+					</div>
+
+					<p
+						className="text-sm text-gray-700 mb-5 leading-normal"
 						dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_title } }
 					/>
 
-					<div className="flex py-3">
+
+					<div className="flex py-3 items-center">
 						<Icon icon="yes-alt" />
 						<p
 							className="text-base ml-3 m-0"
@@ -180,13 +192,21 @@ const ConnectLayout = () => {
 						/>
 					</div>
 
-					<div className="flex py-3">
+					<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 className="optml-connect__form basis-4/12 p-8 bg-light-blue border border-blue-300 rounded-md">
@@ -233,24 +253,22 @@ const ConnectLayout = () => {
 
 					<Button
 						variant="secondary"
-						className="optml__button flex w-full justify-center rounded font-bold mt-4 min-h-40"
+						className="optml__button flex w-full justify-center rounded font-bold mt-4 min-h-40 mb-4"
 						onClick={ () => setMethod( 'key' ) }
 					>
 						{ optimoleDashboardApp.strings.api_exists }
 					</Button>
 
+					<div class="flex items-center justify-center text-gray-600 mb-4">
+						<span class="mr-1.5">🔒</span>{ optimoleDashboardApp.strings.secure_connection }
+					</div>
+
 					<p
 						className="mb-0"
 						dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.signup_terms } }
 					/>
 				</div>
 			</div>
-
-			<div className="bg-grayish-blue text-gray-800 text-center font-bold uppercase p-2.5 rounded-b-lg">
-				<p
-					dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_footer } }
-				/>
-			</div>
 		</div>
 	);
 };
diff --git a/inc/admin.php b/inc/admin.php
index f3b196cf0..7c8784916 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1423,7 +1423,10 @@ private function get_dashboard_strings() {
 			'refresh_stats_cta'              => __( 'Refresh Stats', 'optimole-wp' ),
 			'updating_stats_cta'             => __( 'UPDATING STATS', 'optimole-wp' ),
 			'api_key_placeholder'            => __( 'API Key', 'optimole-wp' ),
-			'account_needed_heading'         => __( 'Sign-up for API key', 'optimole-wp' ),
+			'account_needed_heading'         => __( 'Supercharge Your WordPress Images in 60 Seconds', 'optimole-wp' ),
+			'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' ),
 			'invalid_key'                    => __( 'Invalid API Key', 'optimole-wp' ),
 			'keep_connected'                 => __( 'Ok, keep me connected', 'optimole-wp' ),
 			'cloud_library'                  => __( 'Cloud Library', 'optimole-wp' ),
@@ -1437,6 +1440,7 @@ private function get_dashboard_strings() {
 			'email_address_label'            => __( 'Your email address', 'optimole-wp' ),
 			'steps_connect_api_title'        => __( 'Connect your account', 'optimole-wp' ),
 			'register_btn'                   => __( 'Create & connect your account', 'optimole-wp' ),
+			'secure_connection'              => __( 'Secure connection - your data is protected', 'optimole-wp' ),
 			'step_one_api_title'             => __( 'Enter your API key.', 'optimole-wp' ),
 			'optml_dashboard'                => sprintf(
 			/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
@@ -1468,17 +1472,15 @@ private function get_dashboard_strings() {
 			'premium_support'                => __( 'Access our Premium Support', 'optimole-wp' ),
 			'account_needed_title'           => sprintf(
 			/* translators: 1 is the link to optimole.com */
-				__( 'In order to get access to free image optimization service you will need an API key from %s.', 'optimole-wp' ),
+				__( 'Connect to Optimole\'s powerful image optimization service with a free API key from %s.', 'optimole-wp' ),
 				' <a href="' . esc_url( tsdk_translate_link( 'https://dashboard.optimole.com/register', 'query' ) ) . '" target="_blank">optimole.com</a>'
 			),
 			'account_needed_subtitle_1'      => sprintf(
 			/* translators: 1 is starting bold tag, 2 is ending bold tag, 3 is the starting bold tag, 4 is the limit number, 5 is ending bold tag, 6 is the starting anchor tag for the docs link on how we count visits, 7 is the ending anchor tag. */
-				__( 'You will get access to our %1$simage optimization service for FREE%2$s in the limit of %3$s%4$s%5$s %6$svisitors%7$s per month.', 'optimole-wp' ),
+				__( '%1$sOptimize unlimited images%2$s for up to %3$s monthly %4$svisitors%5$s - completely FREE.', 'optimole-wp' ),
 				'<strong>',
 				'</strong>',
 				number_format_i18n( 1000 ),
-				'<strong>',
-				'</strong>',
 				'<a href="https://docs.optimole.com/article/1134-how-optimole-counts-the-number-of-visitors" target="_blank">',
 				'</a>'
 			),
@@ -1491,7 +1493,16 @@ private function get_dashboard_strings() {
 			'account_needed_subtitle_2'      => sprintf(
 			/* translators: 1 is the starting bold tag, 2 is the ending bold tag */
 				__(
-					'Bonus, if you dont use a CDN, we got you covered, %1$swe will serve the images using CloudFront CDN%2$s from 450+ locations.',
+					'%1$sInstant global delivery%2$s with CloudFront CDN - your images load 2-3x faster worldwide from 450+ locations.',
+					'optimole-wp'
+				),
+				'<strong>',
+				'</strong>'
+			),
+			'account_needed_subtitle_4'      => sprintf(
+			/* translators: 1 is the starting bold tag, 2 is the ending bold tag */
+				__(
+					'%1$sAdaptive optimization%2$s that perfectly sizes images for every visitor\'s device and connection speed.',
 					'optimole-wp'
 				),
 				'<strong>',


Reviews:
user: login: abaicus
body: @girishpanchal30 let's refrain from using classes with dynamically defined values like `bg-[#f0f6fc]`, or `text-[#646970]`, `text-[#2271b1]`, etc. 

We can surely either match the colors to some variation of the custom-defined colors, or predefined tailwind values
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T14:22:59Z
user: login: abaicus
body: @girishpanchal30 I meant using variables that already exist in the config, instead of introducing new ones either inline, or in the config itself. We can ballpark the design, and don't need it to be pixel-perfect to the artifact

- `slate-gray` can be matched to `gray-500`;
- The value of `text-s` is actually the font-size of the in the admin, so we could simply not add it;
- `text-15`, we can simply use `text-sm` which is 1px lower;
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T09:32:55Z
user: login: girishpanchal30
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T10:49:08Z
user: login: abaicus
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T11:39:22Z

Review comments:
diff_hunk: @@ -187,6 +199,14 @@ const ConnectLayout = () => {
 							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_2 } }
 						/>
 					</div>
+
+					<div className="flex py-3">
path: assets/src/dashboard/parts/connect/index.js
user: login: abaicus
body: We can also add a `items-center` class on all three items in this list so that the checkmark is centered. Maybe also map them to an array with the contents we can loop through and output them so we don't have duplicated markup.
created_at: 2025-03-17T09:32:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -187,6 +199,14 @@ const ConnectLayout = () => {
 							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_2 } }
 						/>
 					</div>
+
+					<div className="flex py-3">
path: assets/src/dashboard/parts/connect/index.js
user: login: girishpanchal30
body: @abaicus fixed all suggestions
created_at: 2025-03-17T10:49:08Z
author_association: CONTRIBUTOR

PR comments:
user: login: pirate-bot
created_at: 2025-03-13T07:06:29Z
body: Plugin build for ef277d4bbf8039c8770f9e9527dc1a74998ac58f is ready :bellhop_bell:!
- Download [build](https://verti-artifacts.s3.amazonaws.com/optimole-wp-feat-opml-service-1335-3b9ca39b/optimole-wp.zip)
- Download [dev](https://verti-artifacts.s3.amazonaws.com/optimole-wp-feat-opml-service-1335-3b9ca39b/optimole-wp-dev.zip)
author_association: COLLABORATOR
user: login: girishpanchal30
created_at: 2025-03-17T05:37:05Z
body: @abaicus Thank you for the review! I've fixed the feedback. Please review and let me know if any further changes are needed.
author_association: CONTRIBUTOR
user: login: abaicus
created_at: 2025-03-17T11:05:06Z
body: @girishpanchal30 I see there are still some leftover variables lef tin tailwind config. Can't we replace text-26 with text-2xl or something to that affect?

`text-s` is also leftover. 
author_association: CONTRIBUTOR
user: login: girishpanchal30
created_at: 2025-03-17T11:32:34Z
body: > @girishpanchal30 I see there are still some leftover variables lef tin tailwind config. Can't we replace text-26 with text-2xl or something to that affect?

Removed text-26 class

> text-s is also leftover

I’ve already removed it from where it was previously used. Could you please recheck with the latest commit?
author_association: CONTRIBUTOR
user: login: abaicus
created_at: 2025-03-17T11:39:12Z
body: Thanks @girishpanchal30 ! Looks good! 👍🏻 
author_association: CONTRIBUTOR
user: login: pirate-bot
created_at: 2025-04-14T10:29:45Z
body: :tada: This PR is included in version 4.0.0 :tada:

The release is available on [GitHub release](https://github.com/Codeinwp/optimole-wp/releases/tag/v4.0.0)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR