Cleanup css classes and styles

Use class and id syntax for button attributes

Use feature flag variable and shorthand if expression

Use shorthand if expression

Use a classname instead of tag

Simplify common rules

Use size variable

Move flex grow and shrink to utility classes

Extract redused classes

Remove unecessary styles

app/assets/stylesheets/pages/projects.scss

@@ -1476,10 +1476,16 @@ pre.light-well {
 
   .filtered-search {
     min-width: 30%;
-    flex: 1 1 0;
+    flex-basis: 0;
 
     .project-filter-form .project-filter-form-field {
-      padding-right: 8px;
+      padding-right: $gl-padding-8;
+    }
+
+    .filtered-search,
+    .filtered-search-nav,
+    .filtered-search-dropdown {
+      flex-basis: 0;
     }
 
     @include media-breakpoint-down(lg) {
@@ -1495,16 +1501,12 @@ pre.light-well {
     }
   }
 
-  .qa-reverse-sort {
-    max-width: 38px;
-  }
-
   .filtered-search-box {
     border-radius: 3px 0 0 3px;
   }
 
   .dropdown-menu-toggle {
-    margin-left: 8px;
+    margin-left: $gl-padding-8;
   }
 
   @include media-breakpoint-down(md) {
@@ -1514,27 +1516,15 @@ pre.light-well {
 
     .filtered-search-dropdown {
       width: 50%;
-    }
 
-    .filtered-search-dropdown .dropdown {
-      display: flex;
-      flex: 1 1 0;
-    }
-
-    .filtered-search-dropdown .dropdown button {
-      width: 100%;
+      .dropdown-menu-toggle {
+        width: 100%;
+      }
     }
   }
 
   @include media-breakpoint-down(xs) {
-    .dropdown-menu-toggle {
-      width: 100%;
-    }
-
-    .filtered-search,
-    .filtered-search-nav,
     .filtered-search-dropdown {
-      flex: 1 1 0;
       width: 100%;
     }
   }

app/views/dashboard/_projects_head.html.haml

@@ -14,7 +14,7 @@
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: feature_project_list_filter_bar ? "border-0" : "" }
+  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('border-0' if feature_project_list_filter_bar) }
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         = _("Your projects")

app/views/dashboard/projects/_nav.html.haml

@@ -4,7 +4,7 @@
 - is_explore_trending = project_tab_filter == :explore_trending
 - feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
 
-.nav-block{ class: Feature.enabled?(:project_list_filter_bar) ? "w-100" : "" }
+.nav-block{ class: ("w-100" if feature_project_list_filter_bar) }
   - if feature_project_list_filter_bar
     .btn-group.button-filter-group.d-flex.m-0.p-0
       - if project_tab_filter == :explore || is_explore_trending

app/views/explore/projects/_filter.html.haml

 - has_label = local_assigns.fetch(:has_label, false)
+- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
 
 - if current_user
-  .dropdown.js-project-filter-dropdown-wrap
+  .dropdown.js-project-filter-dropdown-wrap{ class: ('d-flex flex-grow-1 flex-shrink-1' if feature_project_list_filter_bar) }
     %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
       - unless has_label
         = icon('globe', class: 'mt-1')

app/views/shared/projects/_search_bar.html.haml

 - @sort ||= sort_value_latest_activity
 - project_tab_filter = local_assigns.fetch(:project_tab_filter, "")
+- flex_grow_and_shrink_xs = 'd-flex flex-xs-grow-1 flex-xs-shrink-1 flex-grow-0 flex-shrink-0'
 
 .filtered-search-block.row-content-block.bt-0
   .filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
     - unless project_tab_filter == :starred
-      .filtered-search-nav.d-flex.mb-2.mb-lg-0
+      .filtered-search-nav.mb-2.mb-lg-0{ class: flex_grow_and_shrink_xs }
         = render 'dashboard/projects/nav', project_tab_filter: project_tab_filter
-    .filtered-search.d-flex.w-100.mb-2.mb-lg-0{ class: project_tab_filter == :starred ? "extended-filtered-search-box ml-0 mb-2 mb-lg-0" : "ml-0 ml-sm-3" }
+    .filtered-search.d-flex.flex-grow-1.flex-shrink-1.w-100.mb-2.mb-lg-0.ml-0{ class: project_tab_filter == :starred ? "extended-filtered-search-box mb-2 mb-lg-0" : "ml-sm-3" }
       .btn-group.w-100{ role: "group" }
         .btn-group.w-100{ role: "group" }
           .filtered-search-box.m-0
@@ -14,12 +15,12 @@
               = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
         %button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' }
           = sprite_icon('search', size: 16, css_class: 'search-icon ')
-    .filtered-search-dropdown.d-flex.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown
+    .filtered-search-dropdown.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown{ class: flex_grow_and_shrink_xs }
       .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
         %span
           = _("Visibility")
       = render 'explore/projects/filter', has_label: true
-    .filtered-search-dropdown.d-flex.flex-row.align-items-center.m-sm-0#filtered-search-sorting-dropdown
+    .filtered-search-dropdown.flex-row.align-items-center.m-sm-0#filtered-search-sorting-dropdown{ class: flex_grow_and_shrink_xs }
       .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
         %span
           = _("Sort by")

app/views/shared/projects/_sort_dropdown.html.haml

@@ -3,7 +3,7 @@
 
 .btn-group.w-100{ role: "group" }
   .btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ role: "group" }
-    %button.dropdown-menu-toggle{ id: 'sort-projects-dropdown', type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+    %button#sort-projects-dropdown.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
       = toggle_text
       = icon('chevron-down')
     %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable