Refactored sidebar quiet dark buttons because we have more than one now (plus Brackets Git extension can also benefit from this).

Author: larz0

src/extensions/default/RecentProjects/main.js

@@ -458,7 +458,7 @@ define(function (require, exports, module) {
 
     AppInit.htmlReady(function () {
         $("#project-title")
-            .wrap("<div id='project-dropdown-toggle'></div>")
+            .wrap("<div id='project-dropdown-toggle' class='btn-alt-quiet'></div>")
             .after("<span class='dropdown-arrow'></span>");
 
         var cmenuAdapter = {

src/extensions/default/RecentProjects/styles/styles.css

@@ -1,8 +1,3 @@
-#project-dropdown {
-    border-radius: 3px;
-    box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
-    border: none;
-}
 .dropdown-arrow {
     display: inline-block;
     width: 7px;
@@ -30,7 +25,6 @@
 }
 
 #project-dropdown-toggle {
-    border: 1px solid transparent;
     display: inline-block;
     /* adjust margins to keep position #project-title position stable after extension is loaded */
     margin: -3px 0px -2px -6px;
@@ -45,21 +39,6 @@
     line-height: 21px;
 }
 
-#project-dropdown-toggle:hover {
-    border-radius: 3px;
-    border: 1px solid #2d2f31;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
-    text-decoration: none;
-}
-
-#project-dropdown-toggle:active {
-    background: #404141;
-    border-radius: 3px;
-    border: 1px solid #2d2f31;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,0.23);
-    text-decoration: none;
-}
-
 #project-dropdown-toggle:hover .dropdown-arrow {
     background-image: url("down-arrow.svg");
 }

src/htmlContent/main-view.html

@@ -42,7 +42,7 @@
     <div class="main-view">
         <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-forceleft=".content">
             <div id="working-set-header">{{WORKING_FILES}}
-                <div id="working-set-option-btn"></div>
+                <div id="working-set-option-btn" class="btn-alt-quiet"></div>
             </div>
             <div id="open-files-container">
                 <!-- This will contain runtime-generated <li>'s for each file in the working set -->

src/styles/brackets.less

@@ -527,19 +527,13 @@ a, img {
     position: absolute;
     right: 4px;
     top: 7px;
-    border: 1px solid transparent;
     padding: 4px 6px;
     .sprite-icon(0, 0, 13px, 13px, "images/topcoat-settings-13.svg");
     background-position:center;
     opacity: 0.8;
 }
 
 #working-set-option-btn:hover {
-    
-    border-radius: 3px;
-    border: 1px solid #2d2f31;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
-    text-decoration: none;
     opacity: 1;
 }
 

src/styles/brackets_colors.less

@@ -83,10 +83,12 @@
 @tc-gray-component-focused-border: #2893ef;
 @tc-gray-component-error-border:   #fa689d;
 @tc-gray-component-triangle:       #878787;
+@tc-alt-component-border:          #2d2f31;
 
 @tc-button-background:             #e5e9e9;
 @tc-button-highlight:              inset 0 1px 0 #f3f3f3;
 @tc-button-down-background:        #d3d7d7;
+@tc-button-alt-down-background:    #404141;
 @tc-button-down-shadow:            inset 0 1px 0 rgba(0, 0, 0, 0.06);
 @tc-inline-border-radius:          2px;
 @tc-control-border-radius:         3px;

src/styles/brackets_patterns_override.less

@@ -1144,6 +1144,21 @@ input[type="color"],
     }
 }
 
+.btn-alt-quiet {
+    border: 1px solid transparent;
+    border-radius: @tc-control-border-radius;
+    text-decoration: none;
+    &:hover {
+        border: 1px solid @tc-alt-component-border;
+        box-shadow: inset 0 1px 0 @tc-sidebar-selection-highlight;
+    }
+    &:active {
+        background: @tc-button-alt-down-background;
+        border: 1px solid @tc-alt-component-border;
+        box-shadow: @tc-call-to-action-down-shadow;
+    }
+}
+
 .btn-mini {
     padding: 2px 6px;
     font-size: 11px;