Use Tailwind RTL styles everywhere

src/components/AppModal.vue

@@ -3,7 +3,7 @@
   <div ref="modal" class="overlay app-modal" @click.self="$emit('close')">
     <FocusTrap :active="true">
       <div class="modal relative" aria-modal="true" role="dialog">
-        <header v-if="title" class="modal-header pt-8 pl-8 pr-4 pb-2">
+        <header v-if="title" class="modal-header pt-8 ps-8 pe-4 pb-2">
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>

src/components/AudioDetails/Tags.vue

@@ -7,7 +7,7 @@
       <MediaTag
         v-for="(tag, index) in getValidTags()"
         :key="index"
-        class="mr-4"
+        class="me-4"
         @click="searchByTagName"
       >
         {{ tag.name }}

src/components/AudioTrack/layouts/Row.vue

@@ -1,6 +1,6 @@
 <template>
   <article class="row-track flex flex-row" :class="`size-${size}`">
-    <div class="flex-shrink-0" :class="isSmall ? 'w-20 mr-4' : 'w-30 mr-6'">
+    <div class="flex-shrink-0" :class="isSmall ? 'w-20 me-4' : 'w-30 me-6'">
       <AudioThumbnail :audio="audio" />
     </div>
     <div
@@ -95,11 +95,11 @@ export default {
 
 <style>
 .row-track .play-pause {
-  @apply rounded-tl-sm rounded-bl-sm flex-shrink-0;
+  @apply rounded-ts-sm rounded-bs-sm flex-shrink-0;
 }
 
 .row-track .waveform {
-  @apply rounded-tr-sm rounded-br-sm;
+  @apply rounded-te-sm rounded-be-sm;
 }
 
 .row-track.size-s .play-pause {
@@ -111,7 +111,7 @@ export default {
 }
 
 .row-track.size-s .thumbnail {
-  @apply rounded-tl-sm rounded-bl-sm overflow-hidden;
+  @apply rounded-ts-sm rounded-bs-sm overflow-hidden;
 }
 
 .row-track.size-m .play-pause {

src/components/ContentReport/ContentReportForm.vue

@@ -37,7 +37,7 @@
         </legend>
 
         <div>
-          <label for="dmca" class="ml-2">
+          <label for="dmca" class="ms-2">
             <input
               id="dmca"
               v-model="selectedReason"
@@ -50,7 +50,7 @@
         </div>
 
         <div>
-          <label for="mature" class="ml-2">
+          <label for="mature" class="ms-2">
             <input
               id="mature"
               v-model="selectedReason"
@@ -63,7 +63,7 @@
         </div>
 
         <div>
-          <label for="other" class="ml-2">
+          <label for="other" class="ms-2">
             <input
               id="other"
               v-model="selectedReason"

src/components/ContentReport/DmcaNotice.vue

@@ -42,7 +42,7 @@
       @keyup.enter="onBackClick()"
     >
       <span
-        ><i class="icon chevron-left mr-2" />
+        ><i class="icon chevron-left me-2" />
         {{ $t('photo-details.content-report.back') }}</span
       >
     </button>

src/components/ContentReport/OtherIssueForm.vue

@@ -21,7 +21,7 @@
         @keyup.enter="onBackClick()"
       >
         <span>
-          <i class="icon chevron-left mr-2" />
+          <i class="icon chevron-left me-2" />
           {{ $t('photo-details.content-report.back') }}
         </span>
       </button>

src/components/ContentReport/ReportError.vue

@@ -9,7 +9,7 @@
       @keyup.enter="onBackClick()"
     >
       <span>
-        <i class="icon chevron-left mr-2" />
+        <i class="icon chevron-left me-2" />
         {{ $t('photo-details.content-report.back') }}
       </span>
     </button>

src/components/CopyButton.vue

@@ -6,11 +6,11 @@
     :data-clipboard-target="el"
   >
     <span v-if="!success">
-      <i class="icon cc-share mr-2" />
+      <i class="icon cc-share me-2" />
       {{ $t('photo-details.copy.copy') }}
     </span>
     <span v-else>
-      <i class="icon cc-share mr-2" />
+      <i class="icon cc-share me-2" />
       {{ $t('photo-details.copy.copied') }}
     </span>
   </button>

src/components/ExtensionBrowsers.vue

@@ -5,10 +5,10 @@
         target="_blank"
         rel="nofollow noreferrer"
         :href="browser.extUrl"
-        class="browser-button button small mr-2 is-opaque"
+        class="browser-button button small me-2 is-opaque"
       >
         {{ $t(`browsers.${key}`) }}
-        <img class="ml-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
+        <img class="ms-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
       </a>
     </li>
   </ul>

src/components/Filters/FilterChecklist.vue

@@ -40,7 +40,7 @@
             :key="index"
             :name="item.code"
             type="checkbox"
-            class="filter-checkbox mr-2"
+            class="filter-checkbox me-2"
             :checked="item.checked"
             :disabled="isDisabled(item)"
             @change="onValueChange"
@@ -60,7 +60,7 @@
             :aria-label="$t('browse-page.aria.license-explanation')"
             tabindex="0"
             alt="help"
-            class="license-help pr-1"
+            class="license-help pe-1"
             @click.stop="toggleLicenseExplanationVisibility(item.code)"
             @keyup.enter="toggleLicenseExplanationVisibility(item.code)"
           >

src/components/Filters/FilterDisplay.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-wrap items-center p-4" aria-live="polite">
-    <span v-if="isAnyFilterApplied" class="mr-2 font-semibold mb-2">
+    <span v-if="isAnyFilterApplied" class="me-2 font-semibold mb-2">
       {{ $t('filters.filter-by') }}
     </span>
     <FilterTag
       v-for="filter in appliedFilterTags"
       :key="filter.code"
-      class="mx-1 mb-2 ml-2"
+      class="mx-1 mb-2 ms-2"
       :code="filter.code"
       :label="filter.name"
       :filter-type="filter.filterType"

src/components/Filters/FilterTag.vue

@@ -5,7 +5,7 @@
     @click="onClick"
   >
     <span>{{ filterLabel }}</span>
-    <span class="close ml-2 p-2"><i class="icon cross" /></span>
+    <span class="close ms-2 p-2"><i class="icon cross" /></span>
   </button>
 </template>
 <script>

src/components/Filters/FiltersList.vue

@@ -14,7 +14,7 @@
         <span class="text-trans-blue hidden desk:block text-sm lowercase">{{
           $t('filter-list.hide')
         }}</span>
-        <span class="mr-4 text-lg desk:hidden">
+        <span class="me-4 text-lg desk:hidden">
           <i class="icon cross" />
         </span>
       </button>

src/components/FooterSection.vue

@@ -44,8 +44,8 @@
               </template>
             </i18n>
             <div class="mt-1">
-              <i class="icon cc-logo mr-2 text-lgr" />
-              <i class="icon cc-by mr-2 text-lgr" />
+              <i class="icon cc-logo me-2 text-lgr" />
+              <i class="icon cc-by me-2 text-lgr" />
             </div>
           </div>
         </div>

src/components/ImageDetails/PhotoDetails.vue

@@ -3,12 +3,12 @@
     <div class="column is-three-fifths photo_image-ctr mt-4">
       <a
         v-if="shouldShowBreadcrumb"
-        class="block photo_breadcrumb text-left ml-4 mb-4 text-dark-gray font-semibold caption"
+        class="block photo_breadcrumb text-left ms-4 mb-4 text-dark-gray font-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
       >
-        <i class="icon chevron-left mr-2" />
+        <i class="icon chevron-left me-2" />
         {{ $t('photo-details.back') }}
       </a>
 
@@ -34,8 +34,8 @@
           class="button is-text tiny p-0 report mt-2"
           @click="toggleReportFormVisibility"
         >
-          <span class="text-trans-blue ml-2 text-sm">
-            <i class="icon flag mr-2" />
+          <span class="text-trans-blue ms-2 text-sm">
+            <i class="icon flag me-2" />
             {{ $t('photo-details.content-report.title') }}
           </span>
         </button>
@@ -50,7 +50,7 @@
     <div
       role="region"
       :aria-label="$t('photo-details.aria.details')"
-      class="column image-info ml-12"
+      class="column image-info ms-12"
     >
       <div class="my-4">
         <h1 class="text-2xl">
@@ -148,7 +148,7 @@
         @keyup.enter="onPhotoSourceLinkClicked"
       >
         {{ $t('photo-details.weblink') }}
-        <i class="icon external-link ml-4 text-base pt-1 text-light-gray" />
+        <i class="icon external-link ms-4 text-base pt-1 text-light-gray" />
       </a>
 
       <ReuseSurvey :image="image" />

src/components/MetaSearch/MetaSourceList.vue

@@ -6,11 +6,11 @@
           target="_blank"
           rel="nofollow noreferrer"
           :href="getSourceUrl(source)"
-          class="button small mr-2 is-opaque"
+          class="button small me-2 is-opaque"
         >
           {{ source }}
           <sup class="top-0">
-            <i class="ml-2 icon external-link" />
+            <i class="ms-2 icon external-link" />
           </sup>
         </a>
       </li>

src/components/NavSection.vue

@@ -26,7 +26,7 @@
       </a>
     </div>
     <div :class="{ ['navbar-menu']: true, ['is-active']: isBurgerMenuActive }">
-      <div v-if="showNavSearch" class="ml-6">
+      <div v-if="showNavSearch" class="ms-6">
         <form
           class="hero_search-form"
           role="search"

src/components/SaferBrowsing.vue

@@ -7,7 +7,7 @@
     >
       <span class="text-trans-blue" style="white-space: nowrap">
         {{ $t('browse-page.safer-browsing.title') }}
-        <i class="icon flag ml-2" />
+        <i class="icon flag ms-2" />
       </span>
     </button>
     <FocusTrap :active="true">
@@ -19,7 +19,7 @@
         >
           <i class="icon cross" />
         </button>
-        <p class="caption font-semibold pr-6">
+        <p class="caption font-semibold pe-6">
           {{ $t('browse-page.safer-browsing.caption') }}
         </p>
 

src/components/SearchGridForm.vue

@@ -16,7 +16,7 @@
       {{ $t('filters.title') }}
     </button>
     <div
-      class="search-field field has-addons control search-control has-icons-left ml-2"
+      class="search-field field has-addons control search-control has-icons-left ms-2"
     >
       <label for="searchInput" class="search-field__label control label">
         <input

src/components/SearchGridManualLoad.vue

@@ -11,7 +11,7 @@
         <span class="caption font-semibold">
           {{ _imagesCount }}
         </span>
-        <div class="hidden desk:block desk:mr-auto desk:pl-6">
+        <div class="hidden desk:block desk:me-auto desk:ps-6">
           <SearchRating v-if="searchTerm" :search-term="searchTerm" />
         </div>
         <SaferBrowsing />

src/components/SearchTypeToggle.vue

@@ -10,7 +10,7 @@
       {{ $t('hero.search-type.image') }}
     </button>
     <button
-      class="toggle-button ml-2"
+      class="toggle-button ms-2"
       role="radio"
       type="button"
       :aria-checked="value === 'audio'"

test/unit/specs/components/__snapshots__/filter-display.spec.js.snap

@@ -6,7 +6,7 @@ exports[`FilterDisplay should render correct contents 1`] = `
   class="flex flex-wrap items-center p-4"
 >
   <span
-    class="mr-2 font-semibold mb-2"
+    class="me-2 font-semibold mb-2"
   >
     
     filters.filter-by
@@ -15,14 +15,14 @@ exports[`FilterDisplay should render correct contents 1`] = `
    
   <button
     aria-label="filters.aria.remove-filter"
-    class="button tiny tag mx-1 mb-2 ml-2"
+    class="button tiny tag mx-1 mb-2 ms-2"
   >
     <span>
       filters.licenses.cc0
     </span>
      
     <span
-      class="close ml-2 p-2"
+      class="close ms-2 p-2"
     >
       <i
         class="icon cross"

test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap

@@ -10,7 +10,7 @@ exports[`FilterTag should render correct contents 1`] = `
   </span>
    
   <span
-    class="close ml-2 p-2"
+    class="close ms-2 p-2"
   >
     <i
       class="icon cross"