From d14525b4fae697a0b89e2b5148254e0e1075475e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 25 Feb 2020 14:38:29 +0200
Subject: [PATCH] nav bars styled

---
 src/App/styles.less                           |  2 +-
 .../HorizontalNavBar/NavMenu/styles.less      |  2 +-
 .../HorizontalNavBar/SearchBar/SearchBar.js   |  4 +--
 .../HorizontalNavBar/SearchBar/styles.less    | 33 ++++++++++++------
 .../NavBar/HorizontalNavBar/styles.less       | 34 +++++++++----------
 .../VerticalNavBar/NavTabButton/styles.less   | 20 ++++++-----
 src/routes/Board/styles.less                  |  4 +--
 7 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 0bce8c1ef..eb80225cd 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -11,7 +11,7 @@
     --poster-shape-ratio: 1.464;
     --scroll-bar-width: 6px;
     --horizontal-nav-bar-size: 4rem;
-    --vertical-nav-bar-size: 5rem;
+    --vertical-nav-bar-size: 5.2rem;
     --focus-outline-size: 2px;
     --color-facebook: #4267b2;
     --color-twitter: #1DA1F2;
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
index 8e9bc4aa2..fc4173c65 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
@@ -2,7 +2,7 @@
 
 .nav-menu-container {
     width: 20rem;
-    background-color: @color-background-dark2;
+    background-color: @color-background-light1;
 
     .user-info-container {
         display: grid;
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
index 126f3b0cf..404960319 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
@@ -34,14 +34,14 @@ const SearchBar = ({ className, query, active }) => {
                         ref={searchInputRef}
                         className={styles['search-input']}
                         type={'text'}
-                        placeholder={'Search'}
+                        placeholder={'Search or paste link'}
                         defaultValue={query}
                         tabIndex={-1}
                         onSubmit={queryInputOnSubmit}
                     />
                     :
                     <div className={styles['search-input']}>
-                        <div className={styles['placeholder-label']}>Search</div>
+                        <div className={styles['placeholder-label']}>Search or paste link</div>
                     </div>
             }
             <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
index 8c25be3b8..b964c4643 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
@@ -1,11 +1,16 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
 .search-bar-container {
+    --search-bar-size: calc(var(--horizontal-nav-bar-size) - 1rem);
     display: flex;
     flex-direction: row;
-    height: calc(var(--horizontal-nav-bar-size) * 0.7);
-    border-radius: calc(var(--horizontal-nav-bar-size) * 0.7);
-    background-color: @color-background-dark3;
+    height: var(--search-bar-size);
+    border-radius: var(--search-bar-size);
+    background-color: @color-background-light2;
+
+    &:hover {
+        background-color: @color-background-light3;
+    }
 
     .search-input {
         flex: 1;
@@ -13,14 +18,14 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 0 1rem;
-        color: @color-secondaryvariant2-light1;
+        padding: 0 0.5rem 0 1.5rem;
+        color: @color-secondaryvariant1-light1-90;
         cursor: text;
 
         &::placeholder, .placeholder-label {
             max-height: 1.2em;
             opacity: 1;
-            color: @color-secondaryvariant2-light1;
+            color: @color-secondaryvariant1-light1-90;
         }
     }
 
@@ -30,14 +35,20 @@
         flex-direction: row;
         justify-content: center;
         align-items: center;
-        width: calc(var(--horizontal-nav-bar-size) * 0.7);
-        height: calc(var(--horizontal-nav-bar-size) * 0.7);
+        width: var(--search-bar-size);
+        height: var(--search-bar-size);
+
+        &:hover {
+            .icon {
+                fill: @color-secondaryvariant2-light1;
+            }
+        }
 
         .icon {
             flex: none;
-            width: 1.5rem;
-            height: 1.5rem;
-            fill: @color-secondaryvariant2-light1;
+            width: 1.7rem;
+            height: 1.7rem;
+            fill: @color-secondaryvariant1;
         }
     }
 }
\ No newline at end of file
diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
index 63dc5d7fd..d77260894 100644
--- a/src/common/NavBar/HorizontalNavBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -5,7 +5,8 @@
     flex-direction: row;
     align-items: center;
     height: var(--horizontal-nav-bar-size);
-    background-color: @color-background-dark1;
+    padding-right: 1rem;
+    background-color: @color-background;
     overflow: visible;
 
     .logo-container {
@@ -18,19 +19,24 @@
 
         .logo {
             flex: none;
-            width: 70%;
-            height: 70%;
+            width: 2.5rem;
+            height: 2.5rem;
             object-position: center;
             object-fit: contain;
         }
     }
 
+    .spacing {
+        flex: 1 0 0;
+    }
+
     .title {
-        flex: 1;
+        flex: 4 0 0;
         padding: 0 1rem;
-        font-size: 1.1rem;
+        font-size: 1.2rem;
         font-style: normal;
         font-weight: 500;
+        letter-spacing: 0.01rem;
         white-space: nowrap;
         text-overflow: ellipsis;
         color: @color-secondaryvariant2-light1;
@@ -40,15 +46,9 @@
         }
     }
 
