From fb3ac51cd8290c3cd7e1bd064e5aa5e41eda8e84 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 12 Jan 2022 11:27:08 +0000
Subject: [PATCH] Changes for Preferences menu and cleanup.

---
 index.html                      |  3 +-
 src/App.vue                     | 23 +++++++++++--
 src/components/Channel.vue      |  2 +-
 src/components/Comment.vue      | 14 ++++----
 src/components/ImportPage.vue   |  2 +-
 src/components/LoginPage.vue    |  7 ++--
 src/components/Navigation.vue   |  9 +++---
 src/components/Playlist.vue     |  2 +-
 src/components/Preferences.vue  | 57 ++++++++++++++-------------------
 src/components/RegisterPage.vue |  2 +-
 src/components/VideoItem.vue    |  8 ++---
 11 files changed, 69 insertions(+), 60 deletions(-)
diff --git a/index.html b/index.html
index d21a97a6..8e22d715 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="background: #0F0F0F" lang="en">
+<html style="background: #0f0f0f" lang="en">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -25,5 +25,4 @@
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
-    <!-- built files will be auto injected -->
 </html>
diff --git a/src/App.vue b/src/App.vue
index e6f6874e..2f875624 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full min-h-screen h-full px-1vw reset" :class="[theme]">
+    <div class="w-full min-h-screen px-1vw reset" :class="[theme]">
         <Navigation />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
