Improved the Right to Left Direction implementation for relevant languages. (#2583)

* Added support for right to left direction of bullet points in the page render and text editor

* Added right to left direction support by adding a toggle button in the layout and enhancing the css element of the page render to support it without affecting the default left to right direction

* Moved the Right to Life Direction Toggle feature to be integrated with the Languages section using locale

* change all occurrances of pl, pr, ml, mr, left, right to start/end equivalents

---------

Co-authored-by: Amruth Pillai <im.amruth@gmail.com>

src/dialogs/auth/enable-two-factor.tsx

@@ -283,11 +283,11 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
 
 								<div className="flex items-center gap-x-2">
 									<Button type="button" variant="outline" onClick={handleDownloadBackupCodes} className="flex-1">
-										<ArrowDownIcon className="mr-2 size-4" />
+										<ArrowDownIcon className="me-2 size-4" />
 										<Trans>Download</Trans>
 									</Button>
 									<Button type="button" variant="ghost" onClick={handleCopyBackupCodes} className="flex-1">
-										<CopyIcon className="mr-2 size-4" />
+										<CopyIcon className="me-2 size-4" />
 										<Trans>Copy</Trans>
 									</Button>
 								</div>

src/dialogs/resume/index.tsx

@@ -116,7 +116,7 @@ export function CreateResumeDialog(_: DialogProps<"resume.create">) {
 					<ResumeForm />
 
 					<DialogFooter>
-						<ButtonGroup aria-label="Create Resume with Options" className="gap-x-px">
+						<ButtonGroup aria-label="Create Resume with Options" className="gap-x-px rtl:flex-row-reverse">
 							<Button type="submit" disabled={isPending}>
 								<Trans>Create</Trans>
 							</Button>
@@ -331,7 +331,7 @@ function ResumeForm() {
 								<InputGroupAddon align="inline-start" className="hidden sm:flex">
 									<InputGroupText>{slugPrefix}</InputGroupText>
 								</InputGroupAddon>
-								<InputGroupInput min={1} max={64} className="pl-0!" {...field} />
+								<InputGroupInput min={1} max={64} className="ps-0!" {...field} />
 							</InputGroup>
 						</FormControl>
 						<FormMessage />

src/dialogs/resume/sections/interest.tsx

@@ -153,7 +153,7 @@ function InterestForm() {
 					render={({ field }) => (
 						<FormItem className="shrink-0">
 							<FormControl>
-								<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-r-0!" />
+								<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-e-0!" />
 							</FormControl>
 						</FormItem>
 					)}

src/dialogs/resume/sections/profile.tsx

@@ -155,7 +155,7 @@ function ProfileForm() {
 					render={({ field }) => (
 						<FormItem className="shrink-0">
 							<FormControl>
-								<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-r-0!" />
+								<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-e-0!" />
 							</FormControl>
 						</FormItem>
 					)}

src/dialogs/resume/sections/skill.tsx

@@ -159,7 +159,7 @@ function SkillForm() {
 					render={({ field }) => (
 						<FormItem className="shrink-0">
 							<FormControl>
-								<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-r-0!" />
+								<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-e-0!" />
 							</FormControl>
 						</FormItem>
 					)}