From 6a75db688759cfda574bf7e9b6335ff3f3f2230e Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Tue, 2 Feb 2021 12:12:16 -0500
Subject: [PATCH] Adding tippy to active users badges. Fixes #150

---
 src/shared/components/main.tsx    | 30 ++++++++++++++++++++++++++----
 src/shared/components/sidebar.tsx | 30 ++++++++++++++++++++++++++----
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index b83d671..a99aa5e 100644
--- a/src/shared/components/main.tsx
+++ b/src/shared/components/main.tsx
@@ -426,25 +426,47 @@ export class Main extends Component<any, MainState> {
         <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.state.siteRes.online })}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_day,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('day')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_day,
           })}{' '}
           / {i18n.t('day')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_week,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('week')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_week,
           })}{' '}
           / {i18n.t('week')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_month,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('month')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_month,
           })}{' '}
           / {i18n.t('month')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_half_year,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('number_of_months', {
+            count: 6,
+          })}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_half_year,
           })}{' '}
diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx
index 324f3ea..03675dd 100644
--- a/src/shared/components/sidebar.tsx
+++ b/src/shared/components/sidebar.tsx
@@ -149,25 +149,47 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.props.online })}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_day,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('day')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_day,
           })}{' '}
           / {i18n.t('day')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_week,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('week')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_week,
           })}{' '}
           / {i18n.t('week')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_month,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('month')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_month,
           })}{' '}
           / {i18n.t('month')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_half_year,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('number_of_months', {
+            count: 6,
+          })}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_half_year,
           })}{' '}
-- 
2.44.1