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

@@ -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>

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>

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"