From cb4a6da2bbd2b26277bacb8c8ee26f7e9a8b972f Mon Sep 17 00:00:00 2001
From: Fr0styGDEV <nathanieltrotter04@gmail.com>
Date: Thu, 26 Dec 2024 14:09:19 -0600
Subject: [PATCH 1/2] fix: forces delete window to right side when lang = RTL

---
 .../delete-confirmation-prompt.jsx            | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
index 2a6eea9525f..41fe5b4dfc9 100644
--- a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
+++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
@@ -12,7 +12,6 @@ import arrowRightIcon from './icon--arrow-right.svg';
 
 import styles from './delete-confirmation-prompt.css';
 
-// TODO: Parametrize from outside if we want more custom messaging
 const messages = defineMessages({
     shouldDeleteSpriteMessage: {
         defaultMessage: 'Are you sure you want to delete this sprite?',
@@ -47,9 +46,16 @@ const messages = defineMessages({
 });
 
 const modalWidth = 300;
-const calculateModalPosition = (relativeElemRef, modalPosition) => {
+const calculateModalPosition = (relativeElemRef, modalPosition, isRTL) => {
     const refPosition = relativeElemRef.getBoundingClientRect();
 
+    if (isRTL) {
+        return {
+            top: refPosition.top - refPosition.height,
+            left: refPosition.right + 25
+        };
+    }
+
     if (modalPosition === 'left') {
         return {
             top: refPosition.top - refPosition.height,
@@ -71,11 +77,9 @@ const getMessage = entityType => {
     if (entityType === 'COSTUME') {
         return messages.shouldDeleteCostumeMessage;
     }
-
     if (entityType === 'SOUND') {
         return messages.shouldDeleteSoundMessage;
     }
-
     return messages.shouldDeleteSpriteMessage;
 };
 
@@ -87,12 +91,11 @@ const DeleteConfirmationPrompt = ({
     entityType,
     relativeElemRef
 }) => {
-    const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition);
+    const isRTL = document.querySelector('[dir="rtl"]') !== null;
+    const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition, isRTL);
 
     return (<ReactModal
         isOpen
-        // We have to inline the styles, since a part
-        // of them are dynamically generated
         style={{
             content: {
                 ...modalPositionValues,
@@ -103,8 +106,9 @@ const DeleteConfirmationPrompt = ({
                 padding: 0,
                 margin: 0,
                 position: 'absolute',
-                overflowX: 'hidden',
-                zIndex: 1000
+                overflow: 'visible',
+                zIndex: 1000,
+                direction: isRTL ? 'rtl' : 'ltr'
             },
             overlay: {
                 position: 'fixed',
@@ -120,13 +124,23 @@ const DeleteConfirmationPrompt = ({
         onRequestClose={onCancel}
     >
         <Box className={styles.modalContainer}>
-            { modalPosition === 'right' ?
-                <Box className={classNames(styles.arrowContainer, styles.arrowContainerLeft)}>
-                    <img
-                        className={styles.deleteIcon}
-                        src={arrowLeftIcon}
-                    />
-                </Box> : null }
+            <Box
+                className={classNames(
+                    styles.arrowContainer,
+                    isRTL ? styles.arrowContainerRight : styles.arrowContainerLeft
+                )}
+                style={{
+                    position: 'absolute',
+                    top: '50%', // Vertically centered
+                    transform: 'translateY(-50%)',
+                    [isRTL ? 'left' : 'right']: '-10px' // Dynamic side positioning
+                }}
+            >
+                <img
+                    className={styles.deleteIcon}
+                    src={isRTL ? arrowLeftIcon : arrowRightIcon} // FIXED Arrow direction
+                />
+            </Box>
             <Box className={styles.body}>
                 <Box className={styles.label}>
                     <FormattedMessage {...getMessage(entityType)} />
@@ -160,13 +174,6 @@ const DeleteConfirmationPrompt = ({
                     </button>
                 </Box>
             </Box>
-            {modalPosition === 'left' ?
-                <Box className={classNames(styles.arrowContainer, styles.arrowContainerRight)}>
-                    <img
-                        className={styles.deleteIcon}
-                        src={arrowRightIcon}
-                    />
-                </Box> : null }
         </Box>
     </ReactModal>);
 };

From 7d6b179fb0b4e123bd93744acdfc0b27c97a70a1 Mon Sep 17 00:00:00 2001
From: Fr0styGDEV <nathanieltrotter04@gmail.com>
Date: Thu, 26 Dec 2024 14:23:47 -0600
Subject: [PATCH 2/2] fix: forces delete window to right side when lang = RTL

---
 .../delete-confirmation-prompt.jsx                          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
index 41fe5b4dfc9..93e159935a0 100644
--- a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
+++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
@@ -131,14 +131,14 @@ const DeleteConfirmationPrompt = ({
                 )}
                 style={{
                     position: 'absolute',
-                    top: '50%', // Vertically centered
+                    top: '50%',
                     transform: 'translateY(-50%)',
-                    [isRTL ? 'left' : 'right']: '-10px' // Dynamic side positioning
+                    [isRTL ? 'left' : 'right']: '-10px'
                 }}
             >
                 <img
                     className={styles.deleteIcon}
-                    src={isRTL ? arrowLeftIcon : arrowRightIcon} // FIXED Arrow direction
+                    src={isRTL ? arrowLeftIcon : arrowRightIcon}
                 />
             </Box>
             <Box className={styles.body}>