badge-pill to rounded-pill

apps/app/src/components/Admin/AuditLog/AuditLogSettings.tsx

@@ -37,7 +37,7 @@ export const AuditLogSettings: FC = () => {
 
       <h4 className="mt-4">
         {t('admin:audit_log_management.available_action_list')}
-        <span className="badge badge-pill badge-secondary ml-2">
+        <span className="badge rounded-pill badge-secondary ml-2">
           {`${availableActions.length} / ${AllSupportedActions.length}`}
         </span>
         <a

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 badge-pill badge-default">――</span>;
+    return <span className="badge rounded-pill badge-default">――</span>;
   }
 
   renderConnectionStatusLabels() {
@@ -17,18 +17,18 @@ class StatusTable extends React.PureComponent {
     } = this.props;
 
     const errorOccuredLabel = isErrorOccuredOnSearchService
-      ? <span className="badge badge-pill badge-danger ml-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
+      ? <span className="badge rounded-pill badge-danger ml-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
       : null;
 
     let connectionStatusLabel = null;
     if (!isConfigured) {
-      connectionStatusLabel = <span className="badge badge-pill badge-default">{ t('full_text_search_management.connection_status_label_unconfigured') }</span>;
+      connectionStatusLabel = <span className="badge rounded-pill badge-default">{ t('full_text_search_management.connection_status_label_unconfigured') }</span>;
     }
     else {
       connectionStatusLabel = isConnected
         // eslint-disable-next-line max-len
-        ? <span data-testid="connection-status-badge-connected" className="badge badge-pill badge-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
-        : <span className="badge badge-pill badge-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
+        ? <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>;
     }
 
     return (
@@ -42,8 +42,8 @@ class StatusTable extends React.PureComponent {
     const { t, isNormalized } = this.props;
 
     return isNormalized
-      ? <span className="badge badge-pill badge-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
-      : <span className="badge badge-pill badge-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
+      ? <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>;
   }
 
   renderIndexInfoPanel(indexName, body = {}, aliases = []) {
@@ -51,7 +51,7 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge badge-pill badge-primary mr-2">
+        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill badge-primary mr-2">
           <i className="icon-tag"></i> {aliasName}
         </span>
       );

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

@@ -97,32 +97,32 @@ class GlobalNotificationList extends React.Component {
               <td>
                 <ul className="list-inline mb-0">
                   {notification.triggerEvents.includes('pageCreate') && (
-                    <li className="list-inline-item badge badge-pill badge-success">
+                    <li className="list-inline-item badge rounded-pill badge-success">
                       <i className="icon-doc"></i> CREATE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageEdit') && (
-                    <li className="list-inline-item badge badge-pill badge-warning">
+                    <li className="list-inline-item badge rounded-pill badge-warning">
                       <i className="icon-pencil"></i> EDIT
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageMove') && (
-                    <li className="list-inline-item badge badge-pill badge-pink">
+                    <li className="list-inline-item badge rounded-pill badge-pink">
                       <i className="icon-action-redo"></i> MOVE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageDelete') && (
-                    <li className="list-inline-item badge badge-pill badge-danger">
+                    <li className="list-inline-item badge rounded-pill badge-danger">
                       <i className="icon-fire"></i> DELETE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageLike') && (
-                    <li className="list-inline-item badge badge-pill badge-info">
+                    <li className="list-inline-item badge rounded-pill badge-info">
                       <i className="fa fa-heart-o"></i> LIKE
                     </li>
                   )}
                   {notification.triggerEvents.includes('comment') && (
-                    <li className="list-inline-item badge badge-pill badge-secondary">
+                    <li className="list-inline-item badge rounded-pill badge-secondary">
                       <i className="icon-fw icon-bubble"></i> POST
                     </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 badge-pill badge-success">
+                <span className="badge rounded-pill badge-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 badge-pill badge-warning">
+                <span className="badge rounded-pill badge-warning">
                   <i className="icon-pencil mr-1" />EDIT
                 </span>
               </TriggerEventCheckBox>
@@ -261,7 +261,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.MOVE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.MOVE)}
               >
-                <span className="badge badge-pill badge-pink">
+                <span className="badge rounded-pill badge-pink">
                   <i className="icon-action-redo mr-1" />MOVE
                 </span>
               </TriggerEventCheckBox>
@@ -273,7 +273,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.DELETE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.DELETE)}
               >
-                <span className="badge badge-pill badge-danger">
+                <span className="badge rounded-pill badge-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 badge-pill badge-info">
+                <span className="badge rounded-pill badge-info">
                   <i className="fa fa-heart-o mr-1" />LIKE
                 </span>
               </TriggerEventCheckBox>
@@ -297,7 +297,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.POST)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.POST)}
               >
-                <span className="badge badge-pill badge-secondary">
+                <span className="badge rounded-pill badge-secondary">
                   <i className="icon-bubble mr-1" />POST
                 </span>
               </TriggerEventCheckBox>

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 badge-pill badge-warning">{user.username}</li>;
+                      return <li key={user._id} className="list-inline-item badge rounded-pill badge-warning">{user.username}</li>;
                     })}
                   </ul>
                 </td>

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 badge-pill badge-${statusColor} d-inline-block vt mt-1`}>
+          <span className={`badge rounded-pill badge-${statusColor} d-inline-block vt mt-1`}>
             {statusLabel}
           </span>
         </label>

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

@@ -49,7 +49,7 @@ const UserTable = (props: UserTableProps) => {
     }
 
     return (
-      <span className={`badge badge-pill ${additionalClassName}`}>
+      <span className={`badge rounded-pill ${additionalClassName}`}>
         {text}
       </span>
     );
@@ -153,12 +153,12 @@ const UserTable = (props: UserTableProps) => {
                 <td>
                   {getUserStatusLabel(user.status)}
                   {(user.admin) && (
-                    <span className="badge badge-indigo badge-pill ml-2">
+                    <span className="badge badge-indigo rounded-pill ml-2">
                       {t('admin:user_management.user_table.administrator')}
                     </span>
                   )}
                   {(user.readOnly) && (
-                    <span className="badge badge-light badge-pill ml-2">
+                    <span className="badge badge-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 badge-pill badge-light">
+    <span className="grw-count-badge px-2 badge rounded-pill badge-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 badge-pill badge-danger grw-notification-badge">{inAppNotificationUnreadStatusCount}</span>;
+    badge = <span className="badge rounded-pill badge-danger grw-notification-badge">{inAppNotificationUnreadStatusCount}</span>;
   }
   else {
     badge = '';

packages/ui/src/components/Attachment.tsx

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