From 48504494f8b02664143f8b5ef8bcd81ab115e8c6 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 22 Nov 2023 23:45:46 +0200
Subject: [PATCH] refactor: changed the postioning of the back to top button &
 animation added to addons-container

---
 .../MetaDetails/StreamsList/StreamsList.js    | 23 +++---
 .../MetaDetails/StreamsList/styles.less       | 77 ++++++++++---------
 2 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index b4191f4b0..fa59ef669 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -173,6 +173,10 @@ const StreamsList = ({ className, video, ...props }) => {
                                         isScrollable && countLoadingAddons === 0 ?
                                             <React.Fragment>
                                                 <hr className={styles['line']} />
+                                                <div className={classnames(styles['to-top-wrapper'], showBackToTop ? styles['active'] : null)} onClick={scrollToTop}>
+                                                    <Icon className={styles['icon']} name={'chevron-up'} />
+                                                    <div className={styles['label']}>Back to Top</div>
+                                                </div>
                                                 <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
                                                     <Icon className={styles['icon']} name={'addons'} />
                                                     <div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
@@ -184,21 +188,12 @@ const StreamsList = ({ className, video, ...props }) => {
                                 </div>
                             </React.Fragment>
             }
-            <div className={classnames(styles['to-top-wrapper'], showBackToTop ? styles['active'] : null)} onClick={scrollToTop}>
-                <Icon className={styles['icon']} name={'chevron-up'} />
-                <div className={styles['label']}>Back to Top</div>
+            <div className={classnames(styles['addons-loading-container'], countLoadingAddons > 0 ? styles['active'] : null)}>
+                <div className={styles['addons-loading']}>
+                    {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
+                </div>
+                <span className={styles['addons-loading-bar']}></span>
             </div>
-            {
-                countLoadingAddons > 0 ?
-                    <div className={styles['addons-loading-container']}>
-                        <div className={styles['addons-loading']}>
-                            {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
-                        </div>
-                        <span className={styles['addons-loading-bar']}></span>
-                    </div>
-                    :
-                    null
-            }
             {
                 !isScrollable && countLoadingAddons === 0 ?
                     <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index e52bc7c04..b76b0c24b 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -45,11 +45,16 @@
         display: flex;
         z-index: 1;
         overflow: visible;
-        margin: 2em 1em;
+        margin: 0;
         gap: 1em;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        max-height: 0rem;
+        min-height: 0rem;
+        opacity: 0;
+        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out, margin 0.5s ease-in-out;
+        overflow: hidden;
 
         .addons-loading {
             color: var(--primary-foreground-color);
@@ -62,6 +67,13 @@
             border-radius: var(--border-radius);
             background-color: var(--primary-accent-color);
         }
+
+        &.active {
+            min-height: 3rem;
+            max-height: 3rem;
+            margin: 2em 1em;
+            opacity: 1;
+        }
     }
 
     .select-choices-wrapper {
@@ -140,48 +152,39 @@
         opacity: 0.2;
     }
 
-    .to-top-wrapper {
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        gap: 0 0.5rem;
-        cursor: pointer;
-        max-height: 0rem;
-        min-height: 0rem;
-        opacity: 0;
-        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out;
-        overflow: hidden;
-    
-        .icon {
-            color: var(--primary-foreground-color);
-            width: 2rem;
-            height: 2rem;
-        }
-    
-        .label {
-            font-size: 0.9rem;
-            color: var(--primary-foreground-color);
-        }
-        
-        &.active {
-            min-height: 3rem;
-            max-height: 3rem;
-            opacity: 0.7;
-        }
-    
-        &:hover {
-            opacity: 1; 
-        }
-    }
-    
-
     .streams-container {
         flex: 1 1 auto;
         align-self: stretch;
         margin-top: 1rem;
         padding: 0 1rem;
         overflow-y: auto;
+
+        .to-top-wrapper {
+            display: flex;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            gap: 0 0.5rem;
+            opacity: 0.7;
+            transition: opacity 0.5s ease-in-out;
+            cursor: pointer;
+            overflow: hidden;
+        
+            .icon {
+                color: var(--primary-foreground-color);
+                width: 2rem;
+                height: 2rem;
+            }
+        
+            .label {
+                font-size: 0.9rem;
+                color: var(--primary-foreground-color);
+            }
+
+            &:hover {
+               opacity: 1;
+            }
+        }    
     }
 
     .install-button-container {