From cc88679d9eeca05b8095983a421acdf521a8adef Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 01:43:08 +1200
Subject: [PATCH] Move date into info and adjust subscribe button

---
 .../watch-video-description.js                |  5 ----
 .../watch-video-description.vue               |  1 -
 .../watch-video-info/watch-video-info.js      |  6 +++++
 .../watch-video-info/watch-video-info.sass    | 25 ++++++++++++++-----
 .../watch-video-info/watch-video-info.vue     |  7 ++++--
 5 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/watch-video-description/watch-video-description.js b/src/renderer/components/watch-video-description/watch-video-description.js
index c5a45e8b..095dc038 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.js
+++ b/src/renderer/components/watch-video-description/watch-video-description.js
@@ -23,15 +23,10 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      dateString: '',
       shownDescription: ''
     }
   },
   mounted: function () {
-    const date = new Date(this.published)
-    const dateSplit = date.toDateString().split(' ')
-    this.dateString = `${dateSplit[0]} ${dateSplit[1]} ${dateSplit[2]}, ${dateSplit[3]}`
-
     if (this.descriptionHtml !== '') {
       this.shownDescription = this.parseDescriptionHtml(this.descriptionHtml)
     } else {
diff --git a/src/renderer/components/watch-video-description/watch-video-description.vue b/src/renderer/components/watch-video-description/watch-video-description.vue
index ee3e4132..8ed65de6 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.vue
+++ b/src/renderer/components/watch-video-description/watch-video-description.vue
@@ -1,6 +1,5 @@
 <template>
   <ft-card class="videoDescription">
-    <h4>Published on {{ dateString }}</h4>
     <p
       class="description"
       v-html="shownDescription"
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 8ca4b80a..9100cf34 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -97,6 +97,12 @@ export default Vue.extend({
 
     subscribedText: function () {
       return `SUBSCRIBE ${this.subscriptionCountText}`
+    },
+
+    dateString() {
+      const date = new Date(this.published)
+      const dateSplit = date.toDateString().split(' ')
+      return `${dateSplit[1]} ${dateSplit[2]} ${dateSplit[3]}`
     }
   },
   methods: {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 32ce84c6..9c7d8780 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -13,30 +13,42 @@
 .channelInformation
   .profileRow
     display: flex
+    align-items: center
 
   .channelThumbnail
     border-radius: 50%
     margin-right: 8px
+    position: relative
+    top: -4px
     cursor: pointer
 
   .channelName
     margin-left: 6px
+    font-size: 18px
     cursor: pointer
 
   .subscribeButton
-    padding: 5px
-    font-size: 14px
+    margin-top: 8px
+    margin-left: 6px
+    padding: 6px
+    font-size: 16px
 
-.datePublished
-  margin-bottom: 24px
+.viewCount, .datePublished
+  color: var(--secondary-text-color)
+  text-align: right
+  font-size: 15px
+
+  @media screen and (max-width: 680px)
+    text-align: left
 
 .viewCount
+  margin: 6px 0px 0px
+
+.datePublished
   margin: 4px 0px 0px
-  text-align: right
 
   @media screen and (max-width: 680px)
     margin-top: 16px
-    text-align: left
 
 .likeSection
   margin-top: 16px
@@ -50,6 +62,7 @@
 
   @media screen and (max-width: 680px)
     margin-left: 0
+    text-align: left
 
   .likeBar
     height: 8px
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index de9284f0..696cda6d 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -37,9 +37,12 @@
       </div>
     </div>
     <div>
-      <p class="viewCount">
+      <div class="datePublished">
+        Published {{ dateString }}
+      </div>
+      <div class="viewCount">
         {{ parsedViewCount }}
-      </p>
+      </div>
       <div class="likeBarContainer">
         <div
           class="likeSection"