From d9283b27627fb6132fa9500a26caf3bd3f1b1da4 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 27 Dec 2021 14:46:33 +0000
Subject: [PATCH] Fix navbar.

---
 src/App.vue                   |  6 +++++-
 src/components/Navigation.vue | 16 ++++++++--------
 src/components/Playlist.vue   |  1 -
 src/components/VideoItem.vue  |  2 +-
 src/components/WatchVideo.vue |  4 ++--
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6d65a2e5..b0794622 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -127,7 +127,11 @@ b {
 .dark .input,
 .dark .select,
 .dark .btn {
-    @apply text-gray-400 bg-dark-400 w-auto;
+    @apply text-gray-400 bg-dark-400 w-auto h-full;
+}
+
+.input {
+    @apply pl-2.5;
 }
 
 .dark hr {
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 7d6191b9..479bcef1 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,8 +1,8 @@
 <template>
-    <nav class="uk-navbar w-full relative">
-        <div class="uk-navbar-left">
+    <nav class="grid grid-cols-3 px-2 sm:px-4 py-2.5 w-full relative">
+        <div>
             <router-link
-                class="uk-navbar-item uk-logo font-bold font-2xl font-sans font-bold"
+                class="flex font-bold text-3xl items-center font-sans font-bold"
                 :style="[{ colour: foregroundColor }]"
                 to="/"
                 ><img
@@ -10,14 +10,14 @@
                     src="/img/icons/logo.svg"
                     height="32"
                     width="32"
-                    style="margin-bottom: 6px; margin-right: -13px"
+                    class="w-10 mr-[-0.6rem]"
                 />iped</router-link
             >
         </div>
-        <div class="uk-navbar-center uk-flex <md:hidden">
+        <div class="flex justify-center items-center <md:hidden">
             <input
                 v-model="searchText"
-                class="input uk-width-medium"
+                class="input !w-72 h-10"
                 type="text"
                 role="search"
                 :title="$t('actions.search')"
@@ -28,8 +28,8 @@
                 @blur="onInputBlur"
             />
         </div>
-        <div class="uk-navbar-right">
-            <ul class="uk-navbar-nav">
+        <div>
+            <ul class="flex float-right text-1xl children:pl-3">
                 <li>
                     <router-link v-t="'titles.preferences'" to="/preferences" />
                 </li>
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index a41e6ac6..f60a13db 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -3,7 +3,6 @@
 
     <div v-if="playlist" v-show="!playlist.error">
         <h1 class="text-center">
-            <img :src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
             {{ playlist.name }}
         </h1>
 
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index f719a1d3..d3f73a0c 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -2,7 +2,7 @@
     <div class="uk-text-secondary">
         <router-link class="uk-text-emphasis" :to="video.url">
             <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
-            <div class="relative">
+            <div class="relative text-sm">
                 <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
                     timeFormat(video.duration)
                 }}</span>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index cd69d6dc..e3799039 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -33,11 +33,11 @@
                     <template v-if="video.likes >= 0">
                         <div>
                             <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-                            <b>{{ addCommas(video.likes) }}</b>
+                            <b class="ml-2">{{ addCommas(video.likes) }}</b>
                         </div>
                         <div>
                             <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-                            <b>{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</b>
+                            <b class="ml-2">{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</b>
                         </div>
                     </template>
                     <template v-if="video.likes < 0">