From 9ee5fd90d3e2a08a319cf92848218354449e31c6 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Tue, 10 Oct 2023 14:45:35 +0300
Subject: [PATCH] Revert "Revert "fixes after first senior review""

This reverts commit 379b35cd1c18efe103ef1a82cd09f4df88f496b9.
---
 .gitignore                                    |  3 ++-
 src/App/styles.less                           |  1 +
 src/common/AddonDetailsModal/styles.less      | 11 +++++++++
 src/common/MetaPreview/MetaPreview.js         | 22 +++++++++---------
 src/common/MetaPreview/styles.less            |  4 +++-
 src/common/ModalDialog/ModalDialog.js         |  2 +-
 src/common/ModalDialog/styles.less            | 23 ++++---------------
 .../MetaDetails/StreamsList/Stream/Stream.js  |  6 ++---
 .../StreamsList/Stream/styles.less            | 23 +++----------------
 .../MetaDetails/StreamsList/StreamsList.js    |  3 +--
 .../MetaDetails/VideosList/Video/styles.less  |  2 +-
 11 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/.gitignore b/.gitignore
index 71947782e..eddbdcc5a 100755
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@
 /yarn.lock
 /npm-debug.log
 .DS_Store
-.prettierignore
\ No newline at end of file
+.prettierignore
+bun.lockb
\ No newline at end of file
diff --git a/src/App/styles.less b/src/App/styles.less
index f4454424c..889456d51 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -24,6 +24,7 @@
     --color-twitter: #1DA1F2;
     --color-imdb: #f5c518;
     --color-placeholder: #60606080;
+    --color-released: #707070;
     --color-placeholder-text: @color-surface-50;
     --color-placeholder-background: @color-surface-dark5-20;
     --primary-background-color: rgba(12, 11, 17, 1);
diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
index 1d4fde635..d9189b665 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/common/AddonDetailsModal/styles.less
@@ -30,4 +30,15 @@
             color: var(--primary-foreground-color);
         }
     }
