From 322fdc2af8a78ff48c4cfcbdbba9f4d179006d45 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 4 Jul 2023 17:55:16 +0200
Subject: [PATCH] refactor: style MetaDetails

---
 src/App/styles.less                           |  2 +
 .../Stream/StreamPlaceholder/styles.less      |  2 +
 .../StreamsList/Stream/styles.less            | 49 ++++++-----
 .../MetaDetails/StreamsList/styles.less       | 17 ++--
 .../SeasonsBarPlaceholder/styles.less         |  2 +-
 .../VideosList/SeasonsBar/styles.less         | 20 ++---
 .../MetaDetails/VideosList/Video/Video.js     |  1 +
 .../Video/VideoPlaceholder/styles.less        |  2 +
 .../MetaDetails/VideosList/Video/styles.less  | 84 +++++++++++--------
 src/routes/MetaDetails/VideosList/styles.less |  3 +-
 src/routes/MetaDetails/styles.less            | 14 ++--
 11 files changed, 112 insertions(+), 84 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index b40d9204a..503208046 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -30,9 +30,11 @@
     --secondary-background-color: rgba(26, 23, 62, 1);
     --tertiary-background-color: rgba(15, 13, 32, 1);
     --primary-foreground-color: rgba(255, 255, 255, 1);
+    --secondary-foreground-color: rgb(12, 11, 17, 1);
     --primary-overlay-color: rgba(255, 255, 255, 0.1);
     --primary-accent-color: rgb(123, 91, 245);
     --secondary-accent-color: rgba(34, 179, 101, 1);
+    --tertiary-accent-color: rgba(246, 199, 0, 1);
     --border-radius: 0.75rem;
 }
 
diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less b/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
index 264f676cc..ac3a46192 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
@@ -17,6 +17,7 @@
         .addon-name {
             width: 5rem;
             height: 2rem;
+            border-radius: var(--border-radius);
             background-color: var(--color-placeholder-background);
         }
     }
