From 35b98d43febe8077f5f1886c742b194145df95bd Mon Sep 17 00:00:00 2001
From: Igor <35524806+igorschoester@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:08:45 +0100
Subject: [PATCH] Fix integration page RTL

---
 packages/js/src/integrations-page/algolia-integration.js  | 8 ++++----
 packages/js/src/integrations-page/simple-integration.js   | 8 ++++----
 .../js/src/integrations-page/toggleable-integration.js    | 8 ++++----
 .../js/src/integrations-page/woocommerce-integration.js   | 2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/js/src/integrations-page/algolia-integration.js b/packages/js/src/integrations-page/algolia-integration.js
index 5a182482643..c5fd27983c2 100644
--- a/packages/js/src/integrations-page/algolia-integration.js
+++ b/packages/js/src/integrations-page/algolia-integration.js
@@ -82,8 +82,8 @@ export const AlgoliaIntegration = ( {
 						}
 					</span>
 				</Link>
-				{ ( ! isNetworkControlEnabled && isMultisiteAvailable ) && <Badge className="yst-absolute yst-top-2 yst-right-2">{ __( "Network Disabled", "wordpress-seo" ) }</Badge> }
-				{ ( isNetworkControlEnabled && integration.isNew ) && <Badge className="yst-absolute yst-top-2 yst-right-2">{ __( "New", "wordpress-seo" ) }</Badge> }
+				{ ( ! isNetworkControlEnabled && isMultisiteAvailable ) && <Badge className="yst-absolute yst-top-2 yst-end-2">{ __( "Network Disabled", "wordpress-seo" ) }</Badge> }
+				{ ( isNetworkControlEnabled && integration.isNew ) && <Badge className="yst-absolute yst-top-2 yst-end-2">{ __( "New", "wordpress-seo" ) }</Badge> }
 			</Card.Header>
 			<Card.Content>
 				<div>
@@ -103,7 +103,7 @@ export const AlgoliaIntegration = ( {
 									__( "(Opens in a new browser tab)", "wordpress-seo" )
 								}
 							</span>
-							<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ml-1 yst-icon-rtl" />
+							<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ms-1 yst-icon-rtl" />
 						</Link> }
 					</p>
 				</div>
@@ -133,7 +133,7 @@ export const AlgoliaIntegration = ( {
 					target="_blank"
 				>
 					<LockOpenIcon
-						className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5 yst-text-yellow-900"
+						className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5 yst-text-yellow-900"
 					/>
 					{ __( "Unlock with Premium", "wordpress-seo" ) }
 					<span className="yst-sr-only">
diff --git a/packages/js/src/integrations-page/simple-integration.js b/packages/js/src/integrations-page/simple-integration.js
index fda85bd9a7c..c62850ad159 100644
--- a/packages/js/src/integrations-page/simple-integration.js
+++ b/packages/js/src/integrations-page/simple-integration.js
@@ -34,7 +34,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => {
 						}
 					</span>
 				</Link>
-				{ ( integration.isNew ) && <Badge className="yst-absolute yst-top-2 yst-right-2">{ __( "New", "wordpress-seo" ) }</Badge> }
+				{ ( integration.isNew ) && <Badge className="yst-absolute yst-top-2 yst-end-2">{ __( "New", "wordpress-seo" ) }</Badge> }
 			</Card.Header>
 			<Card.Content>
 				<div>
@@ -47,7 +47,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => {
 							return (
 								<li key={ idx } className="yst-flex yst-items-start">
 									<CheckIcon
-										className="yst-h-5 yst-w-5 yst-mr-2 yst-text-green-400 yst-flex-shrink-0"
+										className="yst-h-5 yst-w-5 yst-me-2 yst-text-green-400 yst-flex-shrink-0"
 									/>
 									<span> { usp } </span>
 								</li>
@@ -66,7 +66,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => {
 								__( "(Opens in a new browser tab)", "wordpress-seo" )
 							}
 						</span>
-						<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ml-1 yst-icon-rtl" />
+						<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ms-1 yst-icon-rtl" />
 					</Link> }
 				</div>
 			</Card.Content>
@@ -83,7 +83,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => {
 					target="_blank"
 				>
 					<LockOpenIcon
-						className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5 yst-text-yellow-900"
+						className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5 yst-text-yellow-900"
 					/>
 					{ __( "Unlock with Premium", "wordpress-seo" ) }
 					<span className="yst-sr-only">
diff --git a/packages/js/src/integrations-page/toggleable-integration.js b/packages/js/src/integrations-page/toggleable-integration.js
index b8503933e0d..ded8eb9dca3 100644
--- a/packages/js/src/integrations-page/toggleable-integration.js
+++ b/packages/js/src/integrations-page/toggleable-integration.js
@@ -79,8 +79,8 @@ export const ToggleableIntegration = ( {
 						}
 					</span>
 				</Link>
-				{ ( ! isNetworkControlEnabled && isMultisiteAvailable ) && <Badge className="yst-absolute yst-top-2 yst-right-2">{ __( "Network Disabled", "wordpress-seo" ) }</Badge> }
-				{ ( isNetworkControlEnabled && integration.isNew ) && <Badge className="yst-absolute yst-top-2 yst-right-2">{ __( "New", "wordpress-seo" ) }</Badge> }
+				{ ( ! isNetworkControlEnabled && isMultisiteAvailable ) && <Badge className="yst-absolute yst-top-2 yst-end-2">{ __( "Network Disabled", "wordpress-seo" ) }</Badge> }
+				{ ( isNetworkControlEnabled && integration.isNew ) && <Badge className="yst-absolute yst-top-2 yst-end-2">{ __( "New", "wordpress-seo" ) }</Badge> }
 			</Card.Header>
 			<Card.Content>
 				<div>
@@ -100,7 +100,7 @@ export const ToggleableIntegration = ( {
 									__( "(Opens in a new browser tab)", "wordpress-seo" )
 								}
 							</span>
-							<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ml-1 yst-icon-rtl" />
+							<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ms-1 yst-icon-rtl" />
 						</Link> }
 					</p>
 				</div>
@@ -122,7 +122,7 @@ export const ToggleableIntegration = ( {
 					target="_blank"
 				>
 					<LockOpenIcon
-						className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5 yst-text-yellow-900"
+						className="yst--ml-s yst-me-2 yst-h-5 yst-w-5 yst-text-yellow-900"
 					/>
 					{ __( "Unlock with Premium", "wordpress-seo" ) }
 					<span className="yst-sr-only">
diff --git a/packages/js/src/integrations-page/woocommerce-integration.js b/packages/js/src/integrations-page/woocommerce-integration.js
index 1b4dadee99e..7f99f3551aa 100644
--- a/packages/js/src/integrations-page/woocommerce-integration.js
+++ b/packages/js/src/integrations-page/woocommerce-integration.js
@@ -75,7 +75,7 @@ export const WoocommerceIntegration = ( {
 					target="_blank"
 				>
 					<LockOpenIcon
-						className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5 yst-text-yellow-900"
+						className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5 yst-text-yellow-900"
 					/>
 					{
 						sprintf(