chore: move line:ch status to left of statusbar. move git icon out of statusbar

We decided to use bottom of right toolbar to toggle bottom panels. Icons on status bar was not
preferred by users we surveyed. statusbar real estate was also less, so would have needed to hide
icons or provided drop ups with confusing ux if we placed icons on statusbar. Changed colors
 of icons to match other toolbar icons. layout fixes for toolbar selected icons.

Author: abose

src/editor/EditorStatusBar.js

@@ -630,7 +630,5 @@ define(function (require, exports, module) {
         LanguageManager.on("languageAdded languageModified", _populateLanguageDropdown);
         _onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
         StatusBar.show();
-        $("#status-menu").attr("title", Strings.STATUSBAR_SHOW_PANELS);
-        $(".git-status-icon").attr("title", Strings.STATUSBAR_SHOW_GIT);
     });
 });

src/index.html

@@ -860,14 +860,9 @@
         </div>
         <div id="status-bar" class="statusbar no-focus">
             <div id="status-phoenix">
-                <div id="status-menu" class="forced-hidden">
-                    <i class="fa-solid fa-chevron-up"></i>
-                </div>
-                <div class="status-tab forced-hidden">
-                    <i class="fa-solid fa-terminal"></i>
-                </div>
-                <div class="status-tab forced-hidden git-status-icon">
-                    <i class="fa-solid fa-code-branch"></i>
+                <div id="status-info" class="info" >
+                    <div id="status-cursor"></div>
+                    <div id="status-file"></div>
                 </div>
             </div>
             <div id="status-indicators" class="indicators">
@@ -880,10 +875,6 @@
                 <div id="status-language"></div>
                 <div id="status-encoding"></div>
                 <div id="status-overwrite"></div>
-                <div id="status-info" class="info" >
-                    <div id="status-cursor"></div>
-                    <div id="status-file"></div>
-                </div>
                 <div id="status-tasks" class="forced-hidden global-indicator">
                     <div class="spinner spin"></div>
                 </div>

src/nls/root/strings.js

@@ -425,8 +425,6 @@ define({
     "STATUSBAR_TASKS_PAUSE": "Pause",
     "STATUSBAR_TASKS_STOP": "Stop",
     "STATUSBAR_TASKS_RESTART": "Restart",
-    "STATUSBAR_SHOW_PANELS": "Show Panels",
-    "STATUSBAR_SHOW_GIT": "Git Panel",
 
     // CodeInspection: errors/warnings
     "ERRORS_NO_FILE": "No File Open",

src/styles/brackets.less

@@ -368,7 +368,7 @@ a, img {
     /* dropdown button styling */
     .btn-status-bar {
         border: 0;
-        background-color: inherit;
+        background-color: unset;
         color: inherit;
         font: inherit;
         height: inherit;
@@ -406,23 +406,31 @@ a, img {
         border-right: 1px solid @bc-panel-border;
 
         .dark & {
-            border-left: unset;
             border-right: 1px solid @dark-bc-panel-separator;
         }
         float: left;
-        padding: unset;
-        width: 35px;
         text-align: center;
     }
+    > div:hover{
+        background-color: @bc-status-btn-hover;
+        .dark & {
+            background-color: @dark-bc-status-btn-hover;
+        }
+        cursor: pointer;
+    }
+    > div:only-child {
+        border-right: unset;
+    }
 }
 
-
-#status-menu:hover, .status-tab:hover{
-    background-color: @bc-status-btn-hover;
-    .dark & {
-        background-color: @dark-bc-status-btn-hover;
+#status-indicators {
+    > div:hover{
+        background-color: @bc-status-btn-hover;
+        .dark & {
+            background-color: @dark-bc-status-btn-hover;
+        }
+        cursor: pointer;
     }
-    cursor: pointer;
 }
 
 #status-indent > * {
@@ -472,7 +480,6 @@ a, img {
 }
 
 #status-overwrite {
-    transition: background-color 3s;
     background-color: rgba(255, 255, 255, 0);
     color: @bc-text;
     cursor: pointer;
@@ -621,8 +628,24 @@ a, img {
 }
 
 #status-overwrite.flash {
-    transition: background-color 1s;
-    background-color: rgb(120, 178, 242);
+    animation: brightenFade 2s ease-in-out;
+}
+
+@keyframes brightenFade {
+    0% {
+        background-color: transparent;
+    }
+    15% {
+        background-color: rgb(120, 178, 242);
+        color: black;
+    }
+    30% {
+        background-color: rgb(120, 178, 242);
+        color: black;
+    }
+    100% {
+        background-color: transparent;
+    }
 }
 
 

src/styles/brackets_core_ui_variables.less

@@ -224,7 +224,7 @@
 @dark-bc-panel-bg-text-highlight:    #000;
 @dark-bc-panel-border:               #000;
 @dark-bc-panel-separator:            #343434;
-@dark-bc-status-btn-hover:           rgba(255, 255, 255, 0.05);
+@dark-bc-status-btn-hover:           rgba(255, 255, 255, 0.04);
 
 // Default Button
 @dark-bc-btn-bg:                     #3f3f3f;

src/styles/brackets_patterns_override.less

@@ -247,8 +247,8 @@ a:focus {
 
     .selected-button{
         background-color: @plugin-panel-bg !important;
-        margin-left: 2px !important;
-        margin-right: 0px !important;
+        margin-left: 3px !important;
+        margin-right: 0 !important;
     }
 
     .buttons,
@@ -325,7 +325,7 @@ a:focus {
         text-overflow: ellipsis;
     }
 
-    .buttons {
+    .buttons, .bottom-buttons {
         margin: @toolbar-top-gap-px 0 0 4px;
 
         span, a {