Fix review-bar-component height

Makes review bar component height the same as the
sidebar collapse button.

Also refactors review bar css to use gitlab-ui utilities
where possible.

Changelog: fixed

app/assets/javascripts/batch_comments/components/review_bar.vue

@@ -26,7 +26,10 @@ export default {
 </script>
 <template>
   <div v-show="draftsCount > 0">
-    <nav class="review-bar-component">
+    <nav
+      class="review-bar-component gl-bg-white gl-w-full gl-fixed gl-left-0 gl-bottom-0 gl-display-flex gl-align-items-center"
+      data-testid="review_bar_component"
+    >
       <div
         class="review-bar-content d-flex gl-justify-content-end"
         data-qa-selector="review_bar_content"

app/assets/stylesheets/components/batch_comments/review_bar.scss

 .review-bar-component {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: $white;
   z-index: $zindex-dropdown-menu;
-  padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
   border-top: 1px solid $border-color;
+  height: $toggle-sidebar-height;
   padding-left: $contextual-sidebar-width;
   padding-right: $gutter_collapsed_width;
   transition: padding $sidebar-transition-duration;

spec/features/merge_request/batch_comments_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe 'Merge request > Batch comments', :js do
     end
 
     it 'has review bar' do
-      expect(page).to have_css('.review-bar-component', visible: false)
+      expect(page).to have_selector('[data-testid="review_bar_component"]', visible: false)
     end
 
     it 'adds draft note' do
@@ -32,7 +32,7 @@ RSpec.describe 'Merge request > Batch comments', :js do
 
       expect(find('.draft-note-component')).to have_content('Line is wrong')
 
-      expect(page).to have_css('.review-bar-component')
+      expect(page).to have_selector('[data-testid="review_bar_component"]')
 
       expect(find('.review-bar-content .btn-confirm')).to have_content('1')
     end