From 05d7853ef0472688b49f7716cc4bbbcb70089c6b Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 12 Jan 2022 11:59:50 +0000
Subject: [PATCH] Convert inline style css to classes.

---
 src/App.vue                      | 11 ++++++++++-
 src/components/ErrorHandler.vue  |  2 +-
 src/components/FeedPage.vue      |  6 +++---
 src/components/HistoryPage.vue   | 12 +++++++-----
 src/components/SearchResults.vue |  3 +--
 src/components/VideoItem.vue     | 10 ++++------
 6 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2f875624..e0c339a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -134,7 +134,16 @@ b {
 .input,
 .select,
 .btn {
-    @apply w-auto h-8 text-gray-600 bg-gray-300;
+    @apply w-auto text-gray-600 bg-gray-300;
+}
+
+.input,
+.select {
+    @apply h-8;
+}
+
+.btn {
+    @apply h-full;
 }
 
 .checkbox {
diff --git a/src/components/ErrorHandler.vue b/src/components/ErrorHandler.vue
index 8a57775e..4919ac52 100644
--- a/src/components/ErrorHandler.vue
+++ b/src/components/ErrorHandler.vue
@@ -1,7 +1,7 @@
 <template>
     <p v-text="message" />
     <button @click="toggleTrace" class="btn" v-text="$t('actions.show_more')" />
-    <p ref="stacktrace" style="white-space: pre-wrap" hidden v-text="error" />
+    <p ref="stacktrace" class="whitespace-pre-wrap" hidden v-text="error" />
 </template>
 
 <script>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index f6308529..5544cd11 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,13 +1,13 @@
 <template>
     <h1 v-t="'titles.feed'" class="font-bold text-center" />
 
-    <button v-if="authenticated" class="btn" style="margin-right: 0.5rem" @click="exportHandler">
-        <router-link to="/subscriptions"> Subscriptions </router-link>
+    <button v-if="authenticated" class="btn mr-2" @click="exportHandler">
+        <router-link to="/subscriptions">Subscriptions</router-link>
     </button>
 
     <span>
         <a :href="getRssUrl">
-            <font-awesome-icon icon="rss" style="padding-top: 0.2rem" />
+            <font-awesome-icon icon="rss" />
         </a>
     </span>
 
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index b5745bea..539c3cd6 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,12 +1,14 @@
 <template>
     <h1 class="font-bold text-center" v-text="$t('titles.history')" />
 
-    <div style="text-align: left">
-        <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
-    </div>
+    <div class="flex">
+        <div>
+            <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
+        </div>
 
-    <div style="text-align: right">
-        <Sorting by-key="watchedAt" @apply="order => videos.sort(order)" />
+        <div class="right-1">
+            <Sorting by-key="watchedAt" @apply="order => videos.sort(order)" />
+        </div>
     </div>
 
     <hr />
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 92882512..ccb2bd2a 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -9,7 +9,6 @@
         v-model="selectedFilter"
         default="all"
         class="select w-auto"
-        style="height: 100%"
         @change="updateResults()"
     >
         <option v-for="filter in availableFilters" :key="filter" :value="filter" v-text="filter.replace('_', ' ')" />
@@ -31,7 +30,7 @@
             <div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
                 <router-link :to="result.url">
                     <div class="relative">
-                        <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
+                        <img class="w-full" :src="result.thumbnail" loading="lazy" />
                     </div>
                     <p>
                         <span v-text="result.name" />
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 25583421..8901d538 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -5,14 +5,12 @@
             <div class="relative text-sm">
                 <span
                     v-if="video.duration"
-                    class="thumbnail-overlay bottom-5px right-5px"
-                    style="padding: 0 5px"
+                    class="thumbnail-overlay bottom-5px right-5px px-5px"
                     v-text="timeFormat(video.duration)"
                 />
                 <span
                     v-if="video.watched"
-                    class="thumbnail-overlay bottom-5px left-5px"
-                    style="padding: 0 5px"
+                    class="thumbnail-overlay bottom-5px left-5px px-5px"
                     v-text="$t('video.watched')"
                 />
             </div>
@@ -27,7 +25,7 @@
             </div>
         </router-link>
 
-        <div class="float-right ml-0 mb-0 inline-block">
+        <div class="float-right m-0 inline-block">
             <router-link
                 :to="video.url + '&listen=1'"
                 :aria-label="'Listen to ' + video.title"
@@ -37,7 +35,7 @@
             </router-link>
         </div>
 
-        <div class="flex" style="flex-flow: row">
+        <div class="flex">
             <router-link :to="video.uploaderUrl">
                 <img
                     v-if="video.uploaderAvatar"