From f7313369b5cd967cc21342f0c30162f1f15b1776 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 8 Oct 2023 06:11:44 +0300
Subject: [PATCH] Fixed: Show year in collection movies as labels

---
 frontend/src/Collection/Overview/CollectionMovie.js       | 2 +-
 frontend/src/Collection/Overview/CollectionMovieLabel.css | 4 ++--
 frontend/src/Collection/Overview/CollectionMovieLabel.js  | 6 +++---
 frontend/src/Collection/Overview/CollectionOverviews.js   | 5 ++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Collection/Overview/CollectionMovie.js b/frontend/src/Collection/Overview/CollectionMovie.js
index f6f754e14..1c7313a95 100644
--- a/frontend/src/Collection/Overview/CollectionMovie.js
+++ b/frontend/src/Collection/Overview/CollectionMovie.js
@@ -124,7 +124,7 @@ class CollectionMovie extends Component {
 
             <div className={styles.overlay}>
               <div className={styles.overlayTitle}>
-                {title} { year > 0 ? `(${year})` : ''}
+                {title} {year > 0 ? `(${year})` : ''}
               </div>
 
               {
diff --git a/frontend/src/Collection/Overview/CollectionMovieLabel.css b/frontend/src/Collection/Overview/CollectionMovieLabel.css
index dd409b2eb..a838c131c 100644
--- a/frontend/src/Collection/Overview/CollectionMovieLabel.css
+++ b/frontend/src/Collection/Overview/CollectionMovieLabel.css
@@ -5,7 +5,7 @@
   margin: 2px 4px;
   border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: #eee;
+  background-color: var(--inputBackgroundColor);
   cursor: default;
 }
 
@@ -17,7 +17,7 @@
   padding: 0 4px;
   border-left: 4px;
   border-left-style: solid;
-  background-color: var(--white);
+  background-color: var(--themeLightColor);
   color: var(--defaultColor);
 }
 
diff --git a/frontend/src/Collection/Overview/CollectionMovieLabel.js b/frontend/src/Collection/Overview/CollectionMovieLabel.js
index f528b7860..14f698512 100644
--- a/frontend/src/Collection/Overview/CollectionMovieLabel.js
+++ b/frontend/src/Collection/Overview/CollectionMovieLabel.js
@@ -14,6 +14,7 @@ class CollectionMovieLabel extends Component {
     const {
       id,
       title,
+      year,
       status,
       monitored,
       isAvailable,
@@ -35,9 +36,7 @@ class CollectionMovieLabel extends Component {
           }
 
           <span>
-            {
-              title
-            }
+            {title} {year > 0 ? `(${year})` : ''}
           </span>
         </div>
 
@@ -62,6 +61,7 @@ class CollectionMovieLabel extends Component {
 CollectionMovieLabel.propTypes = {
   id: PropTypes.number,
   title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
   status: PropTypes.string,
   isAvailable: PropTypes.bool,
   monitored: PropTypes.bool,
diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js
index 9f33f4956..c2faffb18 100644
--- a/frontend/src/Collection/Overview/CollectionOverviews.js
+++ b/frontend/src/Collection/Overview/CollectionOverviews.js
@@ -28,7 +28,6 @@ function calculatePosterWidth(posterSize, isSmallScreen) {
 }
 
 function calculateRowHeight(posterHeight, sortKey, isSmallScreen, overviewOptions) {
-
   const heights = [
     overviewOptions.showPosters ? posterHeight : 75,
     isSmallScreen ? columnPaddingSmallScreen : columnPadding
@@ -122,8 +121,8 @@ class CollectionOverviews extends Component {
       overviewOptions
     } = this.props;
 
-    const posterWidth = calculatePosterWidth(overviewOptions.size, isSmallScreen);
-    const posterHeight = calculatePosterHeight(posterWidth);
+    const posterWidth = overviewOptions.showPosters ? calculatePosterWidth(overviewOptions.size, isSmallScreen) : 0;
+    const posterHeight = overviewOptions.showPosters ? calculatePosterHeight(posterWidth) : 0;
     const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, overviewOptions);
 
     this.setState({