From 43a506e73ab7602d62c6e68bd18b54f29f801192 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 18 Feb 2020 22:25:10 +0200
Subject: [PATCH] VerticalNavBar styled

---
 src/App/styles.less                                | 1 +
 src/common/NavBar/NavTabButton/styles.less         | 4 +++-
 src/common/NavBar/VerticalNavBar/VerticalNavBar.js | 4 ++--
 src/common/NavBar/VerticalNavBar/styles.less       | 5 ++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 8844fde5e..5c4c8f7bd 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -11,6 +11,7 @@
     --poster-shape-ratio: 1.464;
     --scroll-bar-width: 6px;
     --nav-bar-size: 3.2rem;
+    --vertical-nav-bar-size: 5rem;
     --focus-outline-size: 2px;
     --color-facebook: #4267b2;
     --color-twitter: #1DA1F2;
diff --git a/src/common/NavBar/NavTabButton/styles.less b/src/common/NavBar/NavTabButton/styles.less
index 583180d63..f3e16eead 100644
--- a/src/common/NavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/NavTabButton/styles.less
@@ -27,6 +27,8 @@
     &.nav-tab-button-vertical {
         flex-direction: column;
         justify-content: center;
+        width: var(--vertical-nav-bar-size);
+        height: var(--vertical-nav-bar-size);
         padding: 0.5rem;
 
         .icon {
@@ -36,7 +38,7 @@
         .label {
             flex: none;
             max-height: 1.2em;
-            font-size: 0.75rem;
+            font-size: 0.85rem;
         }
     }
 
diff --git a/src/common/NavBar/VerticalNavBar/VerticalNavBar.js b/src/common/NavBar/VerticalNavBar/VerticalNavBar.js
index 6cd66d60b..20ea46a04 100644
--- a/src/common/NavBar/VerticalNavBar/VerticalNavBar.js
+++ b/src/common/NavBar/VerticalNavBar/VerticalNavBar.js
@@ -1,12 +1,12 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const NavTabButton = require('stremio/common/NavBar/NavTabButton');
+const NavTabButton = require('../NavTabButton');
 const styles = require('./styles');
 
 const VerticalNavBar = React.memo(({ className, route, tabs }) => {
     return (
-        <nav className={classnames(className, styles['nav-bar-container'])}>
+        <nav className={classnames(className, styles['vertical-nav-bar-container'])}>
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
                     tabs.map((tab, index) => (
diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less
index bcbfe94ec..6f3d21199 100644
--- a/src/common/NavBar/VerticalNavBar/styles.less
+++ b/src/common/NavBar/VerticalNavBar/styles.less
@@ -1,6 +1,5 @@
-.nav-bar-container {
-    --nav-bar-size: 4.4rem;
-    width: var(--nav-bar-size);
+.vertical-nav-bar-container {
+    width: var(--vertical-nav-bar-size);
     padding: 1rem 0;
     background-color: var(--color-backgroundlighter);
     overflow-y: auto;