-    .spacing {
-        flex: 1;
-    }
-
     .search-bar {
-        flex-grow: 0;
-        flex-shrink: 1;
-        flex-basis: 25rem;
-        min-width: 9.5rem;
+        flex: 2 0 9.5rem;
+        max-width: 30rem;
 
         &+.spacing {
             max-width: 11rem;
@@ -69,17 +69,17 @@
         }
 
         &:hover {
-            background-color: @color-background;
+            background-color: @color-background-light2;
         }
 
         &:global(.active) {
-            background-color: @color-background-dark2;
+            background-color: @color-background-light1;
         }
 
         .icon {
             flex: none;
-            width: 1.8rem;
-            height: 1.8rem;
+            width: 1.7rem;
+            height: 1.7rem;
             fill: @color-secondaryvariant2-light1;
         }
     }
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
index 6832758e1..29c7477b2 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -5,16 +5,17 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    background-color: @color-background;
 
     &:hover {
-        background-color: @color-background-dark1;
+        background-color: @color-background-light2;
     }
 
     &:global(.selected) {
         background-color: @color-secondaryvariant1-dark5;
 
         &:hover {
-            background-color: @color-secondary-dark3;
+            background-color: @color-secondaryvariant1-dark4;
         }
 
         .icon {
@@ -22,25 +23,26 @@
         }
 
         .label {
-            color: @color-surface-light5;
+            color: @color-surface-light5-90;
         }
     }
 
     .icon {
         flex: none;
-        width: 1.5rem;
-        height: 1.5rem;
+        width: 1.7rem;
+        height: 1.7rem;
         margin-bottom: 0.5rem;
-        fill: @color-secondary-light2;
+        fill: @color-secondary-light5;
     }
 
     .label {
         flex: none;
         max-height: 2.4em;
-        padding: 0 0.5rem;
-        font-size: 0.9rem;
+        padding: 0 0.2rem;
+        font-size: 0.85rem;
         font-weight: 500;
+        letter-spacing: 0.01rem;
         text-align: center;
-        color: @color-secondary-light2;
+        color: @color-secondaryvariant1-90;
     }
 }
\ No newline at end of file
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 5222e384c..c3be48378 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -15,8 +15,8 @@
     display: grid;
     width: 100%;
     height: 100%;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-columns: var(--vertical-nav-bar-size) calc(100% - var(--vertical-nav-bar-size));
+    grid-template-rows: var(--horizontal-nav-bar-size) calc(100% - var(--horizontal-nav-bar-size));
     grid-template-areas:
         "horizontal-nav-bar horizontal-nav-bar"
         "vertical-nav-bar board-content";