bg secondary

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 rounded-pill badge-secondary ml-2">
+        <span className="badge rounded-pill bg-primary ml-2">
           {`${availableActions.length} / ${AllSupportedActions.length}`}
         </span>
         <a

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

@@ -122,7 +122,7 @@ class GlobalNotificationList extends React.Component {
                     </li>
                   )}
                   {notification.triggerEvents.includes('comment') && (
-                    <li className="list-inline-item badge rounded-pill badge-secondary">
+                    <li className="list-inline-item badge rounded-pill bg-primary">
                       <i className="icon-fw icon-bubble"></i> POST
                     </li>
                   )}

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

@@ -297,7 +297,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.POST)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.POST)}
               >
-                <span className="badge rounded-pill badge-secondary">
+                <span className="badge rounded-pill bg-primary">
                   <i className="icon-bubble mr-1" />POST
                 </span>
               </TriggerEventCheckBox>

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

@@ -32,13 +32,13 @@ const Badge = ({ isEnabled }) => {
 
   return isEnabled
     ? <span className="badge badge-success">{t('external_notification.enabled')}</span>
-    : <span className="badge badge-secondary">{t('external_notification.disabled')}</span>;
+    : <span className="badge bg-primary">{t('external_notification.disabled')}</span>;
 };
 
 const SkeletonListItem = () => (
   <li className="list-group-item">
     <h4 className="mb-2">
-      <span className="badge badge-secondary">――</span>
+      <span className="badge bg-primary">――</span>
       <span className="ml-2">...</span>
     </h4>
   </li>

apps/app/src/components/Page/RenderTagLabels.tsx

@@ -28,7 +28,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
     <>
       {tags.map((tag) => {
         return (
-          <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge badge-secondary mr-2">
+          <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge bg-primary mr-2">
             {tag}
           </a>
         );

apps/app/src/components/PageEditorByHackmd.tsx

@@ -385,7 +385,7 @@ export const PageEditorByHackmd = (): JSX.Element => {
                 {t('hackmd.based_on_revision')} 
                 { pageData != null && (
                   <Link href={urljoin(returnPathForURL(pageData.path, pageData._id), `?revisionId=${revisionIdHackmdSynced}`)} prefetch={false}>
-                    <span className="badge badge-secondary">{revisionIdHackmdSynced?.substr(-8)}</span>
+                    <span className="badge bg-primary">{revisionIdHackmdSynced?.substr(-8)}</span>
                   </Link>
                 )}
                 <div className="text-center mt-3">

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -71,7 +71,7 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
       <Link
         key={tag.name}
         href={`/_search?q=tag:${tag.name}`}
-        className="grw-tag-label badge badge-secondary mr-2 small"
+        className="grw-tag-label badge bg-primary mr-2 small"
         prefetch={false}
       >
         {tag.name}

apps/app/src/components/TagCloudBox.tsx

@@ -33,7 +33,7 @@ const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
       <Link
         key={tag.name}
         href={`${url.pathname}${url.search}`}
-        className="grw-tag-label badge badge-secondary mr-2"
+        className="grw-tag-label badge bg-primary mr-2"
         prefetch={false}
       >
         {tagNameFormat}

apps/app/src/components/TagList.tsx

@@ -44,7 +44,7 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
           prefetch={false}
         >
           <div className="text-truncate list-tag-name">{tag.name}</div>
-          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{tag.count}</div>
+          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge bg-primary text-white">{tag.count}</div>
         </Link>
       );
     });

packages/ui/src/components/Attachment.tsx

@@ -36,7 +36,7 @@ export const Attachment = (props: AttachmentProps): JSX.Element => {
       </a>
     )
     : '';
-  const fileType = <span className="attachment-filetype badge rounded-pill badge-secondary">{attachment.fileFormat}</span>;
+  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> : '';
 
   return (