render eighter logo or back button in the horizontal nav bar

src/App/styles.less

@@ -10,7 +10,7 @@
     --landscape-shape-ratio: 0.5625;
     --poster-shape-ratio: 1.464;
     --scroll-bar-width: 6px;
-    --nav-bar-size: 3.2rem;
+    --horizontal-nav-bar-size: 4rem;
     --vertical-nav-bar-size: 5rem;
     --focus-outline-size: 2px;
     --color-facebook: #4267b2;

src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -1,8 +1,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
-const NavTabButton = require('../NavTabButton');
 const SearchBar = require('../SearchBar');
 const AddonsButton = require('../AddonsButton');
 const FullscreenButton = require('../FullscreenButton');
@@ -15,25 +16,20 @@ const HorizontalNavBar = React.memo(({ className, route, query, backButton, sear
         window.history.back();
     }, []);
     return (
-        <nav className={classnames(className, styles['nav-bar-container'])}>
-            <div className={styles['logo-container']}>
-                <Image
-                    className={styles['logo']}
-                    src={'/images/stremio_symbol.png'}
-                    alt={' '}
-                />
-            </div>
+        <nav className={classnames(className, styles['horizontal-nav-bar-container'])}>
             {
                 backButton ?
-                    <NavTabButton
-                        className={styles['nav-tab-button']}
-                        icon={'ic_back_ios'}
-                        label={'Back'}
-                        direction={'horizontal'}
-                        onClick={backButtonOnClick}
-                    />
+                    <Button className={styles['back-button-container']} tabIndex={-1} onClick={backButtonOnClick}>
+                        <Icon className={styles['icon']} icon={'ic_back_ios'} />
+                    </Button>
                     :
-                    null
+                    <div className={styles['logo-container']}>
+                        <Image
+                            className={styles['logo']}
+                            src={'/images/stremio_symbol.png'}
+                            alt={' '}
+                        />
+                    </div>
             }
             {
                 searchBar ?

src/common/NavBar/HorizontalNavBar/styles.less

@@ -1,23 +1,39 @@
-.nav-bar-container {
-    --nav-bar-size: 3.2rem;
+.horizontal-nav-bar-container {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: var(--nav-bar-size);
+    height: var(--horizontal-nav-bar-size);
     background-color: var(--color-secondarydark);
     overflow: visible;
 
-    .logo-container {
+    .logo-container, .back-button-container {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: var(--nav-bar-size);
-        height: var(--nav-bar-size);
+        width: var(--vertical-nav-bar-size);
+        height: var(--horizontal-nav-bar-size);
+    }
 
+    .logo-container {
         .logo {
             flex: none;
-            width: 2rem;
-            height: 2rem;
+            width: 70%;
+            height: 70%;
+            object-position: center;
+            object-fit: contain;
+        }
+    }
+
+    .back-button-container {
+        &:hover {
+            background-color: var(--color-secondary);
+        }
+
+        .icon {
+            flex: none;
+            width: 50%;
+            height: 50%;
+            fill: var(--color-surfacelighter);
         }
     }
 
@@ -45,7 +61,7 @@
 
     .addons-button, .fullscreen-button, .notifications-menu, .nav-menu {
         flex: none;
-        width: var(--nav-bar-size);
-        height: var(--nav-bar-size);
+        width: var(--horizontal-nav-bar-size);
+        height: var(--horizontal-nav-bar-size);
     }
 }