From 23c5b8ade8dde3d1d7101e4ddd44c64a7daadb6b Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 6 Aug 2019 17:19:19 +0300
Subject: [PATCH] MetaItem styles adapted to the newest conventions

---
 src/common/MetaItem/MetaItem.js |  8 +++++---
 src/common/MetaItem/styles.less | 35 +++++++++++++++++++--------------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 8d8c9b20a..13e090e8a 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -23,12 +23,14 @@ const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterS
             menuOpen ? menuRef.current.close() : menuRef.current.open();
         }
     }, [menuOpen]);
-    const placeholderIcon = ICON_FOR_TYPE[type] || 'ic_movies';
     return (
-        <Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={onClick} onContextMenu={onContextMenu}>
+        <Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onContextMenu={onContextMenu} onClick={onClick}>
             <div className={styles['poster-image-container']}>
                 <div className={styles['placeholder-image-layer']}>
-                    <Icon className={styles['placeholder-image']} icon={placeholderIcon} />
+                    <Icon
+                        className={styles['placeholder-image']}
+                        icon={ICON_FOR_TYPE[type] || 'ic_movies'}
+                    />
                 </div>
                 {
                     typeof poster === 'string' && poster.length > 0 ?
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index e76a30062..9241a8596 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -1,13 +1,12 @@
 .meta-item-container {
     background-color: var(--color-backgroundlight);
-    cursor: pointer;
 
     &:hover, &:focus, &:global(.active) {
-        outline: var(--focusable-border-size) solid var(--color-surfacelighter);
+        outline-offset: initial;
+        outline: 0.2rem solid var(--color-surfacelighter);
+        background-color: var(--color-surfacelight);
 
         .title-bar-container {
-            background-color: var(--color-surfacelight);
-
             .title {
                 color: var(--color-backgrounddarker);
             }
@@ -37,9 +36,9 @@
     }
 
     .poster-image-container {
-        width: 100%;
         position: relative;
         z-index: 0;
+        background-color: var(--color-backgroundlight);
 
         .placeholder-image-layer {
             position: absolute;
@@ -50,6 +49,7 @@
             z-index: 0;
 
             .placeholder-image {
+                display: block;
                 width: 100%;
                 height: 100%;
                 fill: var(--color-surfacelight20);
@@ -84,10 +84,11 @@
             overflow: visible;
 
             .play-icon-container {
+                display: block;
                 width: 100%;
                 height: 100%;
                 overflow: visible;
-                filter: drop-shadow(0 0 0.5em var(--color-backgroundlight));
+                filter: drop-shadow(0 0 0.5rem var(--color-backgroundlight));
 
                 .play-icon-background {
                     fill: var(--color-surfacelighter);
@@ -105,7 +106,7 @@
             bottom: 0;
             left: 0;
             z-index: 3;
-            height: 0.5em;
+            height: 0.5rem;
             background-color: var(--color-backgroundlighter);
 
             .progress {
@@ -116,27 +117,31 @@
     }
 
     .title-bar-container {
-        width: 100%;
-        height: 2.5em;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: flex-end;
+        height: 2.5rem;
 
         .title {
-            flex-grow: 1;
-            padding: 0 0.5em;
-            line-height: 2.5em;
+            flex: 1;
+            padding-left: 0.5rem;
+            line-height: 2.4em;
             color: var(--color-surfacelighter);
             white-space: nowrap;
             text-overflow: ellipsis;
+
+            &:only-child {
+                padding-right: 0.5rem;
+            }
         }
 
         .menu-icon {
             flex: none;
-            width: 2.5em;
-            height: 2.5em;
-            padding: 0.6em 0;
+            display: block;
+            width: 2.5rem;
+            height: 2.5rem;
+            padding: 0.6rem;
             fill: var(--color-surfacelighter);
 
             &:hover, &:global(.active) {