chore: Refactor tables in all screen for RTL (#6525)

* chore: Refactor tables in all screen for RTL

* Notification page footer

* Apply suggestions from code review

* chore: Minor ixes

* chore: Adds rtl comment

* chore: Code clean up for contact table

---------

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -24,7 +24,7 @@
           <fluent-icon
             icon="chevron-left"
             size="18"
-            class="margin-left-minus-slab"
+            :class="pageFooterIconClass"
           />
         </woot-button>
         <woot-button
@@ -65,7 +65,7 @@
           <fluent-icon
             icon="chevron-right"
             size="18"
-            class="margin-left-minus-slab"
+            :class="pageFooterIconClass"
           />
         </woot-button>
       </div>
@@ -74,8 +74,11 @@
 </template>
 
 <script>
+import rtlMixin from 'shared/mixins/rtlMixin';
+
 export default {
   components: {},
+  mixins: [rtlMixin],
   props: {
     currentPage: {
       type: Number,
@@ -91,6 +94,11 @@ export default {
     },
   },
   computed: {
+    pageFooterIconClass() {
+      return this.isRTLView
+        ? 'margin-right-minus-slab'
+        : 'margin-left-minus-slab';
+    },
     isFooterVisible() {
       return this.totalCount && !(this.firstIndex > this.totalCount);
     },

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -38,11 +38,7 @@ export default {
   text-align: left;
 
   .user-name {
-    margin: 0;
-    text-transform: capitalize;
-  }
-  .user-thumbnail-box {
-    margin-right: var(--space-small);
+    margin: 0 var(--space-small);
   }
 }
 </style>