Convert inline style css to classes.

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 {

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>

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">
+    <button v-if="authenticated" class="btn mr-2" @click="exportHandler">
-        <router-link to="/subscriptions"> Subscriptions </router-link>
+        <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>
 

src/components/HistoryPage.vue

@@ -1,13 +1,15 @@
 <template>
     <h1 class="font-bold text-center" v-text="$t('titles.history')" />
 
-    <div style="text-align: left">
+    <div class="flex">
+        <div>
             <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
         </div>
 
-    <div style="text-align: right">
+        <div class="right-1">
             <Sorting by-key="watchedAt" @apply="order => videos.sort(order)" />
         </div>
+    </div>
 
     <hr />
 

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" />

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"
+                    class="thumbnail-overlay bottom-5px right-5px px-5px"
-                    style="padding: 0 5px"
                     v-text="timeFormat(video.duration)"
                 />
                 <span
                     v-if="video.watched"
-                    class="thumbnail-overlay bottom-5px left-5px"
+                    class="thumbnail-overlay bottom-5px left-5px px-5px"
-                    style="padding: 0 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"