enh: improve optimization status card layout and style

Author: abaicus

assets/src/dashboard/parts/connected/OptimizationStatus.js

@@ -23,8 +23,8 @@ const OptimizationStatus = ({ settings }) => {
 
 	return (
 		<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
-			<h3 className="text-base m-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
-			<ul>
+			<h3 className="text-base m-0 mb-4">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
+			<ul className="grid gap-3 m-0">
 				{ statuses.map( ( status, index ) => {
 					let statusClass = status.active ? 'success' : 'danger';
 					return (
@@ -49,7 +49,7 @@ const OptimizationStatus = ({ settings }) => {
 				}) }
 			</ul>
 			<p
-				className="m-0 mt-3"
+				className="m-0 mt-5"
 				dangerouslySetInnerHTML={ {
 					__html: optimoleDashboardApp.strings.optimization_tips
 				} }

inc/admin.php

@@ -1987,7 +1987,7 @@ private function get_dashboard_strings() {
 			'optimization_tips'              => sprintf(
 			/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
 				__( '%1$sView all optimization tips%2$s', 'optimole-wp' ),
-				'<a class="flex justify-center font-bold rounded hover:opacity-90 transition-opacity" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
+				'<a class="flex justify-center items-center font-semibold" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
 				'<span style="text-decoration:none; font-size:15px; margin-top:2px;" class="dashicons dashicons-external"></span></a>'
 			),
 		];