From 293bd7dce5146a0827f25e5ce5a716c023e04bd9 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 24 Oct 2023 14:41:35 +0200
Subject: [PATCH] refactor(MetaItem): update style

---
 src/common/MetaItem/MetaItem.js |  1 +
 src/common/MetaItem/styles.less | 35 ++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 4c1322252..69dbea039 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -87,6 +87,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, progr
                     onPlayClick ?
                         <div title={t('CONTINUE_WATCHING')} className={styles['play-icon-layer']} onClick={onPlayClick}>
                             <Icon className={styles['play-icon']} name={'play'} />
+                            <div className={styles['play-icon-outer']} />
                             <div className={styles['play-icon-background']} />
                         </div>
                         :
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 640e0481a..6e6910675 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -18,7 +18,7 @@
     play-icon-circle-centered-icon: icon;
 }
 
-@play-icon-size: 3.75rem;
+@play-icon-size: 4rem;
 
 .meta-item-container {
     padding: 1rem;
@@ -40,7 +40,9 @@
             }
 
             .play-icon-layer {
-                color: var(--secondary-accent-color);
+                .play-icon-outer {
+                    color: transparent;
+                }
 
                 .play-icon-background {
                     background-color: var(--secondary-accent-color);
@@ -162,19 +164,29 @@
             justify-content: center;
             height: @play-icon-size;
             width: @play-icon-size;
-            color: var(--primary-foreground-color);
-            box-shadow: 0 0 0 0.15rem currentColor;
-            border-radius: 100%;
-            transition: color 0.1s ease-in;
+            transition: transform 0.1s ease-out;
 
             .play-icon {
-                z-index: 1;
+                z-index: 2;
                 position: relative;
-                height: 2rem;
-                width: 2rem;
+                height: 2.25rem;
+                width: 2.25rem;
                 color: var(--primary-foreground-color);
             }
 
+            .play-icon-outer {
+                z-index: 1;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                color: var(--primary-foreground-color);
+                box-shadow: 0 0 0 0.15rem currentColor inset;
+                border-radius: 100%;
+                transition: color 0.1s ease-in;
+            }
+
             .play-icon-background {
                 z-index: 0;
                 position: absolute;
@@ -183,9 +195,14 @@
                 left: 0;
                 right: 0;
                 background-color: var(--primary-background-color);
+                border-radius: 100%;
                 opacity: 0.4;
                 transition: all 0.1s ease-in;
             }
+
+            &:hover {
+                transform: scale(1.075);
+            }
         }
 
         .progress-bar-layer {