chage bg color

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

@@ -17,7 +17,7 @@ class StatusTable extends React.PureComponent {
     } = this.props;
 
     const errorOccuredLabel = isErrorOccuredOnSearchService
-      ? <span className="badge rounded-pill badge-danger ml-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
+      ? <span className="badge rounded-pill bg-danger ml-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
       : null;
 
     let connectionStatusLabel = null;
@@ -31,8 +31,8 @@ class StatusTable extends React.PureComponent {
     else {
       connectionStatusLabel = isConnected
         // eslint-disable-next-line max-len
-        ? <span data-testid="connection-status-badge-connected" className="badge rounded-pill badge-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
-        : <span className="badge rounded-pill badge-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
+        ? <span data-testid="connection-status-badge-connected" className="badge rounded-pill bg-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
+        : <span className="badge rounded-pill bg-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
     }
 
     return (
@@ -46,8 +46,8 @@ class StatusTable extends React.PureComponent {
     const { t, isNormalized } = this.props;
 
     return isNormalized
-      ? <span className="badge rounded-pill badge-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
-      : <span className="badge rounded-pill badge-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
+      ? <span className="badge rounded-pill bg-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
+      : <span className="badge rounded-pill bg-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
   }
 
   renderIndexInfoPanel(indexName, body = {}, aliases = []) {

apps/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -97,12 +97,12 @@ class GlobalNotificationList extends React.Component {
               <td>
                 <ul className="list-inline mb-0">
                   {notification.triggerEvents.includes('pageCreate') && (
-                    <li className="list-inline-item badge rounded-pill badge-success">
+                    <li className="list-inline-item badge rounded-pill bg-success">
                       <i className="icon-doc"></i> CREATE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageEdit') && (
-                    <li className="list-inline-item badge rounded-pill badge-warning">
+                    <li className="list-inline-item badge rounded-pill bg-warning">
                       <i className="icon-pencil"></i> EDIT
                     </li>
                   )}
@@ -112,12 +112,12 @@ class GlobalNotificationList extends React.Component {
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageDelete') && (
-                    <li className="list-inline-item badge rounded-pill badge-danger">
+                    <li className="list-inline-item badge rounded-pill bg-danger">
                       <i className="icon-fire"></i> DELETE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageLike') && (
-                    <li className="list-inline-item badge rounded-pill badge-info">
+                    <li className="list-inline-item badge rounded-pill bg-info">
                       <i className="fa fa-heart-o"></i> LIKE
                     </li>
                   )}

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -237,7 +237,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.CREATE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.CREATE)}
               >
-                <span className="badge rounded-pill badge-success">
+                <span className="badge rounded-pill bg-success">
                   <i className="icon-doc mr-1" /> CREATE
                 </span>
               </TriggerEventCheckBox>
@@ -249,7 +249,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.EDIT)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.EDIT)}
               >
-                <span className="badge rounded-pill badge-warning">
+                <span className="badge rounded-pill bg-warning">
                   <i className="icon-pencil mr-1" />EDIT
                 </span>
               </TriggerEventCheckBox>
@@ -273,7 +273,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.DELETE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.DELETE)}
               >
-                <span className="badge rounded-pill badge-danger">
+                <span className="badge rounded-pill bg-danger">
                   <i className="icon-fire mr-1" />DELETE
                 </span>
               </TriggerEventCheckBox>
@@ -285,7 +285,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.LIKE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.LIKE)}
               >
-                <span className="badge rounded-pill badge-info">
+                <span className="badge rounded-pill bg-info">
                   <i className="fa fa-heart-o mr-1" />LIKE
                 </span>
               </TriggerEventCheckBox>

apps/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -31,7 +31,7 @@ const Badge = ({ isEnabled }) => {
   const { t } = useTranslation('admin');
 
   return isEnabled
-    ? <span className="badge badge-success">{t('external_notification.enabled')}</span>
+    ? <span className="badge bg-success">{t('external_notification.enabled')}</span>
     : <span className="badge bg-primary">{t('external_notification.disabled')}</span>;
 };
 

