[skip ci] Convert panel related class names to card

5 files changed, 13 insertions, 13 deletions

diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index ca7197e1e0f..268968b63b3 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -23,8 +23,8 @@ export default {
 </script>
 
 <template>
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ s__('Badges|Your badges') }}
       <span
         v-show="!isLoading"
@@ -33,19 +33,19 @@ export default {
     </div>
     <loading-icon
       v-show="isLoading"
-      class="panel-body"
+      class="card-body"
       size="2"
     />
     <div
       v-if="hasNoBadges"
-      class="panel-body"
+      class="card-body"
     >
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
     <div
       v-else
-      class="panel-body"
+      class="card-body"
     >
       <badge-list-row
         v-for="badge in badges"
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index c17877a276d..766039404ce 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -2,9 +2,9 @@ import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
 
 const PREVIEW_TEMPLATE = _template(`
-  <div class="panel panel-default">
-    <div class="panel-heading"><%- name %></div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header"><%- name %></div>
+    <div class="card-body">
       <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
     </div>
   </div>
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index a6dbe42a8f0..241627f9790 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -17,12 +17,12 @@ export default {
 <template>
   <div
     v-if="showPanels"
-    class="panel panel-default prometheus-panel"
+    class="card prometheus-panel"
   >
-    <div class="panel-heading">
+    <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="panel-body prometheus-graph-group">
+    <div class="card-body prometheus-graph-group">
       <slot></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index cf817ad9ca9..64283fa5f37 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -100,7 +100,7 @@ export default {
         : 'div';
     },
     wrapperClass() {
-      return this.isDiffDiscussion ? '' : 'panel panel-default';
+      return this.isDiffDiscussion ? '' : 'card';
     },
   },
   mounted() {
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index 0a60f4845b2..1a75fdd75db 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -31,7 +31,7 @@ export default class PrometheusMetrics {
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
-    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
     $currentPanelBody.toggleClass('hidden');
     if ($toggleBtn.hasClass('fa-caret-down')) {
       $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');