change to bg indigo and bg pink

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

@@ -107,7 +107,7 @@ class GlobalNotificationList extends React.Component {
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageMove') && (
-                    <li className="list-inline-item badge rounded-pill badge-pink">
+                    <li className="list-inline-item badge rounded-pill bg-pink">
                       <i className="icon-action-redo"></i> MOVE
                     </li>
                   )}

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

@@ -261,7 +261,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.MOVE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.MOVE)}
               >
-                <span className="badge rounded-pill badge-pink">
+                <span className="badge rounded-pill bg-pink">
                   <i className="icon-action-redo mr-1" />MOVE
                 </span>
               </TriggerEventCheckBox>

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

@@ -43,7 +43,7 @@ const UserTable = (props: UserTableProps) => {
         text = 'Deleted';
         break;
       case 5:
-        additionalClassName = 'badge-pink';
+        additionalClassName = 'bg-pink';
         text = 'Invited';
         break;
     }
@@ -153,7 +153,7 @@ const UserTable = (props: UserTableProps) => {
                 <td>
                   {getUserStatusLabel(user.status)}
                   {(user.admin) && (
-                    <span className="badge badge-indigo rounded-pill ml-2">
+                    <span className="badge bg-indigo rounded-pill ml-2">
                       {t('admin:user_management.user_table.administrator')}
                     </span>
                   )}