Feat/tailwind (#1179)

components/layout/history.vue

@@ -7,7 +7,11 @@
       </button> -->
     </div>
     <div class="virtual-list" :class="{ filled: filteredHistory.length }">
-      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+      <ul
+        v-for="(entry, index) in filteredHistory"
+        :key="index"
+        class="flex-col border-b border-dashed border-brdColor"
+      >
         <div class="show-on-large-screen">
           <button
             class="icon"
@@ -30,7 +34,7 @@
               {{ entry.star ? "star" : "star_border" }}
             </i>
           </button>
-          <li class="method-list-item">
+          <li class="relative">
             <input
               :aria-label="$t('method')"
               type="text"
@@ -38,14 +42,8 @@
               :value="`${entry.method} ${entry.status}`"
               :class="findEntryStatus(entry).className"
               :style="{ '--status-code': entry.status }"
-              class="bg-color"
+              class="bg-transparent"
             />
-            <!-- <span
-              class="entry-status-code"
-              :class="findEntryStatus(entry).className"
-              :style="{ '--status-code': entry.status }"
-              >{{ entry.status }}</span
-            > -->
           </li>
           <v-popover>
             <button class="tooltip-target icon" v-tooltip="$t('options')">
@@ -66,14 +64,14 @@
               </div>
             </template>
           </v-popover>
-          <!-- <li class="method-list-item">
+          <!-- <li class="relative">
             <input
               :aria-label="$t('label')"
               type="text"
               readonly
               :value="entry.label"
               :placeholder="$t('no_label')"
-              class="bg-color"
+              class="bg-transparent"
             />
           </li> -->
           <!-- <li>
@@ -101,7 +99,7 @@
               readonly
               :value="`${entry.url}${entry.path}`"
               :placeholder="$t('no_url')"
-              class="bg-color"
+              class="bg-transparent"
             />
           </li>
           <!-- <li>
@@ -147,7 +145,7 @@
         </transition>
       </ul>
     </div>
-    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
+    <ul class="flex-col" :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
       <li>
         <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
       </li>
@@ -156,7 +154,7 @@
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
-      <div class="flex-wrap" v-if="!isClearingHistory">
+      <div class="row-wrapper" v-if="!isClearingHistory">
         <button
           class="icon"
           id="clear-history-button"
@@ -218,7 +216,7 @@
           </template>
         </v-popover>
       </div>
-      <div class="flex-wrap" v-else>
+      <div class="row-wrapper" v-else>
         <label for="clear-history-button" class="info">
           <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </label>
@@ -250,47 +248,24 @@
   max-height: calc(100vh - 290px);
 
   [readonly] {
-    cursor: default;
+    @apply cursor-default;
   }
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.2s;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 }
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 
 .stared {
-  color: #f8e81c !important;
-}
-
-ul,
-ol {
-  flex-direction: column;
-}
-
-.method-list-item {
-  position: relative;
-
-  span {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-family: "Roboto Mono", monospace;
-    font-weight: 400;
-    background-color: transparent;
-    padding: 2px 6px;
-    border-radius: 8px;
-  }
-}
-
-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
+  @apply text-yellow-200;
 }
 
 @media (max-width: 720px) {
@@ -299,7 +274,7 @@ ol {
   }
 
   .labels {
-    display: none;
+    @apply hidden;
   }
 }
 </style>
@@ -341,14 +316,16 @@ export default {
         fb.currentUser !== null
           ? fb.currentHistory
           : JSON.parse(window.localStorage.getItem("history")) || []
-      return this.history.filter((entry) => {
-        const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some((key) => {
-          let value = entry[key]
-          value = typeof value !== "string" ? value.toString() : value
-          return value.toLowerCase().includes(filterText)
+      return this.history
+        .filter((entry) => {
+          const filterText = this.filterText.toLowerCase()
+          return Object.keys(entry).some((key) => {
+            let value = entry[key]
+            value = typeof value !== "string" ? value.toString() : value
+            return value.toLowerCase().includes(filterText)
+          })
         })
-      }).reverse()
+        .reverse()
     },
   },
   methods: {