From e1ea2cb53239f7436782134746ff2b8befc7311e Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Sun, 16 Apr 2023 22:35:17 +0300
Subject: [PATCH] chore: UI username RTL (#8300)

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../ui/UsernameAvailability/UsernameTextfield.tsx |  4 ++--
 packages/ui/components/form/inputs/Input.tsx      | 15 ++++++---------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 793a06e047..d21b394209 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -79,7 +79,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
   const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="rlt:space-x-reverse ms-2 me-2 mt-px flex flex-row space-x-2 rtl:space-x-reverse">
+      <div className="ms-2 me-2 mt-px flex flex-row space-x-2">
         <Button
           type="button"
           onClick={() => setOpenDialogSaveUsername(true)}
@@ -123,7 +123,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             autoCapitalize="none"
             autoCorrect="none"
             className={classNames(
-              "mb-0 mt-0 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
+              "mb-0 mt-0 rounded-md rounded-l-none",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 195a0c7a04..bfae9c6caa 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -127,14 +127,11 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
         </Skeleton>
       )}
       {addOnLeading || addOnSuffix ? (
-        <div className="group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1">
+        <div
+          dir="ltr"
+          className="group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1">
           {addOnLeading && (
-            <Addon
-              isFilled={addOnFilled}
-              className={classNames(
-                "ltr:rounded-l-md ltr:border-r-0 rtl:rounded-r-md rtl:border-l-0",
-                addOnClassname
-              )}>
+            <Addon isFilled={addOnFilled} className={classNames("rounded-l-md border-r-0", addOnClassname)}>
               {addOnLeading}
             </Addon>
           )}
@@ -146,8 +143,8 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
             className={classNames(
               className,
               "disabled:bg-muted disabled:hover:border-subtle disabled:cursor-not-allowed",
-              addOnLeading && "ltr:rounded-l-none rtl:rounded-r-none",
-              addOnSuffix && "ltr:rounded-r-none rtl:rounded-l-none",
+              addOnLeading && "rounded-l-none",
+              addOnSuffix && "rounded-r-none",
               type === "search" && "pr-8",
               "!my-0 !ring-0"
             )}