@@ -27,6 +28,7 @@
 
         .description-container {
             height: 1.2rem;
+            border-radius: var(--border-radius);
             background-color: var(--color-placeholder-background);
 
             &:nth-child(1) {
diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index e7c0b0dc6..feec5af81 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -11,22 +11,26 @@
 .stream-container {
     display: flex;
     flex-direction: row;
-    align-items: center;
     flex-wrap: wrap;
-    padding: 0.5rem 1rem;
+    align-items: center;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--border-radius);
 
     &:hover, &:focus {
-        background-color: @color-background;
+        background-color: var(--primary-overlay-color);
     }
 
     &:hover, &:focus, &:global(.selected) {
         .play-icon {
+            opacity: 1;
+
             .play-icon-circle-centered-background {
-                fill: @color-accent4-90;
+                fill: var(--secondary-accent-color);
             }
 
             .play-icon-circle-centered-icon {
-                fill: @color-surface-light5-90;
+                fill: var(--primary-foreground-color);
             }
         }
     }
@@ -36,19 +40,21 @@
 
         .thumbnail {
             display: block;
-            width: 5rem;
             height: 5rem;
-            object-fit: contain;
+            width: 8rem;
+            object-fit: cover;
             object-position: center;
             opacity: 0.9;
         }
 
         .placeholder-icon {
             display: block;
-            width: 5rem;
             height: 5rem;
-            padding: 0.5rem;
-            color: @color-secondaryvariant1-light3-90;
+            width: 8rem;
+            padding: 1rem;
+            color: var(--primary-foreground-color);
+            background-color: var(--primary-overlay-color);
+            opacity: 0.25;
         }
 
         .addon-name {
@@ -56,49 +62,48 @@
             max-height: 3.6em;
             font-size: 1.1rem;
             text-align: center;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
     }
 
     .info-container {
         flex: 1;
         max-height: 3.6em;
-        margin: 0.5rem 1rem;
-        white-space: pre;
-        color: @color-surface-light5-90;
+        padding: 0 0.5rem 0 1.5rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        color: var(--primary-foreground-color);
     }
 
     .play-icon {
         flex: none;
         width: 3.5rem;
         height: 5rem;
+        opacity: 0;
 
         .play-icon-circle-centered-background {
             fill: none;
         }
 
         .play-icon-circle-centered-icon {
-            fill: @color-surface-dark5-90;
+            fill: var(--primary-foreground-color);
         }
     }
 
     .progress-bar-container {
         flex: 0 0 100%;
-        background-color: @color-background-light2;
+        background-color: var(--primary-accent-color);
 
         .progress-bar {
             height: 0.5rem;
-            background-color: @color-primaryvariant1;
+            background-color: var(--primary-foreground-color);
         }
     }
 }
 
 @media only screen and (max-width: @minimum) {
     .stream-container {
-        &:hover, &focus {
-            background-color: @color-surface-light5-20;
-        }
-
         .thumbnail-container, .addon-name-container {
             .addon-name {
                 font-weight: 500;
@@ -107,7 +112,7 @@
 
         .play-icon {
             .play-icon-circle-centered-icon {
-                fill: @color-surface-light5-90;
+                fill: var(--primary-foreground-color);
             }
         }
     }
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index afdbcd96d..3980de463 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -37,7 +37,7 @@
             flex: none;
             font-size: 1.4rem;
             text-align: center;
-            color: @color-secondaryvariant2-light1-90;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -68,6 +68,7 @@
         flex: 0 1 auto;
         align-self: stretch;
         margin-top: 1rem;
+        padding: 0 1rem;
         overflow-y: auto;
     }
 
@@ -80,10 +81,12 @@
         justify-content: center;
         margin: 1rem;
         padding: 1.5rem 1rem;
-        background-color: @color-accent3;
+        border-radius: var(--border-radius);
+        background-color: var(--secondary-accent-color);
 
-        &:hover, &:focus {
-            background-color: @color-accent3-light1;
+        &:hover {
+            box-shadow: 0 0 0 0.15rem var(--secondary-accent-color) inset;
+            background-color: transparent;
         }
 
         .icon {
@@ -91,16 +94,16 @@
             width: 2rem;
             height: 2rem;
             margin-right: 1rem;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         .label {
             flex: 0 1 auto;
             font-size: 1.5rem;
-            font-weight: 500;
+            font-weight: 700;
             max-height: 3.6em;
             text-align: center;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
     }
 }
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
index 047966047..342178cee 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
@@ -12,7 +12,7 @@
         flex-direction: row;
         align-items: center;
         width: 6.5rem;
-        height: 3.5rem;
+        height: 3rem;
         padding: 0.5rem;
 
         &>:first-child {
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index 56113fde7..7146e3eef 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     padding: 1rem;
     overflow: visible;
 
@@ -22,21 +23,16 @@
         flex-direction: row;
         align-items: center;
         width: 6.5rem;
-        height: 3.5rem;
+        height: 3rem;
+        border-radius: 3rem;
         padding: 0.5rem;
 
         &:hover, &:focus {
-            .label {
-                color: @color-surface-light2-90;
-            }
-
-            .icon {
-                color: @color-surface-light2-90;
-            }
+            background-color: var(--primary-overlay-color);
         }
 
         &:focus {
-            background-color: @color-surface-light5-10;
+            background-color: var(--primary-foreground-color);
         }
 
         &>:first-child {
@@ -48,14 +44,14 @@
             max-height: 1.2em;
             font-weight: 500;
             text-align: center;
-            color: @color-surface-90;
+            color: var(--primary-foreground-color);
         }
 
         .icon {
             flex: none;
             width: 1.5rem;
             height: 1.5rem;
-            color: @color-surface-90;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -84,7 +80,7 @@
 
 @media only screen and (max-width: @minimum) {
     .seasons-bar-container {
-        padding-top: 0;
+        height: 6rem;
 
         .seasons-popup-label-container {
             .multiselect-menu-container {
diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
index bc0d9a627..bf0ee96ce 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -110,6 +110,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                             {
                                 watched ?
                                     <div className={styles['watched-container']}>
+                                        <Icon className={styles['flag-icon']} name={'eye'} />
                                         <div className={styles['flag-label']}>Watched</div>
                                     </div>
                                     :
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
index abca6c669..13b0f7f64 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
@@ -17,11 +17,13 @@
         .name-container {
             width: 80%;
             height: 1.2rem;
+            border-radius: var(--border-radius);
             background: var(--color-placeholder-background);
         }
 
         .released-container {
             height: 1rem;
+            border-radius: var(--border-radius);
             background: var(--color-placeholder-background);
         }
     }
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 9554f0dc7..3a6ae2673 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -15,33 +15,39 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    padding: 0.5rem 1rem;
+    align-items: center;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--border-radius);
 
     &:hover,
     &:focus,
     &:global(.active) {
-        background-color: @color-background;
+        background-color: var(--primary-overlay-color);
     }
 
     .thumbnail-container {
         flex: none;
+        position: relative;
+        border-radius: var(--border-radius);
+        overflow: hidden;
 
         .thumbnail {
             display: block;
-            width: 7.5rem;
             height: 5rem;
-            object-fit: contain;
+            width: 8rem;
+            object-fit: cover;
             object-position: center;
             opacity: 0.9;
         }
 
         .placeholder-icon {
             display: block;
-            width: 7.5rem;
             height: 5rem;
+            width: 8rem;
             padding: 1rem;
-            color: @color-surface-light5;
-            background-color: @color-surface-light5-40;
+            color: var(--primary-foreground-color);
+            background-color: var(--primary-overlay-color);
             opacity: 0.25;
         }
     }
@@ -51,20 +57,19 @@
         align-self: stretch;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        margin: 0.5rem 1rem;
+        justify-content: center;
+        padding: 0 0.5rem 0 1.5rem;
 
         &:first-child {
             height: 3rem;
-
-            .title-container {
-                max-height: 1.2em;
-            }
         }
 
         .title-container {
-            max-height: 2.4em;
-            color: @color-surface-light5-90;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            margin-bottom: 1rem;
+            color: var(--primary-foreground-color);
         }
 
         .flex-row-container {
@@ -82,13 +87,16 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 text-transform: uppercase;
-                color: @color-surface-dark5-90;
+                color: var(--primary-foreground-color);
             }
 
             .upcoming-watched-container {
                 flex: 0 1 auto;
                 display: flex;
                 flex-direction: row;
+                align-items: center;
+                height: 1.6rem;
+                border-radius: 0.3rem;
 
                 &>:nth-child(2) {
                     margin-left: 0.5rem;
@@ -97,29 +105,39 @@
                 .upcoming-container,
                 .watched-container {
                     flex: none;
-                    padding: 0.2rem 0.4rem;
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    padding: 0 0.5rem;
                     max-width: 10rem;
 
                     &:not(:only-child) {
                         max-width: 5rem;
                     }
 
+                    .flag-icon {
+                        height: 1.15rem;
+                        width: 1.15rem;
+                        margin-right: 0.25rem;
+                        color: var(--secondary-foreground-color);
+                    }
+
                     .flag-label {
                         font-size: 0.8rem;
-                        font-weight: 500;
+                        font-weight: 800;
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         text-transform: uppercase;
-                        color: @color-background-90;
+                        color: var(--secondary-foreground-color);
                     }
                 }
 
                 .upcoming-container {
-                    background-color: @color-accent4;
+                    background-color: var(--secondary-accent-color);
                 }
 
                 .watched-container {
-                    background-color: @color-accent5;
+                    background-color: var(--tertiary-accent-color);
                 }
             }
         }
@@ -127,36 +145,38 @@
 
     .progress-bar-container {
         flex: 0 0 100%;
-        background-color: @color-background-light2;
+        background-color: var(--primary-accent-color);
 
         .progress-bar {
             height: 0.5rem;
-            background-color: @color-primaryvariant1;
+            background-color: var(--primary-foreground-color);
         }
     }
 
     .context-menu-container {
         max-width: calc(90% - 1.5rem);
+        border-radius: var(--border-radius);
+        overflow: hidden;
 
         .context-menu-content {
             --spatial-navigation-contain: contain;
-            background-color: @color-background-dark1;
+            background-color: var(--tertiary-background-color);
 
             .context-menu-option-container {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding: 0.5rem 1rem;
+                padding: 1rem 1.5rem;
 
                 &:hover,
                 &:focus {
-                    background-color: @color-background;
+                    background-color: var(--primary-overlay-color);
                 }
 
                 .context-menu-option-label {
                     font-size: 1rem;
-                    max-height: 2.4em;
-                    color: @color-surface-light5-90;
+                    font-weight: 500;
+                    color:var(--primary-foreground-color);
                 }
             }
         }
@@ -165,15 +185,7 @@
 
 @media only screen and (max-width: @minimum) {
     .video-container {
-
-        &:hover,
-        &:focus,
-        &:global(.active) {
-            background-color: @color-surface-light5-20;
-        }
-
         .context-menu-container {
-
             &.menu-direction-top-left,
             &.menu-direction-bottom-left {
                 right: 1.5rem;
diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index d86b847d1..723a7a59e 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -31,7 +31,7 @@
             flex: none;
             font-size: 1.4rem;
             text-align: center;
-            color: @color-secondaryvariant2-light1-90;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -53,6 +53,7 @@
     .videos-container {
         flex: 1;
         align-self: stretch;
+        padding: 0 1rem;
         overflow-y: auto;
     }
 }
diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index 49b101262..d4ffb87a1 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -20,6 +20,7 @@
     background-color: transparent;
 
     .nav-bar {
+        z-index: 1;
         flex: none;
         align-self: stretch;
     }
@@ -38,7 +39,7 @@
         }
 
         .background-image-layer {
-            position: absolute;
+            position: fixed;
             top: 0;
             right: 0;
             bottom: 0;
@@ -52,7 +53,8 @@
                 bottom: 0;
                 left: 0;
                 z-index: 1;
-                background: @color-background-dark2-70;
+                background: var(--tertiary-background-color);
+                opacity: 0.7;
                 content: "";
             }
 
@@ -90,7 +92,7 @@
                 align-self: stretch;
                 font-size: 2rem;
                 text-align: center;
-                color: @color-secondaryvariant2-light1-90;
+                color: var(--primary-foreground-color);
             }
         }
 
@@ -104,9 +106,11 @@
         }
 
         .videos-list, .streams-list {
-            flex: 0 0 26.5rem;
+            flex: 0 0 28rem;
             align-self: stretch;
-            background-color: @color-background-dark5-70;
+            border-radius: var(--border-radius) 0 0 var(--border-radius);
+            background-color: rgba(0, 0, 0, 0.4);
+            backdrop-filter: blur(15px);
         }
     }
 }