Revert "fixes after first senior review"

This reverts commit 250d85ddc7.

.gitignore

@@ -4,4 +4,3 @@
 /npm-debug.log
 .DS_Store
 .prettierignore
-bun.lockb

src/App/styles.less

@@ -24,7 +24,6 @@
     --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);

src/common/AddonDetailsModal/styles.less

@@ -30,15 +30,4 @@
             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);
-        }
-    }
 }

src/common/MetaPreview/MetaPreview.js

@@ -195,12 +195,6 @@ 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
@@ -213,14 +207,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                             :
                             null
                     }
-                </div>
-                <div className={styles['action-button-wrapper']}>
                     {
-                        typeof trailerHref === 'string' && compact ?
+                        typeof toggleInLibrary === 'function' && compact ?
-                            <div className={styles['label']}>{t('WATCH_TRAILER')}</div>
+                            <div className={styles['label']}>{inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}</div>
                             :
                             null
                     }
+                </div>
+                <div className={styles['action-button-wrapper']}>
                     {
                         typeof trailerHref === 'string' ?
                             <ActionButton
@@ -233,11 +227,17 @@ 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={classnames(styles['action-button'], styles['show-button'])}
+                            className={`${styles['action-button']} ${styles['show-button']}`}
                             icon={'play'}
                             label={t('SHOW')}
                             tabIndex={compact ? -1 : 0}

src/common/MetaPreview/styles.less

@@ -156,7 +156,6 @@
         align-self: stretch;
         display: flex;
         flex-direction: row;
-        align-items: flex-end;
         max-height: 10rem;
         padding-top: 2rem;
         flex-wrap: wrap;
@@ -167,10 +166,9 @@
             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;

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, styles['action-button'])}>
+                                <Button title={label} {...props} key={index} className={classnames(className, label === 'Uninstall' ? styles['uninstall-button'] : styles['action-button'])}>
                                     {
                                         typeof icon === 'string' && icon.length > 0 ?
                                             <Icon className={styles['icon']} name={icon} />

src/common/ModalDialog/styles.less

@@ -64,7 +64,7 @@
             flex: 1;
             align-self: stretch;
             overflow-y: auto;
-            padding: 2rem 0;
+            padding: 32px  0;
 
             &:last-child {
                 margin-bottom: 2rem;
@@ -84,7 +84,7 @@
         }
     }
 }
-.action-button {
+.base-button() {
     flex: 1;
     display: flex;
     flex-direction: row;
@@ -93,11 +93,9 @@
     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 {
@@ -126,7 +124,24 @@
         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) {

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 || addonName}>
+                    <div className={styles['thumbnail-container']} title={name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}>
                         <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 || addonName}>
+                    <div className={styles['addon-name-container']} title={name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}>
-                        <div className={styles['addon-name']}>{name || addonName}</div>
+                        <div className={styles['addon-name']}>{name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}</div>
                     </div>
             }
             {

src/routes/MetaDetails/StreamsList/Stream/styles.less

@@ -3,6 +3,11 @@
 @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;
@@ -17,8 +22,16 @@
     }
 
     &:hover, &:focus, &:global(.selected) {
-        .icon {
+        .play-icon {
             opacity: 1;
+
+            .play-icon-circle-centered-background {
+                fill: var(--secondary-accent-color);
+            }
+
+            .play-icon-circle-centered-icon {
+                fill: var(--primary-foreground-color);
+            }
         }
     }
 
@@ -57,7 +70,6 @@
         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;
@@ -89,7 +101,6 @@
         height: 3rem;
         padding: 0.7rem;
         border-radius: 50%;
-        opacity: 0;
         color: var(--primary-foreground-color);
         background-color: var(--secondary-accent-color);
     }
@@ -112,5 +123,11 @@
                 font-weight: 500;
             }
         }
+
+        .play-icon {
+            .play-icon-circle-centered-icon {
+                fill: var(--primary-foreground-color);
+            }
+        }
     }
 }

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -102,7 +102,8 @@ 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)}`}
+                                                {`S${video?.season}E${video?.episode} ${(video?.title)?.toLowerCase()?.replace(/\b\w/g, (char) => char.toUpperCase())}
+`}
                                             </div>
                                         </React.Fragment>
                                     )

src/routes/MetaDetails/VideosList/Video/styles.less

@@ -84,7 +84,7 @@
                 font-weight: 500;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                color: var(--color-released);
+                color: #707070;
                 opacity: 0.9;
             }