Replace Bulma helpers with Tailwind utilities

src/components/AppModal.vue

@@ -3,16 +3,13 @@
   <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 padding-top-bigger padding-left-bigger padding-right-normal padding-bottom-small"
-        >
+        <header v-if="title" class="modal-header pt-8 pl-8 pr-4 pb-2">
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
           <button
             type="button"
-            class="close-button has-color-gray is-size-6 is-size-4-touch"
+            class="close-button text-gray text-lgr desk:text-base"
             :aria-label="$t('browse-page.aria.close')"
             @click="$emit('close')"
             @keypress.enter="$emit('close')"
@@ -84,10 +81,6 @@ export default {
   background: #00000094;
 }
 
-.has-color-gray {
-  color: rgb(176, 176, 176);
-}
-
 .modal-header {
   display: flex;
   justify-content: space-around;

src/components/ContentReport/ContentReportForm.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="content-report-form" class="padding-normal is-clearfix arrow-popup">
+  <div id="content-report-form" class="p-4 arrow-popup">
     <button
       :aria-label="$t('photo-details.aria.close-form')"
-      class="button close-button is-text tiny is-pulled-right is-block has-background-white"
+      class="button close-button is-text tiny float-right block bg-white"
       @click="closeForm()"
       @keyup.enter="closeForm()"
     >
@@ -28,16 +28,16 @@
       @sendContentReport="sendContentReport"
     />
     <form v-else>
-      <h5 class="b-header margin-bottom-normal">
+      <h5 class="b-header mb-4">
         {{ $t('photo-details.content-report.title') }}
       </h5>
-      <fieldset class="margin-bottom-normal">
-        <legend class="margin-bottom-normal">
+      <fieldset class="mb-4">
+        <legend class="mb-4">
           {{ $t('photo-details.content-report.issue') }}
         </legend>
 
         <div>
-          <label for="dmca" class="margin-left-small">
+          <label for="dmca" class="ml-2">
             <input
               id="dmca"
               v-model="selectedReason"
@@ -50,7 +50,7 @@
         </div>
 
         <div>
-          <label for="mature" class="margin-left-small">
+          <label for="mature" class="ml-2">
             <input
               id="mature"
               v-model="selectedReason"
@@ -63,7 +63,7 @@
         </div>
 
         <div>
-          <label for="other" class="margin-left-small">
+          <label for="other" class="ml-2">
             <input
               id="other"
               v-model="selectedReason"
@@ -76,16 +76,14 @@
         </div>
       </fieldset>
 
-      <p
-        class="caption has-text-weight-semibold has-text-grey margin-bottom-normal"
-      >
+      <p class="caption font-semibold text-gray mb-4">
         {{ $t('photo-details.content-report.caption') }}
       </p>
 
       <button
         type="button"
         :disabled="selectedReason === null"
-        class="button next-button tiny is-success is-pulled-right"
+        class="button next-button tiny is-success float-right"
         @click="onIssueSelected()"
         @keyup.enter="onIssueSelected()"
       >

src/components/ContentReport/DmcaNotice.vue

@@ -3,7 +3,7 @@
     <i18n
       path="photo-details.content-report.dmca.content"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
+      class="block px-6 mt-10 text-center"
     >
       <template #link>
         <a
@@ -19,7 +19,7 @@
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-normal has-text-centered"
+      class="block px-6 mt-4 text-center"
     >
       <template #link>
         <a
@@ -33,12 +33,12 @@
     </i18n>
 
     <button
-      class="button is-text tiny margin-top-normal is-shadowless"
+      class="button is-text tiny mt-4"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
       <span
-        ><i class="icon chevron-left margin-right-small" />
+        ><i class="icon chevron-left mr-2" />
         {{ $t('photo-details.content-report.back') }}</span
       >
     </button>

src/components/ContentReport/DoneMessage.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="margin-vertical-large">
-    <span class="is-block padding-horizontal-big has-text-centered">
+  <div class="my-10">
+    <span class="block px-6 text-center">
       {{ $t('photo-details.content-report.dmca.thanks') }}
     </span>
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="span"
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
+      class="block px-6 mt-10 text-center"
     >
       <template #link>
         <a

src/components/ContentReport/OtherIssueForm.vue

@@ -3,33 +3,33 @@
     <h4 class="b-header">
       {{ $t('photo-details.content-report.title') }}
     </h4>
-    <legend class="margin-bottom-small">
+    <legend class="mb-2">
       {{ $t('photo-details.content-report.issue-description') }}
     </legend>
     <label for="issue">
       <textarea
         id="issue"
         v-model="otherReasonDescription"
-        class="reason padding-small has-text-weight-semibold"
+        class="reason p-2 font-semibold"
         placeholder="Issue description required (with at least 20 characters)"
       />
     </label>
     <div>
       <button
-        class="button other-back-button is-text tiny margin-top-normal has-background-white"
+        class="button other-back-button is-text tiny mt-4 bg-white"
         @click="onBackClick()"
         @keyup.enter="onBackClick()"
       >
         <span>
-          <i class="icon chevron-left margin-right-small" />
+          <i class="icon chevron-left mr-2" />
           {{ $t('photo-details.content-report.back') }}
         </span>
       </button>
 
       <button
         type="button"
         :disabled="!descriptionHasMoreThan20Chars"
-        class="button submit-other-button tiny is-success margin-top-normal is-pulled-right"
+        class="button submit-other-button tiny is-success mt-4 float-right"
         @click="sendContentReport()"
         @keyup.enter="sendContentReport()"
       >

src/components/ContentReport/ReportError.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <span
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
-    >
+    <span class="block px-6 mt-10 text-center">
       {{ $t('photo-details.content-report.dmca.error') }}
     </span>
     <button
-      class="button is-text tiny margin-top-normal is-shadowless"
+      class="button is-text tiny mt-4"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
       <span>
-        <i class="icon chevron-left margin-right-small" />
+        <i class="icon chevron-left mr-2" />
         {{ $t('photo-details.content-report.back') }}
       </span>
     </button>

src/components/CopyButton.vue

@@ -2,15 +2,15 @@
   <button
     :id="id"
     type="button"
-    class="button tiny donate is-paddingless margin-top-normal padding-horizontal-normal"
+    class="button tiny donate px-4 py-0 mt-4"
     :data-clipboard-target="el"
   >
     <span v-if="!success">
-      <i class="icon cc-share margin-right-small" />
+      <i class="icon cc-share mr-2" />
       {{ $t('photo-details.copy.copy') }}
     </span>
     <span v-else>
-      <i class="icon cc-share margin-right-small" />
+      <i class="icon cc-share mr-2" />
       {{ $t('photo-details.copy.copied') }}
     </span>
   </button>

src/components/EmbeddedNavSection.vue

@@ -9,7 +9,7 @@
         height="24"
       />
     </NuxtLink>
-    <div class="navbar-brand has-color-white">
+    <div class="navbar-brand text-white">
       <a
         role="button"
         :class="{ ['navbar-burger']: true, ['is-active']: isBurgerMenuActive }"
@@ -38,7 +38,7 @@
           type="search"
           :placeholder="navSearchPlaceholder"
         />
-        <div class="is-sr-only">
+        <div class="sr-only">
           <button
             :aria-label="$t('header.aria.sr-search')"
             tabindex="-1"

src/components/ExtensionBrowsers.vue

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

src/components/Filters/FilterBlock.vue

@@ -1,11 +1,11 @@
 <template>
   <button
-    class="filter-block button tiny tag margin-horizontal-smaller"
+    class="filter-block button tiny tag mx-1"
     :aria-label="filterLabel + ' filter'"
   >
     <span>{{ filterLabel }}</span>
     <span
-      class="close margin-left-small padding-small"
+      class="close ml-2 p-2"
       tabindex="0"
       @click="onClick"
       @keyup.enter="onClick"

src/components/Filters/FilterChecklist.vue

@@ -14,16 +14,16 @@
       <button
         v-if="!filtersExpandedByDefault"
         :aria-label="'filters list for' + title + 'category'"
-        class="filter-visibility-toggle is-white padding-vertical-small"
+        class="filter-visibility-toggle is-white py-2"
       >
         <i
           v-if="areFiltersExpanded"
-          class="icon angle-up rotImg is-size-5 has-text-grey-light"
+          class="icon angle-up rotImg text-lg text-light-gray"
           title="toggle filters visibility"
         />
         <i
           v-else
-          class="icon angle-down is-size-5 has-text-grey-light"
+          class="icon angle-down text-lg text-light-gray"
           title="toggle filters visibility"
         />
       </button>
@@ -40,7 +40,7 @@
             :key="index"
             :name="item.code"
             type="checkbox"
-            class="filter-checkbox margin-right-small"
+            class="filter-checkbox mr-2"
             :checked="item.checked"
             :disabled="isDisabled(item)"
             @change="onValueChange"
@@ -54,7 +54,7 @@
           tabindex="0"
           src="@/assets/help_icon.svg"
           alt="help"
-          class="license-help padding-top-smallest padding-right-smaller"
+          class="license-help pr-1"
           @click.stop="toggleLicenseExplanationVisibility(item.code)"
           @keyup.enter="toggleLicenseExplanationVisibility(item.code)"
         />

src/components/Filters/FilterDisplay.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="filter-display" aria-live="polite">
-    <span v-if="anyFilterApplied" class="caption has-text-weight-semibold">{{
+    <span v-if="anyFilterApplied" class="caption font-semibold">{{
       $t('filters.filter-by')
     }}</span>
     <FilterBlock

src/components/Filters/FiltersList.vue

@@ -1,23 +1,20 @@
 <template>
   <div>
     <div class="filterlist-header">
-      <h4
-        class="padding-top-big padding-left-big padding-right-normal is-inline-block"
-      >
+      <h4 class="pt-6 pl-6 pr-4 inline-block">
         {{ $t('filter-list.filter-by') }}
       </h4>
 
       <button
         type="button"
-        class="button is-text tiny is-paddingless margin-top-big margin-right-small report is-shadowless is-pulled-right"
+        class="button is-text tiny p-0 mt-6 mr-2 report float-right"
         @click="onToggleSearchGridFilter()"
         @keyup.enter="onToggleSearchGridFilter()"
       >
-        <span
-          class="has-color-transition-blue is-hidden-touch is-size-7 is-lowercase"
-          >{{ $t('filter-list.hide') }}</span
-        >
-        <span class="margin-right-normal is-size-5 is-hidden-desktop">
+        <span class="text-trans-blue hidden desk:block text-sm lowercase">{{
+          $t('filter-list.hide')
+        }}</span>
+        <span class="mr-4 text-lg desk:hidden">
           <i class="icon cross" />
         </span>
       </button>

src/components/Filters/LicenseExplanationTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="license-explanation-tooltip padding-small">
+  <div class="license-explanation-tooltip p-2">
     <h5 v-if="(license === 'cc0') | (license === 'pdm')" class="b-header">
       {{ license.toUpperCase() }}
     </h5>
@@ -12,7 +12,7 @@
       v-if="(license === 'cc0') | (license === 'pdm')"
       path="filters.license-explanation.tool"
       tag="p"
-      class="caption is-pulled-right margin-small"
+      class="caption float-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
@@ -24,7 +24,7 @@
       v-else
       path="filters.license-explanation.license"
       tag="p"
-      class="caption is-pulled-right margin-small"
+      class="caption float-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{