Move date into info and adjust subscribe button

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 {

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"

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: {

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
+    margin-top: 8px
-    font-size: 14px
+    margin-left: 6px
+    padding: 6px
+    font-size: 16px
 
-.datePublished
+.viewCount, .datePublished
-  margin-bottom: 24px
+  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

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"