Merge branch 'development' into feat/player-side-drawer

src/common/EventModal/styles.less

@@ -19,26 +19,30 @@
             flex-direction: column;
             align-items: center;
             overflow: visible;
+            position: relative;
 
-            .modal-dialog-content {
+            .body-container {
                 overflow-y: visible;
             }
-    
+
             .image {
-                width: 100%;
-                height: 100%;
-                margin-top: -10rem;
+                position: absolute;
+                top: -10rem;
+                left: 50%;
+                transform: translateX(-50%);
+                object-fit: cover;
+                width: 30rem;
+                height: 30rem;
             }
-        
+
             .info-container {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 gap: 2.5rem;
-                padding: 1rem 4rem;
-                margin-top: -7rem;
-        
+                padding: 10rem 4rem 0;
+
                 .title-container {
                     display: flex;
                     flex-direction: column;
@@ -50,7 +54,7 @@
                         text-align: center;
                         padding: 0 6rem;
                     }
-        
+
                     .label {
                         color: var(--primary-foreground-color);
                         font-size: 1rem;
@@ -58,7 +62,7 @@
                         opacity: 0.5;
                     }
                 }
-        
+
                 .addon-container {
                     display: flex;
                     align-items: center;
@@ -76,19 +80,19 @@
                         color: var(--primary-foreground-color);
                     }
                 }
-        
+
                 .action-button {
                     background-color: var(--primary-foreground-color);
                     border: 2px solid var(--primary-foreground-color);
                     padding: 0.8rem 2rem;
                     border-radius: 2rem;
-        
+
                     .button-label {
                         color: var(--primary-accent-color);
                         font-size: 1rem;
                         font-weight: 700;
                     }
-        
+
                     &:hover {
                         background-color: transparent;
                     }
@@ -96,15 +100,34 @@
             }
         }
     }
+}
 
-    @media only screen and (max-width: @minimum) {
+@media (orientation: landscape) and (max-height: @xsmall) {
+    .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {
-                .image {
-                    height: 125%;
-                    width: 125%;
+                overflow-y: auto;
+
+                .body-container {
+                    overflow-y: auto;
                 }
 
+                .image {
+                    display: none;
+                }
+
+                .info-container {
+                    padding: 1rem 4rem 0;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .event-modal {
+        .modal-dialog-container {
+            .modal-dialog-content {
                 .info-container {
                     .title-container {
                         .title {
@@ -120,4 +143,4 @@
             }
         }
     }
-}
+}

src/common/MainNavBars/MainNavBars.js

@@ -24,7 +24,6 @@ const MainNavBars = React.memo(({ className, route, query, children }) => {
                 query={query}
                 backButton={false}
                 searchBar={true}
-                addonsButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />

src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -13,7 +13,7 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -54,14 +54,6 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     null
             }
             <div className={styles['buttons-container']}>
-                {
-                    addonsButton ?
-                        <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
-                            <Icon className={styles['icon']} name={'addons-outline'} />
-                        </Button>
-                        :
-                        null
-                }
                 {
                     !isIOSPWA && fullscreenButton ?
                         <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
@@ -90,7 +82,6 @@ HorizontalNavBar.propTypes = {
     title: PropTypes.string,
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
-    addonsButton: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
     navMenu: PropTypes.bool
 };

src/routes/MetaDetails/MetaDetails.js

@@ -81,7 +81,6 @@ const MetaDetails = ({ urlParams, queryParams }) => {
             <HorizontalNavBar
                 className={styles['nav-bar']}
                 backButton={true}
-                addonsButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />
@@ -210,7 +209,6 @@ const MetaDetailsFallback = () => (
         <HorizontalNavBar
             className={styles['nav-bar']}
             backButton={true}
-            addonsButton={true}
             fullscreenButton={true}
             navMenu={true}
         />