From 8b3930169df7d49e32882d8b76958c2176ba125f Mon Sep 17 00:00:00 2001
From: raizasafeel <89463672+raizasafeel@users.noreply.github.com>
Date: Mon, 13 Apr 2026 10:10:53 +0530
Subject: [PATCH] feat: add rtl support to icons, css styles

---
 frontend/src/components/CourseCard.vue              | 2 +-
 frontend/src/components/CourseOutline.vue           | 6 +++---
 frontend/src/components/Sidebar/AppSidebar.vue      | 5 ++++-
 frontend/src/components/VideoBlock.vue              | 2 +-
 frontend/src/pages/Batches/components/BatchCard.vue | 2 +-
 frontend/src/pages/Home/AdminHome.vue               | 4 ++--
 frontend/src/pages/Home/StudentHome.vue             | 4 ++--
 7 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 7544aafb..b2d37b95 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -182,7 +182,7 @@ const getGradientColor = () => {
 }
 
 .avatar-group.overlap .avatar + .avatar {
-	margin-left: calc(-8px);
+	margin-inline-start: calc(-8px);
 }
 
 .short-introduction {
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index c8f577ad..05ff5ca2 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -46,12 +46,12 @@
 							>
 								<ChevronRight
 									:class="{
-										'rotate-90 transform duration-200': open,
-										'duration-200': !open,
+										'rotate-90': open,
+										'rtl:rotate-180': !open,
 										hidden: chapter.is_scorm_package,
 										open: index == 1,
 									}"
-									class="h-4 w-4 text-ink-gray-9 stroke-1"
+									class="h-4 w-4 text-ink-gray-9 stroke-1 transform duration-200"
 								/>
 								<div
 									class="text-base text-start text-ink-gray-9 font-medium leading-5 ms-2"
diff --git a/frontend/src/components/Sidebar/AppSidebar.vue b/frontend/src/components/Sidebar/AppSidebar.vue
index d95bed6a..80648790 100644
--- a/frontend/src/components/Sidebar/AppSidebar.vue
+++ b/frontend/src/components/Sidebar/AppSidebar.vue
@@ -42,7 +42,10 @@
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
 								class="h-4 w-4 stroke-1.5 text-ink-gray-9 transition-all duration-300 ease-in-out"
-								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
+								:class="{
+									'rotate-90': sidebarStore.isWebpagesCollapsed,
+									'rtl:rotate-180': !sidebarStore.isWebpagesCollapsed,
+								}"
 							/>
 						</span>
 						<span class="ms-2">
diff --git a/frontend/src/components/VideoBlock.vue b/frontend/src/components/VideoBlock.vue
index 50eb6cd9..89043f58 100644
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -336,7 +336,7 @@ const toggleFullscreen = () => {
 const getQuizMarkerStyle = (time) => {
 	const percentage = ((time - 5) / Math.ceil(duration.value)) * 100
 	return {
-		left: `${percentage}%`,
+		insetInlineStart: `${percentage}%`,
 	}
 }
 
diff --git a/frontend/src/pages/Batches/components/BatchCard.vue b/frontend/src/pages/Batches/components/BatchCard.vue
index e8f409d6..c4e88536 100644
--- a/frontend/src/pages/Batches/components/BatchCard.vue
+++ b/frontend/src/pages/Batches/components/BatchCard.vue
@@ -108,6 +108,6 @@ const props = defineProps({
 }
 
 .avatar-group.overlap .avatar + .avatar {
-	margin-left: calc(-8px);
+	margin-inline-start: calc(-8px);
 }
 </style>
diff --git a/frontend/src/pages/Home/AdminHome.vue b/frontend/src/pages/Home/AdminHome.vue
index db2f60ef..1e3a8de2 100644
--- a/frontend/src/pages/Home/AdminHome.vue
+++ b/frontend/src/pages/Home/AdminHome.vue
@@ -121,7 +121,7 @@
 						<span>
 							{{ __('See all') }}
 						</span>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
@@ -149,7 +149,7 @@
 						<span>
 							{{ __('See all') }}
 						</span>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
diff --git a/frontend/src/pages/Home/StudentHome.vue b/frontend/src/pages/Home/StudentHome.vue
index a394b630..326e68ab 100644
--- a/frontend/src/pages/Home/StudentHome.vue
+++ b/frontend/src/pages/Home/StudentHome.vue
@@ -90,7 +90,7 @@
 						<span>
 							{{ __('See all') }}
 						</span>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
@@ -122,7 +122,7 @@
 						<span>
 							{{ __('See all') }}
 						</span>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>