Merge branch '334306-use-gl-badge-for-ide-activity-bar' into 'master'

Use gl-badge for web IDE activity bar

See merge request gitlab-org/gitlab!78965

app/assets/javascripts/ide/components/activity_bar.vue

 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { leftSidebarViews } from '../constants';
@@ -7,6 +7,7 @@ import { leftSidebarViews } from '../constants';
 export default {
   components: {
     GlIcon,
+    GlBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -82,9 +83,13 @@ export default {
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
           <gl-icon name="commit" />
-          <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill">
+          <gl-badge
+            v-if="stagedFiles.length"
+            class="gl-absolute gl-px-2 gl-top-3 gl-right-3 gl-font-weight-bold gl-bg-gray-900! gl-text-white!"
+            size="sm"
+          >
             {{ stagedFiles.length }}
-          </div>
+          </gl-badge>
         </button>
       </li>
     </ul>

app/assets/stylesheets/page_bundles/ide.scss

@@ -630,7 +630,6 @@ $ide-commit-header-height: 48px;
       width: 1px;
       background: var(--ide-highlight-background, $white);
     }
-
   }
 
   &.is-right {
@@ -642,17 +641,6 @@ $ide-commit-header-height: 48px;
       left: -1px;
     }
   }
-
-  .ide-commit-badge {
-    background-color: var(--ide-highlight-accent, $almost-black) !important;
-    color: var(--ide-highlight-background, $white) !important;
-    position: absolute;
-    left: 38px;
-    top: $gl-padding-8;
-    font-size: $gl-font-size-12;
-    padding: 2px $gl-padding-4;
-    font-weight: $gl-font-weight-bold !important;
-  }
 }
 
 .ide-activity-bar {