SONAR-8300 add labels

4 files changed, 32 insertions, 18 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js b/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
index d13afa6e872..a2355a8ef4e 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
@@ -27,10 +27,13 @@ export default class FavoriteFilter extends React.Component {
     }
 
     return (
-      <div className="button-group">
-        <IndexLink to="/projects" className="button" activeClassName="button-active">All</IndexLink>
-        <Link to="/projects/favorite" className="button" activeClassName="button-active">Favorite</Link>
-      </div>
+        <div>
+          <span className="note spacer-right">Quick Filters:</span>
+          <div className="button-group">
+            <IndexLink to="/projects" className="button" activeClassName="button-active">All</IndexLink>
+            <Link to="/projects/favorite" className="button" activeClassName="button-active">Favorite</Link>
+          </div>
+        </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js b/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js
index 8e82cefd4c5..2e1410d8e0c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js
@@ -61,7 +61,12 @@ export default class FavoriteProjects extends React.Component {
             </div>
             <aside className="page-sidebar-fixed projects-sidebar">
               <PageHeaderContainer/>
-              <p className="note text-center">Filters are not available.</p>
+              <div className="search-navigator-facets-list">
+                <div className="projects-facets-header">
+                  <h3>Filters</h3>
+                </div>
+                <p className="note text-center">Filters are not available.</p>
+              </div>
             </aside>
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
index a5cd4c4b31f..1b4baa2f1c7 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
@@ -26,7 +26,6 @@ import QualityGateFilter from '../filters/QualityGateFilter';
 import ReliabilityFilter from '../filters/ReliabilityFilter';
 import SecurityFilter from '../filters/SecurityFilter';
 import MaintainabilityFilter from '../filters/MaintainabilityFilter';
-import { translate } from '../../../helpers/l10n';
 
 export default class PageSidebar extends React.Component {
   static propTypes = {
@@ -39,6 +38,18 @@ export default class PageSidebar extends React.Component {
 
     return (
         <div className="search-navigator-facets-list">
+          <div className="projects-facets-header clearfix">
+            {isFiltered && (
+                <div className="projects-facets-reset">
+                  <Link to="/projects" className="button button-red" onClick={this.props.closeAllFilters}>
+                    Clear All Filters
+                  </Link>
+                </div>
+            )}
+
+            <h3>Filters</h3>
+          </div>
+
           <QualityGateFilter query={this.props.query}/>
           <ReliabilityFilter query={this.props.query}/>
           <SecurityFilter query={this.props.query}/>
@@ -46,14 +57,6 @@ export default class PageSidebar extends React.Component {
           <CoverageFilter query={this.props.query}/>
           <DuplicationsFilter query={this.props.query}/>
           <SizeFilter query={this.props.query}/>
-
-          {isFiltered && (
-              <div className="projects-facets-reset">
-                <Link to="/projects" className="button button-red" onClick={this.props.closeAllFilters}>
-                  {translate('reset_verb')}
-                </Link>
-              </div>
-          )}
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index 38a02765bc2..7ee75b33a94 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -90,11 +90,14 @@
   transition: none;
 }
 
+.projects-facets-header {
+  margin-bottom: 10px;
+  padding: 10px 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+
 .projects-facets-reset {
-  margin-top: 20px;
-  padding: 10px;
-  border-top: 1px solid #e6e6e6;
-  text-align: center;
+  float: right;
 }
 
 .projects-facets-reset .button {