From 498ae77ade46f70a2fd6cdda7455f591310218b8 Mon Sep 17 00:00:00 2001
From: Aiz <66974576+Aiz0@users.noreply.github.com>
Date: Mon, 26 Sep 2022 23:19:35 +0000
Subject: [PATCH] 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 | 23 ++++++++++++++---------
 src/renderer/views/Watch/Watch.vue  | 12 ++++++++++--
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index 2f3a6205..70915cd5 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/src/renderer/views/Watch/Watch.sass
@@ -48,23 +48,28 @@
 
       .premiereDate
         color: #FFFFFF
-        background-color: rgba(0, 0, 0, 0.7)
-        width: 400px
+        background-color: rgba(0, 0, 0, 0.8)
         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-left: 8px
-          padding: 5px
+          margin: 0 12px
 
         .premiereText
-          margin-left: 50px
-          margin-top: 10px
+          min-width: 200px
+          margin: 0 12px
+
+          .premiereTextTimestamp
+              font-size: 0.85em
+              font-weight: bold
 
   .watchVideo
     margin: 0 0 16px
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 7a0e1ee0..0298cab9 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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