From 1fa601035502bccf47dd8c18a2fdfe4591d55a6b Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 2 Mar 2020 16:40:41 +0200
Subject: [PATCH] MetaItem styles updated

---
 src/common/MetaItem/MetaItem.js | 10 ++---
 src/common/MetaItem/styles.less | 71 +++++++++------------------------
 2 files changed, 23 insertions(+), 58 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index ffd75a754..84934ab7a 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -82,12 +82,9 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
             {
                 (typeof name === 'string' && name.length > 0) || (Array.isArray(options) && options.length > 0) ?
                     <div className={styles['title-bar-container']}>
-                        {
-                            typeof name === 'string' && name.length > 0 ?
-                                <div className={styles['title-label']}>{name}</div>
-                                :
-                                null
-                        }
+                        <div className={styles['title-label']}>
+                            {typeof name === 'string' && name.length > 0 ? name : ''}
+                        </div>
                         {
                             Array.isArray(options) && options.length > 0 ?
                                 <Multiselect
@@ -97,6 +94,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
                                     onOpen={onMenuOpen}
                                     onClose={onMenuClose}
                                     onSelect={menuOnSelect}
+                                    tabIndex={-1}
                                     onClick={menuOnClick}
                                 />
                                 :
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 94808a035..622202ae1 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
@@ -14,39 +16,12 @@
 }
 
 .meta-item-container {
-    position: relative;
+    padding: 0.8rem;
     overflow: visible;
 
     &:hover, &:focus, &:global(.active), &:global(.selected) {
         outline-style: none;
-
-        &::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            outline-style: solid;
-            outline-width: var(--focus-outline-size);
-            outline-color: var(--color-surfacelighter);
-            outline-offset: calc(-1 * var(--focus-outline-size));
-            pointer-events: none;
-            content: "";
-        }
-
-        .title-bar-container {
-            background-color: var(--color-surfacelight);
-
-            .title-label {
-                color: var(--color-backgrounddarker);
-            }
-
-            .menu-label-container {
-                .icon {
-                    fill: var(--color-backgrounddarker);
-                }
-            }
-        }
+        background-color: @color-background-light3;
     }
 
     &.poster-shape-poster {
@@ -70,7 +45,7 @@
     .poster-container {
         position: relative;
         z-index: 0;
-        background-color: var(--color-backgroundlight);
+        background-color: @color-background;
 
         .poster-image-layer {
             position: absolute;
@@ -96,7 +71,7 @@
                 flex: none;
                 width: 80%;
                 height: 50%;
-                fill: var(--color-surfacelight20);
+                fill: @color-background-light3;
             }
         }
 
@@ -113,14 +88,14 @@
                 display: block;
                 width: 100%;
                 height: 100%;
-                filter: drop-shadow(0 0 0.5rem var(--color-backgroundlight));
+                filter: drop-shadow(0 0 0.5rem @color-background);
 
                 .play-icon-circle-centered-background {
-                    fill: var(--color-surfacelighter);
+                    fill: @color-accent4;
                 }
 
                 .play-icon-circle-centered-icon {
-                    fill: var(--color-primary);
+                    fill: @color-surface-light5;
                 }
             }
         }
@@ -131,11 +106,11 @@
             bottom: 0;
             left: 0;
             z-index: -1;
-            background-color: var(--color-backgroundlighter);
+            background-color: @color-background-light2;
 
             .progress-bar {
-                height: 0.5rem;
-                background-color: var(--color-primary);
+                height: 0.4rem;
+                background-color: @color-primaryvariant1;
             }
         }
     }
@@ -144,39 +119,31 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: flex-end;
         height: 2.8rem;
-        background-color: var(--color-backgroundlight);
         overflow: visible;
 
         .title-label {
             flex: 1;
             max-height: 2.4em;
             padding-left: 0.5rem;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5-90;
 
             &:only-child {
                 padding-right: 0.5rem;
             }
         }
 
-
         .menu-label-container {
             flex: none;
-            width: 2.8rem;
+            width: 1.5rem;
             height: 2.8rem;
-            padding: 0.75rem;
-            background-color: transparent;
-
-            &:hover, &:global(.active) {
-                background-color: var(--color-surface80);
-            }
+            padding: 1rem 0;
 
             .icon {
                 display: block;
                 width: 100%;
                 height: 100%;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light1;
             }
 
             .popup-menu-container {
@@ -188,15 +155,15 @@
 
                     .multiselect-option-container {
                         padding: 0.5rem;
-                        background-color: var(--color-surfacelighter);
+                        background-color: @color-surface-light5;
 
                         &:hover, &:focus {
                             outline: none;
-                            background-color: var(--color-surfacelight);
+                            background-color: @color-surface;
                         }
 
                         .multiselect-option-label {
-                            color: var(--color-backgrounddarker);
+                            color: @color-background-dark5;
                         }
                     }
                 }