Merge branch '384-language-urdu-message-emojis-alignment' into 'dev'

fix message emojis reaction alignment

For issue #384

See merge request keanuapp/keanuapp-weblite!167

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%);
+  }
+}

src/assets/css/chat.scss

@@ -716,7 +716,6 @@ body {
   display: inline-block;
   position: relative;
   vertical-align: bottom;
-  transform: translateX(-20px) translateX(-100%);
   top: 18px;
   z-index: 2;
   background-color: #f7f7f7;
@@ -725,8 +724,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;
@@ -748,6 +753,10 @@ body {
     font-weight: 700;
     // background-color: palegreen;
   }
+
+  [dir="rtl"] & {
+    @include emoji-reaction-transform('right');
+  }
 }
 
 .download-overlay {

src/assets/css/main.scss

@@ -1,5 +1,6 @@
 @import './variables';
 @import './utilities';
+@import './mixins';
 
 @font-face {
     font-family: "Inter";