Migrate more css classes.

src/App.vue

@@ -7,7 +7,7 @@
             </keep-alive>
         </router-view>
 
-        <div style="text-align: center">
+        <footer class="text-center">
             <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
                 <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
             </a>
@@ -16,7 +16,7 @@
                 <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
                 {{ $t("actions.donations") }}
             </a>
-        </div>
+        </footer>
     </div>
 </template>
 
@@ -113,7 +113,7 @@ b {
 }
 
 .video-grid {
-    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto gap-x-1vw gap-y-0.2vh;
+    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto gap-x-1vw gap-y-1.5 mx-3;
 }
 
 .btn {
@@ -121,7 +121,7 @@ b {
 }
 
 .dark {
-    @apply text-white bg-dark-800;
+    @apply text-white bg-dark-800 bg-opacity-70;
 }
 
 .dark .input,
@@ -141,4 +141,8 @@ h1 {
 hr {
     @apply !mt-2 !mb-3;
 }
+
+.link {
+    @apply hover:(text-gray-300 underline underline-gray-300);
+}
 </style>

src/components/Channel.vue

@@ -2,10 +2,11 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <div v-if="channel" v-show="!channel.error">
-        <h1 class="text-center">
-            <img height="48" width="48" class="rounded-full" :src="channel.avatarUrl" />{{ channel.name }}
-        </h1>
-        <img v-if="channel.bannerUrl" :src="channel.bannerUrl" style="width: 100%" loading="lazy" />
+        <div class="flex justify-center place-items-center">
+            <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
+            <h1>{{ channel.name }}</h1>
+        </div>
+        <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
         <!-- eslint-disable-next-line vue/no-v-html -->
         <p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
 

src/components/RegisterPage.vue

@@ -22,9 +22,7 @@
                 />
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="register">
-                    {{ $t("titles.register") }}</a
-                >
+                <a class="uk-width-1-1 btn w-auto" @click="register"> {{ $t("titles.register") }}</a>
             </div>
         </form>
     </div>

src/components/SubscriptionsPage.vue

@@ -1,38 +1,33 @@
 <template>
     <h1 class="font-bold text-center">{{ $t("titles.subscriptions") }}</h1>
 
-    <div>
-        <button v-if="authenticated" class="uk-button uk-button-small" style=" margin-right: 0.5rem">
+    <div v-if="authenticated">
+        <button class="btn mr-0.5">
             <router-link to="/import">
                 {{ $t("actions.import_from_json") }}
             </router-link>
         </button>
 
-        <button v-if="authenticated" class="uk-button uk-button-small" style="color: white" @click="exportHandler">
+        <button class="btn" @click="exportHandler">
             {{ $t("actions.export_to_json") }}
         </button>
     </div>
     <hr />
 
-    <div v-for="subscription in subscriptions" :key="subscription.url" style="text-align: center">
-        <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
-            <a :href="subscription.url">
-                <img :src="subscription.avatar" class="uk-margin-small-right rounded-full" width="96" height="96" />
-                <span
-                    class="uk-text-large"
-                    style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem"
-                    >{{ subscription.name }}</span
-                >
-            </a>
-            <button
-                class="uk-button uk-button-large"
-                style="background: #222; margin-left: 0.5rem; width: 185px"
-                @click="handleButton(subscription)"
-            >
-                {{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
-            </button>
+    <div class="grid">
+        <div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url">
+            <div class="flex justify-center place-items-center">
+                <div class="w-full grid grid-cols-3">
+                    <router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl">
+                        <img :src="subscription.avatar" class="rounded-full" width="48" height="48" />
+                        <span>{{ subscription.name }}</span>
+                    </router-link>
+                    <button class="btn !w-min" @click="handleButton(subscription)">
+                        {{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
+                    </button>
+                </div>
+            </div>
         </div>
-        <br />
     </div>
     <br />
 </template>

src/components/VideoItem.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
+    <div class="uk-text-secondary">
         <router-link class="uk-text-emphasis" :to="video.url">
-            <img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
+            <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
             <div class="relative">
                 <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
                     timeFormat(video.duration)
@@ -14,13 +14,11 @@
             <div>
                 <p
                     style="
-                        padding-top: 0.5rem;
-                        margin-bottom: 0.5rem;
                         display: -webkit-box;
                         -webkit-line-clamp: 2;
                         -webkit-box-orient: vertical;
-                        overflow: hidden;
                     "
+                    class="my-2 overflow-hidden flex link"
                     :title="video.title"
                 >
                     {{ video.title }}
@@ -28,7 +26,7 @@
             </div>
         </router-link>
 
-        <div class="float-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
+        <div class="float-right ml-0 mb-0 inline-block">
             <router-link
                 :to="video.url + '&listen=1'"
                 :aria-label="'Listen to ' + video.title"
@@ -38,7 +36,7 @@
             </router-link>
         </div>
 
-        <div style="display: flex; flex-flow: row; height: 15%">
+        <div class="flex" style="flex-flow: row">
             <router-link class="uk-link-muted" :to="video.uploaderUrl">
                 <img
                     v-if="video.uploaderAvatar"
@@ -55,7 +53,6 @@
                     class="uk-link-muted overflow-hidden block"
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
-                    style="display: block; width: 90%"
                 >
                     {{ video.uploaderName }}&thinsp;<font-awesome-icon
                         v-if="video.uploaderVerified"

src/components/WatchVideo.vue

@@ -44,22 +44,18 @@
                         <b v-t="'video.ratings_disabled'" />
                     </div>
                 </template>
-                <a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left uk-button uk-button-small">
+                <a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
                     <b>{{ $t("player.watch_on") }}&nbsp;</b>
                     <font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
                 </a>
-                <a
-                    v-if="video.lbryId"
-                    :href="'https://odysee.com/' + video.lbryId"
-                    class="uk-margin-small-left uk-button uk-button-small"
-                >
+                <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="uk-margin-small-left btn">
                     <b>{{ $t("player.watch_on") }} LBRY</b>
                 </a>
                 <router-link
                     :to="toggleListenUrl"
                     :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
                     :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
-                    class="uk-margin-small-left uk-button uk-button-small"
+                    class="uk-margin-small-left btn"
                 >
                     <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
                 </router-link>
@@ -71,16 +67,16 @@
                     {{ video.uploader }} </router-link
                 >&thinsp;<font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
                 <div class="uk-flex-1"></div>
-                <button v-if="authenticated" class="uk-button uk-button-small" @click="subscribeHandler">
+                <button v-if="authenticated" class="btn" @click="subscribeHandler">
                     {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
                 </button>
             </div>
 
             <hr />
 
-            <a class="uk-button uk-button-small" @click="showDesc = !showDesc">
+            <button class="btn" @click="showDesc = !showDesc">
                 {{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
-            </a>
+            </button>
             <!-- eslint-disable-next-line vue/no-v-html -->
             <p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="purifyHTML(video.description)"></p>
             <div v-if="showDesc && sponsors && sponsors.segments">
@@ -127,7 +123,7 @@
             </div>
 
             <div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
-                <a class="uk-button uk-button-small uk-margin-small-bottom sm:hidden" @click="showRecs = !showRecs">
+                <a class="btn uk-margin-small-bottom sm:hidden" @click="showRecs = !showRecs">
                     {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
                 </a>
                 <div

src/main.js

@@ -49,7 +49,7 @@ TimeAgo.addDefaultLocale(en);
 
 import { createI18n } from "vue-i18n";
 import enLocale from "@/locales/en.json";
-import "windi.css";
+import("windi.css");
 
 const timeAgo = new TimeAgo("en-US");