apps/app/src/components/Admin/Security/GitHubSecuritySettingContents.jsx

@@ -71,7 +71,7 @@ class GitHubSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('github') && isGitHubEnabled)
-              && <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

apps/app/src/components/Admin/Security/GoogleSecuritySettingContents.jsx

@@ -69,7 +69,7 @@ class GoogleSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('google') && isGoogleEnabled)
-              && <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

apps/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -73,7 +73,7 @@ class LdapSecuritySettingContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('ldap') && isLdapEnabled)
-              && <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

apps/app/src/components/Admin/Security/LocalSecuritySettingContents.jsx

@@ -78,7 +78,7 @@ class LocalSecuritySettingContents extends React.Component {
               </label>
             </div>
             {!adminGeneralSecurityContainer.state.setupStrategies.includes('local') && isLocalEnabled && (
-              <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>
+              <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>
             )}
           </div>
         </div>

apps/app/src/components/Admin/Security/OidcSecuritySettingContents.jsx

@@ -63,7 +63,7 @@ class OidcSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('oidc') && isOidcEnabled)
-              && <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -80,7 +80,7 @@ class SamlSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('saml') && isSamlEnabled)
-              && <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

apps/app/src/components/Admin/Security/ShareLinkSetting.tsx

@@ -129,7 +129,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
             </label>
           </div>
           {!setupStrategies.includes('local') && disableLinkSharing && (
-            <div className="badge badge-warning">{t('security_settings.setup_is_not_yet_complete')}</div>
+            <div className="badge bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>
           )}
         </div>
       </div>

apps/app/src/components/Admin/SlackIntegration/BotTypeCard.jsx

