[MM-38325] Polished up some of the UI elements (#1727)

* [MM-38325] Polished up some of the UI elements

* PR feedback

* PR feedback

* PR feedback

src/renderer/css/components/TabBar.css

@@ -15,6 +15,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: center;
+  -webkit-font-smoothing: auto;
 }
 
 .TabBar>li {
@@ -44,12 +45,12 @@
 }
 
 .TabBar>li>a:hover {
-  background-color: rgba(255,255,255,0.32);
+  background-color: rgba(255,255,255,0.56);
   text-decoration: none;
 }
 
 .TabBar.darkMode>li>a:hover {
-  background-color: rgba(31, 31, 31, 0.32);
+  background-color: rgba(31, 31, 31, 0.56);
 }
 
 .TabBar>li>a:focus {
@@ -90,6 +91,7 @@
 .TabBar>li>a>div.TabBar-tabSeperator {
   display: flex;
   padding: 5px 12px;
+  align-items: center;
 }
 
 .TabBar>li.teamTabItem.active>a, .TabBar>li.teamTabItem.dragging>a {
@@ -130,16 +132,19 @@
 }
 
 .TabBar .TabBar-dot {
-  background: #196CAF;
+  background: #579eff;
   float: right;
   height: 8px;
   width: 8px;
-  margin-top: 4px;
   margin-left: 8px;
   border-radius: 4px;
   flex: 0 0 8px;
 }
 
+.TabBar.darkMode .TabBar-dot {
+  background: #196CAF;
+}
+
 .TabBar .TabBar-expired {
   float: right;
   font-size: 18px;
@@ -164,14 +169,14 @@
     justify-content: center;
     flex: 0 0 auto;
     color: white;
-    font-size: 10px;
+    font-size: 9px;
     padding: 0px 5px;
     font-family: "Open Sans", sans-serif;
     font-weight: bold;
     letter-spacing: normal;
-    -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: auto;
+    
     margin-left: 6px;
-    margin-top: 2px;
     height: 12px;
 }
 

src/renderer/css/components/TeamDropdownButton.scss

@@ -7,6 +7,7 @@
     align-items: center;
     font-family: Open Sans;
     overflow: hidden;
+    -webkit-font-smoothing: auto;
 
     &.disabled {
         opacity: 0.5;
@@ -55,25 +56,23 @@
     border-radius: 8px;
     display: flex;
     align-items: center;
+    justify-content: center;
     flex: 0 0 auto;
+    color: white;
+    font-size: 9px;
+    padding: 0px 5px;
+    font-family: "Open Sans", sans-serif;
+    font-weight: bold;
+    letter-spacing: normal;
+    -webkit-font-smoothing: auto;
+
     position: absolute;
     top: -4px;
     right: -2px;
     border: 2px solid #efefef;
-    height: 16px;
+    height: 12px;
-
+    line-height: 12px;
-    > span {
+    box-sizing: unset;
-        color: white;
-        font-size: 10px;
-        padding: 0px 5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: "Open Sans", sans-serif;
-        font-weight: bold;
-        letter-spacing: normal;
-        -webkit-font-smoothing: antialiased;
-    }
 }
 
 .TeamDropdownButton__badge-unreads {
@@ -82,8 +81,8 @@
     width: 12px;
     height: 12px;
     position: absolute;
-    top: -4px;
+    top: -5px;
-    right: -2px;
+    right: -1px;
     border: 2px solid #efefef;
 }
 
@@ -121,4 +120,8 @@
     .TeamDropdownButton__badge-unreads {
         border-color: #2e2e2e;
     }
+
+    .TeamDropdownButton__badge-unreads {
+        background: #196CAF;
+    }
 }

src/renderer/css/dropdown.scss

@@ -21,7 +21,6 @@ body {
     border: 1px solid rgba(61, 60, 64, 0.16);
     box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
     border-radius: 4px;
-    min-width: 354px;
 }
 
 .TeamDropdown__droppable {
@@ -64,6 +63,7 @@ body {
     width: 100%;
     align-items: center;
     font-family: Open Sans;
+    cursor: pointer;
 
     &:not(.anyDragging):hover {
         background-color: rgba(61, 60, 64, 0.08);
@@ -103,6 +103,10 @@ body {
         color: rgba(61, 60, 64, 0.56);
     }
 
+    i.icon-server-variant, i.icon-check {
+        margin-top: -1px;
+    }
+
     &.active i.icon-check {
         color: #166de0;
     }
@@ -118,8 +122,12 @@ body {
     &.addServer {
         padding-left: 24px;
 
-        > i.icon-plus::before {
+        > i.icon-plus {
-            margin: 0;
+            margin-top: -2px;
+    
+            &::before {
+                margin: 0;
+            }
         }
     }
 }
@@ -128,6 +136,7 @@ body {
     cursor: pointer !important;
     display: flex;
     overflow: hidden;
+    margin-right: 36px;
     
     &.dragging {
         cursor: grabbing !important;
@@ -135,6 +144,7 @@ body {
 
     > i.icon-drag-vertical {
         opacity: 0;
+        margin-top: -2px;
 
         &::before {
             margin: 0;
@@ -191,11 +201,12 @@ body {
     display: flex;
 
     > button {
-        margin-left: 18px;
+        margin-left: 14px;
         background-color: transparent;
         border: none;
         border-radius: 2px;
         padding: 0;
+        cursor: pointer;
 
         &:hover, &:focus {
             background: rgba(61, 60, 64, 0.08);
@@ -228,7 +239,7 @@ body {
     margin-right: 7px;
 
     + .TeamDropdown__badge {
-        margin-left: 7px;
+        margin-left: 3px;
     }
 
     i {