Merge pull request #773 from lucianmurmurache/fix/prettier-plugin-tai…

…lwindcss fix: prettier plugin tailwindcss
activist-org · Mar 23, 2024 · 7f03ce7 · 7f03ce7
2 parents d727e10 + d7ff8cb
commit 7f03ce7
Show file tree

Hide file tree

Showing 142 changed files with 333 additions and 331 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -5,5 +5,6 @@
   "singleQuote": false,
   "plugins": [
     "prettier-plugin-tailwindcss"
-  ]
+  ],
+  "tailwindConfig": "./frontend/tailwind.config.ts"
 }
diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
@@ -10,13 +10,13 @@
     @apply bg-light-layer-2 dark:bg-dark-layer-2;
   }
   * {
-    @apply scrollbar scrollbar-w-2 scrollbar-thumb-light-distinct-text dark:scrollbar-thumb-dark-distinct-text scrollbar-track-transparent scrollbar-thumb-rounded-md;
+    @apply scrollbar scrollbar-track-transparent scrollbar-thumb-light-distinct-text scrollbar-thumb-rounded-md scrollbar-w-2 dark:scrollbar-thumb-dark-distinct-text;
   }
 }
 
 @layer components {
   .bg-breakpoint-test {
-    @apply 3xl:bg-pink-500 bg-red-500 sm:bg-orange-500 md:bg-yellow-500 lg:bg-green-500 xl:bg-blue-500 2xl:bg-violet-500;
+    @apply bg-red-500 sm:bg-orange-500 md:bg-yellow-500 lg:bg-green-500 xl:bg-blue-500 2xl:bg-violet-500 3xl:bg-pink-500;
   }
 
   .btn-base-class {
@@ -32,7 +32,7 @@
   }
 
   .elem-on-card-style {
-    @apply card-style-base bg-light-layer-2 dark:bg-dark-layer-2 hover:bg-light-highlight active:bg-light-layer-2 dark:hover:bg-dark-highlight dark:active:bg-dark-layer-2 dark:border-dark-text elem-shadow-sm dark:border;
+    @apply card-style-base elem-shadow-sm bg-light-layer-2 hover:bg-light-highlight active:bg-light-layer-2 dark:border dark:border-dark-text dark:bg-dark-layer-2 dark:hover:bg-dark-highlight dark:active:bg-dark-layer-2;
   }
 
   .elem-shadow-sm {
@@ -48,15 +48,15 @@
   }
 
   .focus-brand {
-    @apply focus-visible:ring-light-link-text dark:focus-visible:ring-dark-link-text focus-visible:border-light-link-text dark:focus-visible:border-dark-link-text rounded-sm focus:outline-none focus-visible:ring-2;
+    @apply rounded-sm focus:outline-none focus-visible:border-light-link-text focus-visible:ring-2 focus-visible:ring-light-link-text dark:focus-visible:border-dark-link-text dark:focus-visible:ring-dark-link-text;
   }
 
   .focus-inside {
-    @apply focus-within:ring-light-link-text dark:focus-within:ring-dark-link-text focus-within:border-light-link-text dark:focus-within:border-dark-link-text rounded-sm focus-within:outline-none focus-within:ring-2;
+    @apply rounded-sm focus-within:border-light-link-text focus-within:outline-none focus-within:ring-2 focus-within:ring-light-link-text dark:focus-within:border-dark-link-text dark:focus-within:ring-dark-link-text;
   }
 
   .link-text {
-    @apply text-light-link-text dark:text-dark-link-text hover:text-light-link-text-hover dark:hover:text-dark-link-text-hover;
+    @apply text-light-link-text hover:text-light-link-text-hover dark:text-dark-link-text dark:hover:text-dark-link-text-hover;
   }
 
   .responsive-h1 {
@@ -120,35 +120,35 @@
   }
 
   .style-action {
-    @apply text-light-text dark:text-light-action-red dark:bg-dark-action-red/10 dark:border-dark-action-red bg-light-action-red border-light-text hover:bg-light-action-red/80 active:bg-light-action-red dark:hover:bg-dark-action-red/25 dark:active:bg-dark-action-red/10 focus-brand border;
+    @apply focus-brand border border-light-text bg-light-action-red text-light-text hover:bg-light-action-red/80 active:bg-light-action-red dark:border-dark-action-red dark:bg-dark-action-red/10 dark:text-light-action-red dark:hover:bg-dark-action-red/25 dark:active:bg-dark-action-red/10;
   }
 
   .style-btn {
-    @apply text-light-text bg-light-layer-0 hover:bg-light-highlight active:bg-light-layer-0 dark:text-dark-text dark:bg-dark-layer-0 dark:hover:bg-dark-highlight dark:active:bg-dark-layer-0 focus-brand elem-shadow-sm dark:border-dark-text dark:border;
+    @apply focus-brand elem-shadow-sm bg-light-layer-0 text-light-text hover:bg-light-highlight active:bg-light-layer-0 dark:border dark:border-dark-text dark:bg-dark-layer-0 dark:text-dark-text dark:hover:bg-dark-highlight dark:active:bg-dark-layer-0;
   }
 
   .style-cta {
-    @apply text-light-text border-light-text dark:text-dark-cta-orange dark:border-dark-cta-orange fill-light-text  dark:fill-dark-cta-orange bg-light-cta-orange dark:bg-dark-cta-orange/10 hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10 focus-brand border;
+    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text  text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
   }
 
   .style-cta-secondary {
-    @apply text-light-text border-light-text dark:text-dark-text dark:border-dark-text fill-light-text dark:fill-dark-text bg-light-layer-2 dark:bg-dark-layer-2 hover:bg-light-highlight-darker active:bg-light-layer-2 dark:hover:bg-dark-highlight-lighter dark:active:bg-dark-layer-2 focus-brand border;
+    @apply focus-brand border border-light-text bg-light-layer-2 fill-light-text text-light-text hover:bg-light-highlight-darker active:bg-light-layer-2 dark:border-dark-text dark:bg-dark-layer-2 dark:fill-dark-text dark:text-dark-text dark:hover:bg-dark-highlight-lighter dark:active:bg-dark-layer-2;
   }
 
   .style-learn {
-    @apply text-light-text dark:text-light-learn-blue dark:bg-dark-learn-blue/10 dark:border-dark-learn-blue bg-light-learn-blue border-light-text hover:bg-light-learn-blue/80 active:bg-light-learn-blue dark:hover:bg-dark-learn-blue/25 dark:active:bg-dark-learn-blue/10 focus-brand border;
+    @apply focus-brand border border-light-text bg-light-learn-blue text-light-text hover:bg-light-learn-blue/80 active:bg-light-learn-blue dark:border-dark-learn-blue dark:bg-dark-learn-blue/10 dark:text-light-learn-blue dark:hover:bg-dark-learn-blue/25 dark:active:bg-dark-learn-blue/10;
   }
 
   .style-menu-option {
-    @apply text-light-text dark:text-dark-text fill-light-text dark:fill-dark-text hover:bg-light-highlight dark:hover:bg-dark-highlight focus-brand;
+    @apply focus-brand fill-light-text text-light-text hover:bg-light-highlight dark:fill-dark-text dark:text-dark-text dark:hover:bg-dark-highlight;
   }
 
   .style-menu-option-cta {
-    @apply bg-light-menu-selection dark:bg-dark-menu-selection text-light-layer-1 dark:text-dark-layer-1 fill-light-layer-1 dark:fill-dark-layer-1 hover:bg-light-menu-selection/80 dark:hover:bg-dark-menu-selection/80 focus-brand;
+    @apply focus-brand bg-light-menu-selection fill-light-layer-1 text-light-layer-1 hover:bg-light-menu-selection/80 dark:bg-dark-menu-selection dark:fill-dark-layer-1 dark:text-dark-layer-1 dark:hover:bg-dark-menu-selection/80;
   }
 
   .style-warn {
-    @apply text-light-text dark:text-light-warn-yellow dark:bg-dark-warn-yellow/10 dark:border-dark-warn-yellow bg-light-warn-yellow border-light-text hover:bg-light-warn-yellow/80 active:bg-light-warn-yellow dark:hover:bg-dark-warn-yellow/25 dark:active:bg-dark-warn-yellow/10 focus-brand border;
+    @apply focus-brand border border-light-text bg-light-warn-yellow text-light-text hover:bg-light-warn-yellow/80 active:bg-light-warn-yellow dark:border-dark-warn-yellow dark:bg-dark-warn-yellow/10 dark:text-light-warn-yellow dark:hover:bg-dark-warn-yellow/25 dark:active:bg-dark-warn-yellow/10;
   }
 
   .tooltip {

diff --git a/frontend/components/Loading.vue b/frontend/components/Loading.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="show"
-    class="bg-light-layer-2 dark:bg-dark-layer-2 fixed inset-0 z-50 flex h-screen items-center justify-center"
+    class="fixed inset-0 z-50 flex h-screen items-center justify-center bg-light-layer-2 dark:bg-dark-layer-2"
   >
     <div class="loading-pulse pb-10">
       <img

diff --git a/frontend/components/PasswordStrengthIndicator.vue b/frontend/components/PasswordStrengthIndicator.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="h-4">
     <div
-      class="bg-light-distinct-text dark:bg-dark-distinct-text h-1 rounded-md"
+      class="h-1 rounded-md bg-light-distinct-text dark:bg-dark-distinct-text"
     >
       <div
-        class="transition-width h-1 rounded-md duration-500 ease-in"
+        class="h-1 rounded-md transition-width duration-500 ease-in"
         :class="!!passwordValue.length ? `${color}` : ''"
         :style="`width: ${width}%;`"
       ></div>
@@ -13,9 +13,9 @@
       class="float-right mt-1 text-xs"
       :class="{
         'text-light-distinct-text dark:text-dark-distinct-text':
-          color !== 'bg-light-text dark-bg-dark-text',
+          color !== 'dark-bg-dark-text bg-light-text',
         'text-light-text dark:text-dark-text':
-          color === 'bg-light-text dark-bg-dark-text',
+          color === 'dark-bg-dark-text bg-light-text',
       }"
     >
       {{ $t("components.password-strength.title") }}:

diff --git a/frontend/components/ProgressBar.vue b/frontend/components/ProgressBar.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="bg-light-layer-2 dark:bg-dark-layer-2 border-light-section-div dark:border-dark-section-div flex h-2 w-full items-center justify-between border-b md:h-8"
+    class="flex h-2 w-full items-center justify-between border-b border-light-section-div bg-light-layer-2 dark:border-dark-section-div dark:bg-dark-layer-2 md:h-8"
   >
     <div
       :class="[
-        'transition-width h-full duration-500 ease-in',
+        'h-full transition-width duration-500 ease-in',
         {
           'bg-light-placeholder dark:bg-dark-placeholder': type === 'default',
           'bg-light-action-red dark:bg-dark-action-red': type === 'action',
@@ -14,7 +14,7 @@
       :style="{ width: `${percent}%` }"
     ></div>
     <NuxtLink
-      class="bg-light-cta-orange hover:bg-light-cta-orange/80 dark:bg-dark-cta-orange/10 dark:hover:bg-dark-cta-orange/25 text-light-text dark:text-dark-cta-orange hidden h-full items-center space-x-3 px-3 md:flex"
+      class="hidden h-full items-center space-x-3 bg-light-cta-orange px-3 text-light-text hover:bg-light-cta-orange/80 dark:bg-dark-cta-orange/10 dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 md:flex"
       :to="localePath('/')"
       :aria-label="$t('components.progress-bar.close-process-aria-label')"
     >

diff --git a/frontend/components/SearchBar.vue b/frontend/components/SearchBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="location == SearchBarLocation.SIDEBAR"
-    class="text-light-distinct-text dark:text-dark-distinct-text focus-within:border-light-link-text dark:focus-within:border-dark-link-text bg-light-layer-2 dark:bg-dark-layer-2 elem-shadow-sm mx-2 flex grow select-none items-center justify-between rounded-md py-1 pl-[12px] text-left transition duration-200 focus-within:mb-[-3px] focus-within:border-2"
+    class="elem-shadow-sm mx-2 flex grow select-none items-center justify-between rounded-md bg-light-layer-2 py-1 pl-[12px] text-left text-light-distinct-text transition duration-200 focus-within:mb-[-3px] focus-within:border-2 focus-within:border-light-link-text dark:bg-dark-layer-2 dark:text-dark-distinct-text dark:focus-within:border-dark-link-text"
   >
     <div class="flex items-center space-x-2 pl-1">
       <Icon class="my-1 h-4 w-4 flex-shrink-0" name="bi:search" size="1em" />
@@ -32,7 +32,7 @@
         class="transition-duration-200 flex space-x-1 pr-1 transition-opacity"
       >
         <div
-          class="has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text flex rounded-md px-2 py-[0.125rem] text-center text-sm"
+          class="has-tooltip flex rounded-md bg-light-highlight px-2 py-[0.125rem] text-center text-sm text-light-distinct-text dark:bg-dark-highlight dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -42,7 +42,7 @@
         </div>
         <div
           v-if="$device.isMacOS"
-          class="has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text flex rounded-md px-2 py-[0.125rem] text-center text-sm"
+          class="has-tooltip flex rounded-md bg-light-highlight px-2 py-[0.125rem] text-center text-sm text-light-distinct-text dark:bg-dark-highlight dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -52,7 +52,7 @@
         </div>
         <div
           v-else
-          class="has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text flex rounded-md px-2 py-[0.125rem] text-center text-sm"
+          class="has-tooltip flex rounded-md bg-light-highlight px-2 py-[0.125rem] text-center text-sm text-light-distinct-text dark:bg-dark-highlight dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -65,7 +65,7 @@
   </div>
   <div
     v-else
-    class="bg-light-layer-2 dark:bg-dark-layer-2 border-light-distinct-text dark:border-dark-distinct-text text-light-distinct-text dark:text-dark-distinct-text focus-within:border-light-cta-orange dark:focus-within:border-dark-cta-orange relative inline-flex select-none items-center space-x-2 rounded-md border py-1 pl-[12px] pr-[10px] text-left focus-within:border-2"
+    class="relative inline-flex select-none items-center space-x-2 rounded-md border border-light-distinct-text bg-light-layer-2 py-1 pl-[12px] pr-[10px] text-left text-light-distinct-text focus-within:border-2 focus-within:border-light-cta-orange dark:border-dark-distinct-text dark:bg-dark-layer-2 dark:text-dark-distinct-text dark:focus-within:border-dark-cta-orange"
   >
     <Icon
       @click="emit('on-search-toggle')"

diff --git a/frontend/components/btn/BtnIconsLabel.vue b/frontend/components/btn/BtnIconsLabel.vue
@@ -6,7 +6,7 @@
     <Icon v-if="rightIcon" class="ml-2" :name="rightIcon" :size="iconSize" />
     <div
       v-if="counter"
-      class="dark:bg-dark-cta-orange/25 -m-[0.1rem] ml-2 rounded-lg bg-black/20 px-1 py-[0.1rem]"
+      class="-m-[0.1rem] ml-2 rounded-lg bg-black/20 px-1 py-[0.1rem] dark:bg-dark-cta-orange/25"
     >
       {{ counter }}
     </div>

diff --git a/frontend/components/btn/action/BtnActionDropdown.vue b/frontend/components/btn/action/BtnActionDropdown.vue
@@ -18,7 +18,7 @@
         <Icon :name="dropdownIcon" :size="iconSize" />
       </MenuButton>
       <MenuItems
-        class="bg-light-layer-1 dark:bg-dark-layer-1 elem-shadow-lg absolute right-0 top-14 z-40 rounded-md ring-1 ring-black/5 focus:outline-none"
+        class="elem-shadow-lg absolute right-0 top-14 z-40 rounded-md bg-light-layer-1 ring-1 ring-black/5 focus:outline-none dark:bg-dark-layer-1"
       >
         <MenuItem
           v-for="o in dropdownOptions"
@@ -35,7 +35,7 @@
             @keypress.enter="dropdownOptionsCallback(o)"
             tabindex="0"
             :class="{
-              'bg-light-cta-orange/80 dark:bg-dark-cta-orange/40 text-light-text  dark:text-dark-cta-orange':
+              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40  dark:text-dark-cta-orange':
                 active,
               'text-light-text dark:text-dark-text': !active,
             }"

diff --git a/frontend/components/card/CardAbout.vue b/frontend/components/card/CardAbout.vue
@@ -12,13 +12,13 @@
           emit('expand-reduce-text');
           expand_reduce_text();
         "
-        class="text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand absolute right-0 rounded-full p-1"
+        class="focus-brand absolute right-0 rounded-full p-1 text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text hover:dark:text-dark-text"
       >
         <Icon class="h-10 w-10" name="bi:x-circle-fill" />
       </button>
       <div class="flex-col space-y-3">
         <div class="flex items-center gap-5">
-          <h3 class="responsive-h3 font-display text-left">
+          <h3 class="responsive-h3 text-left font-display">
             {{ $t("_global.about") }}
           </h3>
           <Icon name="bi:pencil-square" size="1.2em" />
@@ -56,7 +56,7 @@
                   emit('expand-reduce-text');
                   expand_reduce_text();
                 "
-                class="text-light-link-text dark:text-dark-link-text focus-brand mt-1 font-semibold"
+                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
                 :aria-label="$t('components.card-about.full-text-aria-label')"
               >
                 {{ $t("components.card-about.full-text") }}
@@ -67,7 +67,7 @@
                   emit('expand-reduce-text');
                   expand_reduce_text();
                 "
-                class="text-light-link-text dark:text-dark-link-text focus-brand mt-1 font-semibold"
+                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
                 :aria-label="$t('components.card-about.reduce-text-aria-label')"
               >
                 {{ $t("components.card-about.reduce-text") }}
@@ -103,7 +103,7 @@
                   emit('expand-reduce-text');
                   expand_reduce_text();
                 "
-                class="text-light-link-text dark:text-dark-link-text focus-brand mt-1 font-semibold"
+                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
                 :aria-label="$t('components.card-about.full-text-aria-label')"
               >
                 {{ $t("components.card-about.full-text") }}
@@ -114,7 +114,7 @@
                   emit('expand-reduce-text');
                   expand_reduce_text();
                 "
-                class="text-light-link-text dark:text-dark-link-text focus-brand mt-1 font-semibold"
+                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
                 :aria-label="$t('components.card-about.reduce-text-aria-label')"
               >
                 {{ $t("components.card-about.reduce-text") }}

diff --git a/frontend/components/card/CardConnect.vue b/frontend/components/card/CardConnect.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="card-style px-5 py-5">
     <div class="flex items-center gap-5">
-      <h3 class="responsive-h3 font-display text-left">
+      <h3 class="responsive-h3 text-left font-display">
         {{ $t("components._global.connect") }}
       </h3>
       <div
-        class="hover:text-light-highlight dark:hover:text-dark-highlight cursor-pointer break-all rounded-lg p-1 transition-all"
+        class="cursor-pointer break-all rounded-lg p-1 transition-all hover:text-light-highlight dark:hover:text-dark-highlight"
       >
         <Icon
           v-if="userIsAdmin && !editModeEnabled"