Added improvements for displaying service name under service icon (#2169)

* move notification badge to top of service icon
* Change horizontal sidebar height programmatically
* Fix tab item style in vertical and horizontal style sidebar
* Reformat code and remove magic numbers

Co-authored-by: Johan K Mathew <johankmathew@gmail.com>

2 files changed, 31 insertions, 7 deletions

diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index ab7cee08d..c5111fa91 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -54,6 +54,9 @@
     .tab-item__icon {
       margin-left: -4px;
     }
+    .tab-item__label {
+      margin-left: -4px;
+    }
   }
 
   &.is-label-enabled{
@@ -91,7 +94,7 @@
     align-items: center;
     background: $theme-brand-danger;
     border-radius: 20px;
-    bottom: 8px;
+    top: 8px;
     color: #fff;
     display: flex;
     font-size: 11px;
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 426032bf6..083f98c3d 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -1,6 +1,8 @@
 @import './config.scss';
 
-$sidebar-width: 64px;
+$sidebar-width: 75px;
+$sidebar-bias: 22px;
+$tabitem-bias: 30px;
 
 .sidebar {
   width: 100vw;
@@ -10,6 +12,7 @@ $sidebar-width: 64px;
   top: 0;
   right: 0;
   padding-bottom: 0px;
+  overflow: hidden !important;
 
   &::after {
     top: -10px;
@@ -30,17 +33,32 @@ $sidebar-width: 64px;
     .tab-item {
       
       &.is-active {
-        border-left-width: 0px;
+        border-left-width: 0px !important;
         border-top-width: 4px;
         border-top-style: solid;
-        padding-left: 4px;
+        overflow: hidden;
+        height: $sidebar-width + 4;
       }
 
       &:not(.is-active) {
         padding-top: 4px;
       }
+
+      &.is-label-enabled{
+        min-width: 70px;
+        max-width: 140px;
+        height: $sidebar-width + 10;
+        width: max-content !important;
+        overflow: hidden;
+        padding-left: 4px;
+        padding-right: 4px;
+        padding-top: 8px;
+      }
     }
   }
+  div{
+    overflow: hidden !important;
+  }
 
   .sidebar__button--workspaces.is-active {
     position: absolute;
@@ -51,7 +69,7 @@ $sidebar-width: 64px;
 }
 
 .app .app__content {
-  padding-top: $sidebar-width;
+  padding-top: $sidebar-width + $sidebar-bias;
 }
 
 .workspaces-drawer {
@@ -86,9 +104,12 @@ $sidebar-width: 64px;
 }
 
 .darwin .sidebar {
-  height: $sidebar-width + 22px;
+  height: $sidebar-width + $sidebar-bias;
 
   .sidebar__button--workspaces.is-active {
-    height: $sidebar-width - 22px;
+    height: $sidebar-width - $sidebar-bias;
+  }
+  .tab-item .is-label-enabled{
+    height: $sidebar-width + $tabitem-bias;
   }
 }