From 3c5c6098d16840d617e75b767c50a90291a11ae5 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 9 Apr 2023 14:07:02 +0300
Subject: [PATCH] fix message emojis reaction alignment

---
 src/assets/css/_mixins.scss |  9 +++++++++
 src/assets/css/chat.scss    | 13 +++++++++++--
 src/assets/css/main.scss    |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/css/_mixins.scss

diff --git a/src/assets/css/_mixins.scss b/src/assets/css/_mixins.scss
new file mode 100644
index 0000000..a575d47
--- /dev/null
+++ b/src/assets/css/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin emoji-reaction-transform($type: 'right') {
+  @if $type == 'right' {
+    transform: translateX(20px) translateX(100%);
+  }
+
+  @if $type == 'left' {
+    transform: translateX(-20px) translateX(-100%);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 7ddccf7..03f213d 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -715,7 +715,6 @@ body {
   display: inline-block;
   position: relative;
   vertical-align: bottom;
-  transform: translateX(-20px) translateX(-100%);
   top: 18px;
   z-index: 2;
   background-color: #f7f7f7;
@@ -724,8 +723,14 @@ body {
   height: 26px;
   width: max-content;
   padding: 0px 6px;
+  @include emoji-reaction-transform('left');
+
   .messageOut & {
-    transform: translateX(20px) translateX(100%);
+    @include emoji-reaction-transform('right');
+
+    [dir="rtl"] & {
+      @include emoji-reaction-transform('left');
+    }
   }
   .quick-reaction {
     position: relative;
@@ -747,6 +752,10 @@ body {
     font-weight: 700;
     // background-color: palegreen;
   }
+
+  [dir="rtl"] & {
+    @include emoji-reaction-transform('right');
+  }
 }
 
 .download-overlay {
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index a83e0aa..9ac9dd6 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,5 +1,6 @@
 @import './variables';
 @import './utilities';
+@import './mixins';
 
 @font-face {
     font-family: "Inter";