From 7250e1c5986a692e33f7ecd26a7d4ba186b898df Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 31 Jul 2019 18:10:06 +0300
Subject: [PATCH] NavBar refactored to use rem for styling

---
 src/common/NavBar/NavBar.js                |  2 +-
 src/common/NavBar/NavBarButton/styles.less | 10 ++-----
 src/common/NavBar/SearchBar/SearchBar.js   |  2 +-
 src/common/NavBar/SearchBar/styles.less    | 10 +++----
 src/common/NavBar/styles.less              | 32 +++++++---------------
 5 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index 0fbc3e969..e22f18507 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -11,7 +11,7 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, user
         window.history.back();
     }, []);
     return (
-        <nav className={classnames(className, styles['nav-bar'])}>
+        <nav className={classnames(className, styles['nav-bar-container'])}>
             {
                 backButton ?
                     <NavBarButton
diff --git a/src/common/NavBar/NavBarButton/styles.less b/src/common/NavBar/NavBarButton/styles.less
index 9c1aa0d67..d6c78ac06 100644
--- a/src/common/NavBar/NavBarButton/styles.less
+++ b/src/common/NavBar/NavBarButton/styles.less
@@ -2,8 +2,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 1.2em;
-    overflow: hidden;
+    padding: 0 1.2rem;
     cursor: pointer;
 
     &:hover {
@@ -16,16 +15,13 @@
 
     .icon {
         flex: none;
-        height: 1.2em;
-        margin-right: 0.6em;
+        height: 1.2rem;
+        margin-right: 0.6rem;
         fill: var(--color-surfacelighter);
     }
 
     .label {
         flex: 1;
-        height: 1.4em;
-        line-height: 1.4em;
-        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         color: var(--color-surfacelighter);
diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js
index bb553a151..66ea7ca7b 100644
--- a/src/common/NavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/SearchBar/SearchBar.js
@@ -30,7 +30,7 @@ const SearchBar = ({ className }) => {
         }
     }, [active, focusable]);
     return (
-        <label className={classnames(className, styles['search-label'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
+        <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
             {
                 active ?
                     <Input
diff --git a/src/common/NavBar/SearchBar/styles.less b/src/common/NavBar/SearchBar/styles.less
index 96de38229..4f9a31b2a 100644
--- a/src/common/NavBar/SearchBar/styles.less
+++ b/src/common/NavBar/SearchBar/styles.less
@@ -1,7 +1,6 @@
-.search-label {
+.search-bar-container {
     display: flex;
     flex-direction: row;
-    align-items: stretch;
     background-color: var(--color-secondary60);
 
     &:hover {
@@ -22,10 +21,11 @@
 
     .search-input {
         flex: 1;
+        align-self: stretch;
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 0 0.8em;
+        padding: 0 0.8rem;
         color: var(--color-surfacelighter);
         cursor: text;
 
@@ -48,8 +48,8 @@
 
         .submit-icon {
             flex: none;
-            width: 1.1em;
-            height: 1.1em;
+            width: 1.1rem;
+            height: 1.1rem;
             fill: var(--color-surfacelighter);
         }
     }
diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less
index c488b636b..4ae66fef2 100644
--- a/src/common/NavBar/styles.less
+++ b/src/common/NavBar/styles.less
@@ -1,23 +1,10 @@
-.nav-bar {
-    --nav-bar-height: 44px;
-    font-size: 16px;
-
-    .nav-tabs-container {
-        .nav-tab-button {
-            &:nth-child(n+5) {
-                display: none;
-            }
-        }
-    }
-}
-
-.nav-bar {
+.nav-bar-container {
+    --nav-bar-height: 3.2rem;
     display: flex;
     flex-direction: row;
     align-items: center;
     height: var(--nav-bar-height);
     background-color: var(--color-secondarydark);
-    overflow: hidden;
 
     .back-button {
         flex: none;
@@ -34,20 +21,21 @@
             flex: none;
             max-width: calc(var(--nav-bar-height) * 3.5);
             height: var(--nav-bar-height);
+
+            &:nth-child(n+5) {
+                display: none;
+            }
         }
     }
 
     .title {
         flex: 1;
-        font-size: 1.1em;
-        height: 1.4em;
-        line-height: 1.4em;
-        padding: 0 0.6em;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        padding: 0 0.6rem;
+        font-size: 1.1rem;
         font-style: normal;
         font-weight: normal;
+        white-space: nowrap;
+        text-overflow: ellipsis;
         color: var(--color-surfacelighter);
 
         &~.spacing {