component classes v2

[lemmy-ui.git] / src / shared / components / common / badges.tsx

diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 49c0888b0579ca27d661c3d9c472546f2913335c..17ae53fb03da34f32ec12a1f969bc77a85152ba1 100644 (file)
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -26,9 +26,9 @@ const isSiteAggregates = (
 
 export const Badges = ({ counts, communityId }: BadgesProps) => {
   return (
-    <ul className="my-1 list-inline">
+    <ul className="badges my-1 list-inline">
       <li
-        className="list-inline-item badge badge-secondary pointer"
+        className="list-inline-item badge text-bg-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_day", {
           count: Number(counts.users_active_day),
           formattedCount: numToSI(counts.users_active_day),
@@ -41,7 +41,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
         / {i18n.t("day")}
       </li>
       <li
-        className="list-inline-item badge badge-secondary pointer"
+        className="list-inline-item badge text-bg-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_week", {
           count: Number(counts.users_active_week),
           formattedCount: numToSI(counts.users_active_week),
@@ -54,7 +54,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
         / {i18n.t("week")}
       </li>
       <li
-        className="list-inline-item badge badge-secondary pointer"
+        className="list-inline-item badge text-bg-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_month", {
           count: Number(counts.users_active_month),
           formattedCount: numToSI(counts.users_active_month),
@@ -67,7 +67,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
         / {i18n.t("month")}
       </li>
       <li
-        className="list-inline-item badge badge-secondary pointer"
+        className="list-inline-item badge text-bg-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
           count: Number(counts.users_active_half_year),
           formattedCount: numToSI(counts.users_active_half_year),
@@ -81,13 +81,13 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
       </li>
       {isSiteAggregates(counts) && (
         <>
-          <li className="list-inline-item badge badge-secondary">
+          <li className="list-inline-item badge text-bg-secondary">
             {i18n.t("number_of_users", {
               count: Number(counts.users),
               formattedCount: numToSI(counts.users),
             })}
           </li>
-          <li className="list-inline-item badge badge-secondary">
+          <li className="list-inline-item badge text-bg-secondary">
             {i18n.t("number_of_communities", {
               count: Number(counts.communities),
               formattedCount: numToSI(counts.communities),
@@ -96,20 +96,20 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
         </>
       )}
       {isCommunityAggregates(counts) && (
-        <li className="list-inline-item badge badge-secondary">
+        <li className="list-inline-item badge text-bg-secondary">
           {i18n.t("number_of_subscribers", {
             count: Number(counts.subscribers),
             formattedCount: numToSI(counts.subscribers),
           })}
         </li>
       )}
-      <li className="list-inline-item badge badge-secondary">
+      <li className="list-inline-item badge text-bg-secondary">
         {i18n.t("number_of_posts", {
           count: Number(counts.posts),
           formattedCount: numToSI(counts.posts),
         })}
       </li>
-      <li className="list-inline-item badge badge-secondary">
+      <li className="list-inline-item badge text-bg-secondary">
         {i18n.t("number_of_comments", {
           count: Number(counts.comments),
           formattedCount: numToSI(counts.comments),
@@ -117,7 +117,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
       </li>
       <li className="list-inline-item">
         <Link
-          className="badge badge-primary"
+          className="badge text-bg-primary"
           to={`/modlog${communityId ? `/${communityId}` : ""}`}
         >
           {i18n.t("modlog")}