+    .uninstall-button {
+        background-color: rgba(72, 69, 114, 1);
+    
+        &:hover {
+            outline: var(--focus-outline-size) solid rgba(72, 69, 114, 1);
+            background-color: transparent;
+        }
+        &:focus {
+            outline-color: var(--primary-foreground-color);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index c4a96fce5..db39fb534 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -195,6 +195,12 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
             </div>
             <div className={styles['action-buttons-container']}>
                 <div className={styles['action-button-wrapper']}>
+                    {
+                        typeof toggleInLibrary === 'function' && compact ?
+                            <div className={styles['label']}>{inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}</div>
+                            :
+                            null
+                    }
                     {
                         typeof toggleInLibrary === 'function' ?
                             <ActionButton
@@ -207,14 +213,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                             :
                             null
                     }
+                </div>
+                <div className={styles['action-button-wrapper']}>
                     {
-                        typeof toggleInLibrary === 'function' && compact ?
-                            <div className={styles['label']}>{inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}</div>
+                        typeof trailerHref === 'string' && compact ?
+                            <div className={styles['label']}>{t('WATCH_TRAILER')}</div>
                             :
                             null
                     }
-                </div>
-                <div className={styles['action-button-wrapper']}>
                     {
                         typeof trailerHref === 'string' ?
                             <ActionButton
@@ -227,17 +233,11 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                             :
                             null
                     }
-                    {
-                        typeof trailerHref === 'string' && compact ?
-                            <div className={styles['label']}>{t('WATCH_TRAILER')}</div>
-                            :
-                            null
-                    }
                 </div>
                 {
                     typeof showHref === 'string' && compact ?
                         <ActionButton
-                            className={`${styles['action-button']} ${styles['show-button']}`}
+                            className={classnames(styles['action-button'], styles['show-button'])}
                             icon={'play'}
                             label={t('SHOW')}
                             tabIndex={compact ? -1 : 0}
diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 63639e3f6..ddc717844 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -156,6 +156,7 @@
         align-self: stretch;
         display: flex;
         flex-direction: row;
+        align-items: flex-end;
         max-height: 10rem;
         padding-top: 2rem;
         flex-wrap: wrap;
@@ -166,9 +167,10 @@
             flex-direction: column;
             justify-content: flex-start;
             align-items: center;
+            position: relative;
+            gap: 1rem 0;
         
             .label {
-                opacity: 0; 
                 transition: opacity 0.3s ease; 
                 max-width: 6rem;
                 text-align: center;
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index a3d390ef0..e7e2e8056 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -75,7 +75,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
                     Array.isArray(buttons) && buttons.length > 0 ?
                         <div className={styles['buttons-container']}>
                             {buttons.map(({ className, label, icon, props }, index) => (
-                                <Button title={label} {...props} key={index} className={classnames(className, label === 'Uninstall' ? styles['uninstall-button'] : styles['action-button'])}>
+                                <Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
                                     {
                                         typeof icon === 'string' && icon.length > 0 ?
                                             <Icon className={styles['icon']} name={icon} />
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 8fa45bda6..1da53df89 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -64,7 +64,7 @@
             flex: 1;
             align-self: stretch;
             overflow-y: auto;
-            padding: 32px  0;
+            padding: 2rem 0;
 
             &:last-child {
                 margin-bottom: 2rem;
@@ -84,7 +84,7 @@
         }
     }
 }
-.base-button() {
+.action-button {
     flex: 1;
     display: flex;
     flex-direction: row;
@@ -93,9 +93,11 @@
     height: 3.5rem;
     border-radius: 3.5rem;
     padding: 1.2rem;
+    background-color: var(--secondary-accent-color);
 
     &:hover {
         background-color: transparent;
+        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
     }
 
     &:focus {
@@ -124,24 +126,7 @@
         text-align: center;
         color: var(--primary-foreground-color);
     }
-}
 
-.uninstall-button {
-    .base-button();
-    background-color: rgba(72, 69, 114, 1);
-
-    &:hover {
-        outline: var(--focus-outline-size) solid rgba(72, 69, 114, 1);
-    }
-}
-
-.action-button {
-    .base-button();
-    background-color: var(--secondary-accent-color);
-
-    &:hover {
-        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
-    }
 }
 
 @media only screen and (max-width: @minimum) {
diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
index cff5dc715..0736742ae 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -83,7 +83,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
         <Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>
             {
                 typeof thumbnail === 'string' && thumbnail.length > 0 ?
-                    <div className={styles['thumbnail-container']} title={name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}>
+                    <div className={styles['thumbnail-container']} title={name || addonName}>
                         <Image
                             className={styles['thumbnail']}
                             src={thumbnail}
@@ -92,8 +92,8 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
                         />
                     </div>
                     :
-                    <div className={styles['addon-name-container']} title={name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}>
-                        <div className={styles['addon-name']}>{name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}</div>
+                    <div className={styles['addon-name-container']} title={name || addonName}>
+                        <div className={styles['addon-name']}>{name || addonName}</div>
                     </div>
             }
             {
diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index bcc2bb5e3..b384130b4 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -3,11 +3,6 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
-:import('~stremio/common/PlayIconCircleCentered/styles.less') {
-    play-icon-circle-centered-background: background;
-    play-icon-circle-centered-icon: icon;
-}
-
 .stream-container {
     display: flex;
     flex-direction: row;
@@ -22,16 +17,8 @@
     }
 
     &:hover, &:focus, &:global(.selected) {
-        .play-icon {
+        .icon {
             opacity: 1;
-
-            .play-icon-circle-centered-background {
-                fill: var(--secondary-accent-color);
-            }
-
-            .play-icon-circle-centered-icon {
-                fill: var(--primary-foreground-color);
-            }
         }
     }
 
@@ -70,6 +57,7 @@
         flex: 1;
         max-height: 3.6em;
         padding: 0 0.5rem 0 1.5rem;
+        opacity: 0.6;
         display: flex;
         flex-direction: column;
         -webkit-line-clamp: 3;
@@ -101,6 +89,7 @@
         height: 3rem;
         padding: 0.7rem;
         border-radius: 50%;
+        opacity: 0;
         color: var(--primary-foreground-color);
         background-color: var(--secondary-accent-color);
     }
@@ -123,11 +112,5 @@
                 font-weight: 500;
             }
         }
-
-        .play-icon {
-            .play-icon-circle-centered-icon {
-                fill: var(--primary-foreground-color);
-            }
-        }
     }
 }
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 20ef7641b..80d0a6699 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -102,8 +102,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                                 <Icon className={styles['icon']} name={'chevron-back'} />
                                             </Button>
                                             <div className={styles['episode-title']}>
-                                                {`S${video?.season}E${video?.episode} ${(video?.title)?.toLowerCase()?.replace(/\b\w/g, (char) => char.toUpperCase())}
-`}
+                                                {`S${video?.season}E${video?.episode} ${(video?.title)}`}
                                             </div>
                                         </React.Fragment>
                                     )
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 0a7458508..8c86ff82b 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -84,7 +84,7 @@
                 font-weight: 500;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                color: #707070;
+                color: var(--color-released);
                 opacity: 0.9;
             }