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 858b986487189dc060c4a51ebae239820f4cb3a7..17ae53fb03da34f32ec12a1f969bc77a85152ba1 100644 (file)
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -1,7 +1,7 @@
 import { Link } from "inferno-router";
 import {
   CommunityAggregates,
-  CommunityView,
+  CommunityId,
   SiteAggregates,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
@@ -9,7 +9,7 @@ import { numToSI } from "../../utils";
 
 interface BadgesProps {
   counts: CommunityAggregates | SiteAggregates;
-  community_view: CommunityView;
+  communityId?: CommunityId;
 }
 
 const isCommunityAggregates = (
@@ -24,11 +24,11 @@ const isSiteAggregates = (
   return "communities" in counts;
 };
 
-export const Badges = ({ counts, community_view }: BadgesProps) => {
+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, community_view }: 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, community_view }: 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, community_view }: 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, community_view }: 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, community_view }: 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,10 +117,8 @@ export const Badges = ({ counts, community_view }: BadgesProps) => {
       </li>
       <li className="list-inline-item">
         <Link
-          className="badge badge-primary"
-          to={`/modlog${
-            community_view ? `/${community_view.community.id}` : ""
-          }`}
+          className="badge text-bg-primary"
+          to={`/modlog${communityId ? `/${communityId}` : ""}`}
         >
           {i18n.t("modlog")}
         </Link>