Limiting search-field styling to search only

- Re-organising search.scss
- Rely more on utility-classes instead of component classes
- Update relevant specs

2 files changed, 10 insertions, 10 deletions

diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index 6495eaedee7..bee4aff605f 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -2,10 +2,10 @@
   = hidden_field_tag :group_id, params[:group_id]
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
-.dropdown
-  %label{ for: "dashboard_search_group" }
+.dropdown.form-group.mb-lg-0.mx-lg-1
+  %label.d-block{ for: "dashboard_search_group" }
     = _("Group")
-  %button.form-control.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
+  %button.dropdown-menu-toggle.js-search-group-dropdown.mt-0{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
     %span.dropdown-toggle-text
       - if @group.present?
         = @group.name
@@ -18,10 +18,10 @@
     = dropdown_content
     = dropdown_loading
 
-.dropdown.project-filter
-  %label{ for: "dashboard_search_project" }
+.dropdown.project-filter.form-group.mb-lg-0.mx-lg-1
+  %label.d-block{ for: "dashboard_search_project" }
     = _("Project")
-  %button.form-control.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
+  %button.dropdown-menu-toggle.js-search-project-dropdown.mt-0{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
     %span.dropdown-toggle-text
       - if @project.present?
         = @project.full_name
diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml
index 46756390538..4c4f3e0298b 100644
--- a/app/views/search/_form.html.haml
+++ b/app/views/search/_form.html.haml
@@ -1,9 +1,9 @@
-= form_tag search_path, method: :get, class: 'js-search-form' do |f|
+= form_tag search_path, method: :get, class: 'search-page-form js-search-form' do |f|
   = hidden_field_tag :snippets, params[:snippets]
   = hidden_field_tag :scope, params[:scope]
 
-  .search-holder
-    .search-field-holder.form-group
+  .d-lg-flex.align-items-end
+    .search-field-holder.form-group.mr-lg-1.mb-lg-0
       %label{ for: "dashboard_search" }
         = _("What are you searching for?")
       .position-relative
@@ -16,5 +16,5 @@
     - unless params[:snippets].eql? 'true'
       = render 'filter'
     .d-flex-center.flex-column.flex-lg-row
-      = button_tag _("Search"), class: "btn btn-success btn-search form-control"
+      = button_tag _("Search"), class: "btn btn-success btn-search form-control mt-lg-0 ml-lg-1 align-self-end"
       = render_if_exists 'search/form_elasticsearch'