From 9c0f7bbfc765476d9dd2ffeb1323297f24466130 Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Thu, 27 Apr 2023 11:07:32 +0300
Subject: [PATCH] Chore: fix RTL style in Color picker, Return arrow, Two
 factor page  (#8317)

* chore: UI arrow left add RTL.

* chore: fix appearence page RTL

* chore: add margins two-factor RTL

* chore: update due to review

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/pages/settings/security/two-factor-auth.tsx     | 4 ++--
 packages/features/settings/layouts/SettingsLayout.tsx    | 2 +-
 packages/ui/components/form/color-picker/colorpicker.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index 5d8f6373cf..811f9d2d03 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -46,10 +46,10 @@ const TwoFactorAuthView = () => {
             user?.twoFactorEnabled ? setDisableModalOpen(true) : setEnableModalOpen(true)
           }
         />
-        <div>
+        <div className="!mx-4">
           <div className="flex">
             <p className="text-default font-semibold">{t("two_factor_auth")}</p>
-            <Badge className="ml-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
+            <Badge className="mx-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
               {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
             </Badge>
           </div>
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index c8c39c427d..5490560d6f 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -130,7 +130,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
       href="/"
       className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-64 flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
-      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
+      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
       <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate">
         {name}
       </Skeleton>
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index b8088b50a2..e1e473ae3b 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -20,7 +20,7 @@ const ColorPicker = (props: ColorPickerProps) => {
   return (
     <div className="mt-1 flex h-[38px] items-center justify-center">
       <Popover.Root>
-        <div className="border-default flex h-full w-10 items-center items-center justify-center rounded-l-md border border-r-0">
+        <div className="border-default flex h-full w-10 items-center items-center justify-center border ltr:rounded-l-md ltr:border-r-0 rtl:rounded-r-md rtl:border-l-0">
           <Popover.Trigger asChild>
             <button
               className="h-5 w-5 rounded-sm"