Merge pull request #1049 from alexstotsky/reduce-nav-width

(improvement) Adjust navigation panel

Author: jeojoe

src/components/AppDownload/_AppDownload.scss

@@ -1,38 +1,41 @@
 .app-download {
-  padding: 24px;
+  padding: 16px;
 
   &--title {
     margin: 0;
-    font-size: 16px;
-    max-width: 240px;
-    margin-bottom: 6px;
+    font-size: 14px;
+    max-width: 200px;
+    margin-bottom: 4px;
   }
 
   &--sub-title {
     margin: 0;
-    font-size: 14px;
-    max-width: 240px;
+    font-size: 12px;
+    max-width: 200px;
     color: var(--color2);
-    margin-bottom: 15px;
+    margin-bottom: 10px;
   }
 
   &--list {
-    padding-left: 20px;
+    padding-left: 16px;
 
     li {
-      font-size: 14px;
+      font-size: 12px;
       color: var(--color2);
-      padding-bottom: 6px;
+      padding-bottom: 4px;
     }
   }
 
   &--btn {
-    min-height: 40px;
-    padding: 5px 20px;
+    min-height: 34px;
+    padding: 4px 10px;
+    width: 100%;
 
     .bp3-button-text {
-      font-size: 15px;
+      font-size: 12px;
       font-weight: 700;
+      white-space: normal;
+      line-height: 1.3;
     }
   }
 }

src/components/Header/_Header.scss

@@ -17,7 +17,7 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    width: 283px;
+    width: 228px;
     height: 100%;
 
     .hamburger-menu {
@@ -27,13 +27,12 @@
     &-logo {
       display: block;
       position: absolute;
-      width: 230px;
+      width: 160px;
       height: 22px;
-      margin: auto;
       top: 0;
-      left: 0;
       bottom: 0;
-      right: 0;
+      left: 24px;
+      margin: auto 0;
     }
   }
 
@@ -90,7 +89,7 @@
     height: 56px;
 
     &-brand {
-      width: 347px;
+      width: 275px;
 
       &-logo, .platform-logo {
         width: 250px;
@@ -144,16 +143,17 @@
 @media screen and (max-width: 855px) {
   .header {
     &-brand {
+      width: auto;
       border-right: none;
 
       &-logo {
+        position: relative;
         width: 175px;
       }
 
       .hamburger-menu {
         display: block;
-        margin-top: 6px;
-        margin-left: 15px;
+        margin: 6px 0 0 15px;
       }
     }
 

src/ui/NavMenu/_NavMenu.scss

@@ -1,6 +1,6 @@
 .bitfinex-nav-menu {
   display: inline-block;
-  width: 290px;
+  width: 235px;
   padding: 0;
   border-radius: 0;
   clip-path: inset(0 -1px 0 0);
@@ -36,41 +36,60 @@
 
   .bp3-menu-item {
     display: flex;
+    align-items: center;
     width: 100%;
-    height: 34px;
-    line-height: 34px;
-    padding: 0 0 0 51px;
-    font-size: 1rem;
+    min-height: 34px;
+    height: auto;
+    line-height: 1.3;
+    padding: 6px 10px 6px 42px;
+    font-size: 14px;
     border-radius: 0;
     color: var(--color2);
+    white-space: normal;
+
+    .bp3-fill,
+    .bp3-text-overflow-ellipsis {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: unset;
+    }
 
     &.reports_title {
-      font-size: 16px;
+      font-size: 15px;
     }
 
     &.active,
     &.reports_title {
-      height: 44px;
-      line-height: 44px;
-      padding: 0 0 0 20px;
+      min-height: 40px;
+      height: auto;
+      line-height: 1.3;
+      padding: 6px 10px 6px 15px;
       color: var(--color1);
       font-weight: 500;
     }
 
     &.section_title {
-      height: 44px;
-      line-height: 44px;
-      padding: 0 0 0 20px;
+      min-height: 40px;
+      height: auto;
+      line-height: 1.3;
+      padding: 0 10px 0 15px;
+
+      .bp3-menu-item-label {
+        display: flex;
+        align-items: center;
+      }
     }
 
     svg {
-      height: 44px;
-      margin-right: 14px;
+      min-height: 34px;
+      margin-right: 10px;
+      flex-shrink: 0;
+      align-self: center;
     }
 
     div {
       display: inline-block;
-      width: 218px;
+      width: 160px;
     }
 
     &.bp3-active {
@@ -108,7 +127,7 @@
     }
 
     .bp3-fill {
-      width: 200px;
+      width: 160px;
     }
   }
 
@@ -139,20 +158,20 @@
 
 @media screen and (min-width: 2560px) {
   .bitfinex-nav-menu {
-    width: 346px;
+    width: 275px;
 
     .bp3-menu {
       &-item {
-        height: 52px;
-        line-height: 52px;
+        min-height: 52px;
+        height: auto;
 
         svg {
           width: 28px;
-          height: 52px;
+          min-height: 52px;
         }
 
         div {
-          width: 278px;
+          width: 200px;
         }
       }
     }