Improve styling of premiere date box (#2611)

* use 5px border radius instead of 5%

a 5% border radius will create an oval shape when height and width differ.
this doesn't look good.
5px radius looks better and is used in other places

* offset premiereDate by 12px from bottom left

Increases the offset a tiny amount and adds a left offset aswell.
This looks better than when it was previously only offset from the bottom.
I used 12px because it's what youtube uses.

* use flexbox to align items additional positioning with margins

vertically centes premiere icon and text with by making their parent a flexbox

sets a min width for the text instead of using a set width for the premiereDate

* change font size and weight of timestamp text

* remove uneeded line height styling

line height 1.2 did not affect anything

* fix indentation

* Update src/renderer/views/Watch/Watch.sass

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

src/renderer/views/Watch/Watch.sass

@@ -48,23 +48,28 @@
 
       .premiereDate
         color: #FFFFFF
-        background-color: rgba(0, 0, 0, 0.7)
+        background-color: rgba(0, 0, 0, 0.8)
-        width: 400px
         height: 60px
-        border-radius: 5%
+        border-radius: 5px
         position: absolute
-        bottom: 5px
+        bottom: 12px
+        left: 12px
+        display: flex
+        align-items: center
+        padding: 0 12px
 
         .premiereIcon
           float: left
           font-size: 25px
-          margin-top: 12px
+          margin: 0 12px
-          margin-left: 8px
-          padding: 5px
 
         .premiereText
-          margin-left: 50px
+          min-width: 200px
-          margin-top: 10px
+          margin: 0 12px
+
+          .premiereTextTimestamp
+              font-size: 0.85em
+              font-weight: bold
 
   .watchVideo
     margin: 0 0 16px

src/renderer/views/Watch/Watch.vue

@@ -54,9 +54,17 @@
               v-if="upcomingTimestamp !== null"
               class="premiereText"
             >
-              {{ $t("Video.Premieres") }} {{ upcomingTimeLeft }}
+              <span
+                class="premiereTextTimeLeft"
+              >
+                {{ $t("Video.Premieres") }} {{ upcomingTimeLeft }}
+              </span>
               <br>
-              {{ upcomingTimestamp }}
+              <span
+                class="premiereTextTimestamp"
+              >
+                {{ upcomingTimestamp }}
+              </span>
             </p>
             <p
               v-else