@@ -54,7 +54,7 @@ const BotTypeCard = (props) => {
           {/*  A recommended badge is shown on official bot card, supplementary names are shown on Custom bot cards   */}
           { isBotTypeOfficial
             ? (
-              <span className="badge badge-info mr-2">
+              <span className="badge bg-info mr-2">
                 {t('admin:slack_integration.selecting_bot_types.recommended')}
               </span>
             ) : (

apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx

@@ -158,7 +158,7 @@ export const UserGroupTable: FC<Props> = (props: Props) => {
                 <td>
                   <ul className="list-inline">
                     {users != null && users.map((user) => {
-                      return <li key={user._id} className="list-inline-item badge rounded-pill badge-warning">{user.username}</li>;
+                      return <li key={user._id} className="list-inline-item badge rounded-pill bg-warning">{user.username}</li>;
                     })}
                   </ul>
                 </td>
@@ -166,7 +166,7 @@ export const UserGroupTable: FC<Props> = (props: Props) => {
                   <ul className="list-inline">
                     {groupIdToChildGroupsMap[group._id] != null && groupIdToChildGroupsMap[group._id].map((group) => {
                       return (
-                        <li key={group._id} className="list-inline-item badge badge-success">
+                        <li key={group._id} className="list-inline-item badge bg-success">
                           {props.isAclEnabled
                             ? (
                               <Link href={`/admin/user-group-detail/${group._id}`}>{group.name}</Link>

apps/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -84,8 +84,8 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                 <td><strong>{ea.user.username}</strong></td>
                 <td>
                   {ea.user.password
-                    ? (<span className="badge badge-info">{t('user_management.set')}</span>)
-                    : (<span className="badge badge-warning">{t('user_management.unset')}</span>)
+                    ? (<span className="badge bg-info">{t('user_management.set')}</span>)
+                    : (<span className="badge bg-warning">{t('user_management.unset')}</span>)
                   }
                 </td>
                 <td>{dateFnsFormat(new Date(ea.createdAt), 'yyyy-MM-dd')}</td>

apps/app/src/components/Admin/Users/UserTable.tsx

@@ -22,24 +22,24 @@ const UserTable = (props: UserTableProps) => {
   const { adminUsersContainer } = props;
 
   const getUserStatusLabel = (userStatus: number) => {
-    let additionalClassName = 'badge-info';
+    let additionalClassName = 'bg-info';
     let text = 'Approval Pending';
 
     switch (userStatus) {
       case 1:
-        additionalClassName = 'badge-info';
+        additionalClassName = 'bg-info';
         text = 'Approval Pending';
         break;
       case 2:
-        additionalClassName = 'badge-success';
+        additionalClassName = 'bg-success';
         text = 'Active';
         break;
       case 3:
-        additionalClassName = 'badge-warning';
+        additionalClassName = 'bg-warning';
         text = 'Suspended';
         break;
       case 4:
-        additionalClassName = 'badge-danger';
+        additionalClassName = 'bg-danger';
         text = 'Deleted';
         break;
       case 5:
@@ -158,7 +158,7 @@ const UserTable = (props: UserTableProps) => {
                     </span>
                   )}
                   {(user.readOnly) && (
-                    <span className="badge badge-light rounded-pill ml-2">
+                    <span className="badge bg-light rounded-pill ml-2">
                       {t('admin:user_management.user_table.read_only')}
                     </span>
                   )}

apps/app/src/components/Common/CountBadge.tsx

@@ -10,7 +10,7 @@ const CountBadge: FC<CountProps> = (props:CountProps) => {
 
 
   return (
-    <span className="grw-count-badge px-2 badge rounded-pill badge-light">
+    <span className="grw-count-badge px-2 badge rounded-pill bg-light">
       { count == null && <span className="text-muted">―</span> }
       { count != null && count + offset }
     </span>

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -75,7 +75,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
 
   let badge;
   if (inAppNotificationUnreadStatusCount != null && inAppNotificationUnreadStatusCount > 0) {
-    badge = <span className="badge rounded-pill badge-danger grw-notification-badge">{inAppNotificationUnreadStatusCount}</span>;
+    badge = <span className="badge rounded-pill bg-danger grw-notification-badge">{inAppNotificationUnreadStatusCount}</span>;
   }
   else {
     badge = '';

apps/app/src/components/Layout/Admin.module.scss

@@ -101,7 +101,7 @@ $slack-work-space-name-card-border: #efc1f6;
     .supplementary-bot-name {
       font-size: 1rem;
     }
-    .badge-info {
+    .bg-info {
       font-size: 0.6rem;
     }
     .admin-bot-card {

apps/app/src/components/PageHistory/Revision.tsx

@@ -64,7 +64,7 @@ export const Revision = (props: RevisionProps): JSX.Element => {
         <div className="ml-2">
           <div className="revision-history-author mb-1">
             <strong><Username user={author}></Username></strong>
-            { isLatestRevision && <span className="badge badge-info ml-2">Latest</span> }
+            { isLatestRevision && <span className="badge bg-info ml-2">Latest</span> }
           </div>
           <div className="mb-1">
             <UserDate dateTime={revision.createdAt} />

packages/ui/src/components/Attachment.tsx

@@ -37,7 +37,7 @@ export const Attachment = (props: AttachmentProps): JSX.Element => {
     )
     : '';
   const fileType = <span className="attachment-filetype badge rounded-pill bg-primary">{attachment.fileFormat}</span>;
-  const fileInUse = (inUse) ? <span className="attachment-in-use badge rounded-pill badge-info">In Use</span> : '';
+  const fileInUse = (inUse) ? <span className="attachment-in-use badge rounded-pill bg-info">In Use</span> : '';
 
   return (
     <div className="attachment mb-2">

packages/ui/src/components/PagePath/PageListMeta.tsx

@@ -70,13 +70,13 @@ export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) =>
   // top check
   let topLabel;
   if (isTopPage(page.path)) {
-    topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-2' : ''} top-label`}>TOP</span>;
+    topLabel = <span className={`badge bg-info ${shouldSpaceOutIcon ? 'mr-2' : ''} top-label`}>TOP</span>;
   }
 
   // template check
   let templateLabel;
   if (checkTemplatePath(page.path)) {
-    templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-2' : ''}`}>TMPL</span>;
+    templateLabel = <span className={`badge bg-info ${shouldSpaceOutIcon ? 'mr-2' : ''}`}>TMPL</span>;
   }
 
   let commentCount;