fix: close button in pane header not appearing

Author: devvaannsh

src/styles/brackets.less

@@ -906,25 +906,25 @@ a, img {
         &-close-btn {
             position: relative;
             display: none;
-            height: 16px;
-            width: 16px;
+            height: 18px;
+            width: 18px;
             float: right;
             margin-top: -2px;
 
-            &:before {
+            i {
                 color: rgba(0, 0, 0, 0.5);
             }
 
-            &:hover:before {
+            &:hover i {
                 color: rgba(0, 0, 0, 0.8);
             }
 
             .dark & {
-                &:before {
+                i {
                     color: rgba(255, 255, 255, 0.5);
                 }
 
-                &:hover:before {
+                &:hover i {
                     color: rgba(255, 255, 255, 0.8);
                 }
             }

src/view/Pane.js

@@ -250,6 +250,8 @@ define(function (require, exports, module) {
             $headerCloseBtn = $header.find(".pane-header-close-btn"),
             $content = $el.find(".pane-content");
 
+        $headerCloseBtn.html("<i class='fa-solid fa-times'></i>");
+
         $el.on("focusin.pane", function (e) {
             self._lastFocusedElement = e.target;
         });