From 93eefd877538c6325eff16ccf67f2729e22b32fb Mon Sep 17 00:00:00 2001
From: Ara <oladipoeyiara@gmail.com>
Date: Tue, 10 May 2022 12:23:21 -0400
Subject: [PATCH] UI changes, resized and moved the trending icon, and
 separated the video items

---
 src/App.vue                     |  2 ++
 src/components/NavBar.vue       |  5 ++++-
 src/components/TrendingPage.vue |  4 +---
 src/components/VideoItem.vue    | 28 +++++++++++++++++++---------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a19259d7..8d4a44f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -102,6 +102,8 @@ 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 <md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
+    grid-gap: 45px 45px !important;
+    margin: 20px 2% 5% 2% !important;
 }
 
 .btn {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0c90e9d1..947bd7a8 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,8 @@
 <template>
-    <nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
+    <nav
+        class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative"
+        style="padding-top: 1.625rem; padding-bottom: 1.625rem"
+    >
         <div class="flex-1 flex justify-start">
             <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
                 ><img
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 62283481..12a2be4d 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,8 +1,6 @@
 <template>
-    <h1 v-t="'titles.trending'" class="font-bold text-center" />
-
     <hr />
-
+    <h2 v-t="'titles.trending'" class="font-bold text-center" style="font-size: 1.5rem !important" />
     <div class="video-grid">
         <VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
     </div>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 56e8b499..e9b70891 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -63,14 +63,14 @@
             <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
         </div>
 
-        <div class="flex">
+        <div class="flex" style="column-gap: 8px">
             <router-link :to="video.uploaderUrl">
                 <img
                     v-if="video.uploaderAvatar"
                     :src="video.uploaderAvatar"
                     loading="lazy"
                     :alt="video.uploaderName"
-                    class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
+                    class="rounded-full mr-0.5 mt-0.5 w-40px h-40px"
                     width="68"
                     height="68"
                 />
@@ -83,18 +83,28 @@
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                 >
-                    <span v-text="video.uploaderName" />
+                    <strong v-text="video.uploaderName" style="font-size: 14px" />
                     <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
                 </router-link>
 
-                <strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
+                <span v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
                     <span v-if="video.views >= 0">
-                        <font-awesome-icon icon="eye" />
-                        <span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" />
+                        <font-awesome-icon icon="eye" style="font-size: 13.5px" />
+                        <span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" style="font-size: 13.5px" />
                     </span>
-                    <span v-if="video.uploaded > 0" class="pl-0.5" v-text="timeAgo(video.uploaded)" />
-                    <span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
-                </strong>
+                    <span
+                        v-if="video.uploaded > 0"
+                        class="pl-0.5"
+                        v-text="timeAgo(video.uploaded)"
+                        style="font-size: 13.5px"
+                    />
+                    <span
+                        v-else-if="video.uploadedDate"
+                        class="pl-0.5"
+                        v-text="video.uploadedDate"
+                        style="font-size: 13.5px"
+                    />
+                </span>
             </div>
         </div>
     </div>