@@ -134,7 +134,11 @@ b {
 .input,
 .select,
 .btn {
-    @apply w-auto h-full text-gray-600 bg-gray-300;
+    @apply w-auto h-8 text-gray-600 bg-gray-300;
+}
+
+.checkbox {
+    @apply h-4 w-4;
 }
 
 .dark .input,
@@ -165,8 +169,21 @@ hr {
     @apply dark:border-dark-100;
 }
 
+h1,
+h2 {
+    @apply m-0 font-bold;
+}
+
 h1 {
-    @apply m-0 !text-5xl font-bold;
+    @apply !text-5xl;
+}
+
+h2 {
+    @apply !text-3xl;
+}
+
+.table {
+    @apply w-full text-lg text-left font-light border;
 }
 
 .link {
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 701b363f..584bf10d 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -8,7 +8,7 @@
         </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">
+        <p class="whitespace-pre-wrap">
             <span v-html="purifyHTML(urlify(channel.description))" />
         </p>
 
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 1cad58b7..4c4d34ea 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -11,33 +11,33 @@
 
         <div class="comment-content pl-2">
             <div class="comment-header">
-                <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
+                <div v-if="comment.pinned" class="comment-pinned">
                     <font-awesome-icon icon="thumbtack" />
                     <span class="ml-1.5" v-text="$t('comment.pinned_by')" />
                     <span v-text="uploader" />
                 </div>
 
                 <div class="comment-author">
-                    <router-link class="font-bold uk-text-small" :to="comment.commentorUrl" v-text="comment.author" />
+                    <router-link class="font-bold link" :to="comment.commentorUrl" v-text="comment.author" />
                     <font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check" />
                 </div>
-                <div class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" />
+                <div class="comment-meta text-sm mb-1.5" v-text="comment.commentedTime" />
             </div>
             <div class="whitespace-pre-wrap" v-text="comment.commentText" />
-            <div class="comment-footer uk-margin-small-top uk-text-meta">
+            <div class="comment-footer mt-1">
                 <font-awesome-icon icon="thumbs-up" />
                 <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
                 <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart" />
             </div>
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div @click="loadReplies">
-                    <a class="uk-link-text" v-t="'actions.show_replies'" />
+                    <a v-t="'actions.show_replies'" />
                     <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
                 </div>
             </template>
             <template v-if="showingReplies">
                 <div @click="hideReplies">
-                    <a class="uk-link-text" v-t="'actions.hide_replies'" />
+                    <a v-t="'actions.hide_replies'" />
                     <font-awesome-icon class="ml-1.5" icon="level-up-alt" />
                 </div>
             </template>
@@ -46,7 +46,7 @@
                     <Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
                 </div>
                 <div v-if="nextpage" @click="loadReplies">
-                    <a class="uk-link-text" v-t="'actions.load_more_replies'" />
+                    <a v-t="'actions.load_more_replies'" />
                     <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
                 </div>
             </div>
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index a3a70a63..c549b807 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -8,7 +8,7 @@
                 <strong v-text="`Selected Subscriptions: ${selectedSubscriptions}`" />
             </div>
             <div class="uk-form-row">
-                <strong>Override: <input v-model="override" class="uk-checkbox" type="checkbox" /></strong>
+                <strong>Override: <input v-model="override" class="checkbox" type="checkbox" /></strong>
             </div>
             <div class="uk-form-row">
                 <a class="uk-width-1-1 btn uk-button-large w-auto" @click="handleImport">Import</a>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 97a2e67f..c21e6cef 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="uk-vertical-align text-center uk-height-1-1">
-        <form class="uk-panel uk-panel-box">
+    <div class="uk-vertical-align text-center">
+        <h1 v-t="'titles.login'" />
+        <form class="uk-panel uk-panel-box children:pb-3">
             <div class="uk-form-row">
                 <input
                     v-model="username"
@@ -22,7 +23,7 @@
                 />
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login" v-text="$t('titles.login')" />
+                <a class="btn w-auto" @click="login" v-text="$t('titles.login')" />
             </div>
         </form>
     </div>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 41961f30..b7057215 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,6 +1,6 @@
 <template>
-    <nav class="flex flex-wrap items-center justify-between px-2 sm:px-4 py-2.5 w-full relative">
-        <div>
+    <nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
+        <div class="flex-1">
             <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
                 ><img
                     alt="logo"
@@ -25,7 +25,7 @@
                 @blur="onInputBlur"
             />
         </div>
-        <div class="float-right">
+        <div class="flex-1 flex justify-end">
             <ul class="flex text-1xl children:pl-3">
                 <li>
                     <router-link v-t="'titles.preferences'" to="/preferences" />
@@ -81,7 +81,8 @@ export default {
         };
     },
     mounted() {
-        this.onSearchTextChange(new URLSearchParams(window.location.search).get("search_query"));
+        const query = new URLSearchParams(window.location.search).get("search_query");
+        if (query) this.onSearchTextChange(query);
     },
     computed: {
         shouldShowLogin(_this) {
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index 7272b1fd..ad714bd0 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -6,7 +6,7 @@
 
         <div class="grid grid-cols-2">
             <div>
-                <router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
+                <router-link class="link" :to="playlist.uploaderUrl || '/'">
                     <img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index d29ca8fb..8de22e04 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -1,66 +1,63 @@
 <template>
-    <div class="uk-flex uk-flex-between uk-flex-middle">
-        <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
+    <div class="flex">
+        <button @click="$router.go(-1) || $router.push('/')">
             <font-awesome-icon icon="chevron-left" /><span class="ml-1.5" v-text="$t('actions.back')" />
         </button>
-        <span><h1 v-t="'titles.preferences'" class="font-bold text-center" /></span>
-        <span />
     </div>
+    <h1 v-t="'titles.preferences'" class="font-bold text-center" />
     <hr />
     <h2>SponsorBlock</h2>
-    <p><span v-text="$t('actions.uses_api_from')" /><a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
+    <p>
+        <span v-text="$t('actions.uses_api_from')" /><a class="link" href="https://sponsor.ajay.app/"
+            >sponsor.ajay.app</a
+        >
+    </p>
     <label for="chkEnableSponsorblock"><strong v-t="'actions.enable_sponsorblock'" /></label>
     <br />
     <input
         id="chkEnableSponsorblock"
         v-model="sponsorBlock"
-        class="uk-checkbox"
+        class="checkbox"
         type="checkbox"
         @change="onChange($event)"
     />
     <br />
     <label for="chkSkipSponsors"><strong v-t="'actions.skip_sponsors'" /></label>
     <br />
-    <input id="chkSkipSponsors" v-model="skipSponsor" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkSkipSponsors" v-model="skipSponsor" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipIntro"><strong v-t="'actions.skip_intro'" /></label>
     <br />
-    <input id="chkSkipIntro" v-model="skipIntro" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkSkipIntro" v-model="skipIntro" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipOutro"><strong v-t="'actions.skip_outro'" /></label>
     <br />
-    <input id="chkSkipOutro" v-model="skipOutro" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkSkipOutro" v-model="skipOutro" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipPreview"><strong v-t="'actions.skip_preview'" /></label>
     <br />
-    <input id="chkSkipPreview" v-model="skipPreview" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkSkipPreview" v-model="skipPreview" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipInteraction"><strong v-t="'actions.skip_interaction'" /></label>
     <br />
     <input
         id="chkSkipInteraction"
         v-model="skipInteraction"
-        class="uk-checkbox"
+        class="checkbox"
         type="checkbox"
         @change="onChange($event)"
     />
     <br />
     <label for="chkSkipSelfPromo"><strong v-t="'actions.skip_self_promo'" /></label>
     <br />
-    <input
-        id="chkSkipSelfPromo"
-        v-model="skipSelfPromo"
-        class="uk-checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
+    <input id="chkSkipSelfPromo" v-model="skipSelfPromo" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipNonMusic"><strong v-t="'actions.skip_non_music'" /></label>
     <br />
     <input
         id="chkSkipNonMusic"
         v-model="skipMusicOffTopic"
-        class="uk-checkbox"
+        class="checkbox"
         type="checkbox"
         @change="onChange($event)"
     />
@@ -75,17 +72,11 @@
     <br />
     <label for="chkAutoPlayVideo"><strong v-t="'actions.autoplay_video'" /></label>
     <br />
-    <input
-        id="chkAutoPlayVideo"
-        v-model="autoPlayVideo"
-        class="uk-checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
+    <input id="chkAutoPlayVideo" v-model="autoPlayVideo" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkAudioOnly"><strong v-t="'actions.audio_only'" /></label>
     <br />
-    <input id="chkAudioOnly" v-model="listen" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkAudioOnly" v-model="listen" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="ddlDefaultQuality"><strong v-t="'actions.default_quality'" /></label>
     <br />
@@ -113,14 +104,14 @@
     <br />
     <label for="chkShowComments"><strong v-t="'actions.show_comments'" /></label>
     <br />
-    <input id="chkShowComments" v-model="showComments" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkShowComments" v-model="showComments" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkMinimizeDescription"><strong v-t="'actions.minimize_description_default'" /></label>
     <br />
     <input
         id="chkMinimizeDescription"
         v-model="minimizeDescription"
-        class="uk-checkbox"
+        class="checkbox"
         type="checkbox"
         @change="onChange($event)"
     />
@@ -130,7 +121,7 @@
     <input
         id="chkStoreWatchHistory"
         v-model="watchHistory"
-        class="uk-checkbox"
+        class="checkbox"
         type="checkbox"
         @change="onChange($event)"
     />
@@ -151,13 +142,13 @@
     <br />
     <label for="chkDisableLBRY"><strong v-t="'actions.disable_lbry'" /></label>
     <br />
-    <input id="chkDisableLBRY" v-model="disableLBRY" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkDisableLBRY" v-model="disableLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkEnableLBRYProxy"><strong v-t="'actions.enable_lbry_proxy'" /></label>
     <br />
-    <input id="chkEnableLBRYProxy" v-model="proxyLBRY" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
+    <input id="chkEnableLBRYProxy" v-model="proxyLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
     <h2 v-t="'actions.instances_list'" />
-    <table class="uk-table">
+    <table class="table">
         <thead>
             <tr>
                 <th v-text="$t('preferences.instance_name')" />
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index f7722f77..5557f8ca 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="uk-vertical-align text-center uk-height-1-1">
-        <form class="uk-panel uk-panel-box">
+        <form class="uk-panel uk-panel-box children:pb-3">
             <div class="uk-form-row">
                 <input
                     v-model="username"
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index bbffcd7d..25583421 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -61,13 +61,13 @@
                     <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
                 </router-link>
 
-                <strong v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
+                <strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
                     <span v-if="video.views >= 0">
                         <font-awesome-icon icon="eye" />
-                        <span v-text="`${numberFormat(video.views)} •`" />
+                        <span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" />
                     </span>
-                    <span v-if="video.uploadedDate" v-text="video.uploadedDate" />
-                    <span v-if="video.uploaded" v-text="timeAgo(video.uploaded)" />
+                    <span v-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
+                    <span v-if="video.uploaded" class="pl-0.5" v-text="timeAgo(video.uploaded)" />
                 </strong>
             </div>
         </div>
