badge to bg

apps/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 class StatusTable extends React.PureComponent {
 
   renderPreInitializedLabel() {
-    return <span className="badge rounded-pill badge-default">――</span>;
+    return <span className="badge rounded-pill bg-default">――</span>;
   }
 
   renderConnectionStatusLabels() {
@@ -23,7 +23,7 @@ class StatusTable extends React.PureComponent {
     let connectionStatusLabel = null;
     if (!isConfigured) {
       connectionStatusLabel = (
-        <span className="badge rounded-pill badge-default">
+        <span className="badge rounded-pill bg-default">
           { t('full_text_search_management.connection_status_label_unconfigured') }
         </span>
       );

apps/app/src/components/Admin/UserManagement.tsx

@@ -90,7 +90,7 @@ const UserManagement = (props: UserManagementProps) => {
           onChange={() => clickHandler(status)}
         />
         <label className="custom-control-label" htmlFor={`c_${status}`}>
-          <span className={`badge rounded-pill badge-${statusColor} d-inline-block vt mt-1`}>
+          <span className={`badge rounded-pill bg-${statusColor} d-inline-block vt mt-1`}>
             {statusLabel}
           </span>
         </label>

apps/app/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss

@@ -96,11 +96,11 @@ $hsl-colors: (
 }
 
 @each $color, $value in $hsl-colors {
-  .badge-#{$color} {
+  .bg-#{$color} {
     @include hsl-badge.badge-variant($value);
   }
 
-  a.badge-#{$color}  {
+  a.bg-#{$color}  {
     @include hsl-badge.badge-variant($value);
   }
 }

apps/app/src/styles/theme/_reboot-bootstrap-theme-colors.scss

@@ -92,10 +92,10 @@
 }
 
 @each $color, $value in $theme-colors {
-  .badge-#{$color} {
+  .bg-#{$color} {
     @include badge-variant($value);
   }
-  a.badge-#{$color} {
+  a.bg-#{$color} {
     @include badge-variant($value);
   }
 }