feat: git branch dropdown better styling

Author: devvaannsh

src/extensions/default/Git/styles/git-styles.less

@@ -930,6 +930,7 @@
     margin-left: -12px;
     position: absolute;
     display: block;
+    min-width: 200px;
     max-width: none;
     z-index: 100;
     overflow-y: auto;
@@ -950,6 +951,7 @@
     }
     .git-branch-link {
         position: relative;
+        padding-right: 62px;
         .switch-branch {
             display: inline-block;
             width: 100%;
@@ -959,30 +961,39 @@
         .trash-icon, .merge-branch {
             position: absolute;
             opacity: 0;
-            top: 27%;
+            top: 50%;
+            transform: translateY(-50%);
             background-image: none !important;
-            width: 16px;
-            height: 16px;
-            font-size: 20px;
-            color: rgba(0, 0, 0, 0.5);
-            line-height: 15px;
+            width: 20px;
+            height: 20px;
+            font-size: 13px;
+            color: fade(@bc-menu-text, 55%);
+            line-height: 20px;
             text-align: center;
-            &:hover {
-                color: rgba(0, 0, 0, 1);
+            .dark & {
+                color: fade(@dark-bc-menu-text, 55%);
             }
-        }
-        .trash-icon, .merge-branch {
             &:hover {
-                color: rgba(0, 0, 0, 1);
+                color: @bc-menu-text;
+                .dark & {
+                    color: @dark-bc-menu-text;
+                }
             }
         }
-        &:hover {
+        &:hover, &.selected {
             .trash-icon, .merge-branch {
                 opacity: 1;
             }
         }
         .merge-branch {
-            right: 5px;
+            right: 34px;
+            .octicon {
+                font-size: 15px;
+            }
+        }
+        .trash-icon {
+            left: auto;
+            right: 8px;
         }
     }
     a {

src/extensions/default/Git/templates/git-branches-menu.html

@@ -12,11 +12,11 @@
     {{#branchList}}
     <li>
         <a class="git-branch-link" data-branch="{{name}}">
+            <span class="switch-branch">{{name}}</span>
+            <span class="merge-branch" title="{{Strings.MERGE_BRANCH}}"><i class="octicon octicon-git-merge"></i></span>
             {{#canDelete}}
-            <span class="trash-icon">&times;</span>
+            <span class="trash-icon" title="{{Strings.DELETE_LOCAL_BRANCH}}"><i class="fas fa-trash"></i></span>
             {{/canDelete}}
-            <span class="merge-branch"><i title="{{Strings.MERGE_BRANCH}}" class="octicon octicon-git-merge"></i></span>
-            <span class="switch-branch">{{name}}</span>
         </a>
     </li>
     {{/branchList}}