refactor: git markers styles in tabs

Author: devvaannsh

src/extensionsIntegrated/TabBar/main.js

@@ -163,7 +163,6 @@ define(function (require, exports, module) {
             title="${Phoenix.app.getDisplayPath(entry.path)}${gitStatus ? " (" + gitStatus + ")" : ""}">
             <div class="tab-icon"></div>
             <div class="tab-name"></div>
-            ${gitStatusLetter ? `<div class="tab-git-status">${gitStatusLetter}</div>` : ""}
             <div class="tab-close"><i class="fa-solid fa-times"></i></div>
         </div>`
         );

src/styles/Extn-TabBar.less

@@ -424,27 +424,26 @@
 }
 
 /* ------ for the git status markers -------------- */
-.tab-git-status {
-    font-size: 0.9rem;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 0.33rem;
-}
-
-.git-modified .tab-git-status {
+.tab.git-modified > .tab-icon:before {
+    content: "|";
     color: #E3B551;
+    position: absolute;
+    margin-left: -4px;
+    margin-bottom: 5px;
 }
 
-.dark .git-modified .tab-git-status {
+.dark .tab.git-modified > .tab-icon:before {
     color: #E3B551;
 }
 
-.git-new .tab-git-status {
+.tab.git-new > .tab-icon:before {
+    content: "|";
     color: #91CC41;
+    position: absolute;
+    margin-left: -4px;
+    margin-bottom: 5px;
 }
 
-.dark .git-new .tab-git-status {
+.dark .tab.git-new > .tab-icon:before {
     color: #91CC41;
 }