Merge pull request #46 from multiversx/development

Development
multiversx · Jan 31, 2024 · d7cefd4 · d7cefd4
2 parents f2981c6 + fecab51
commit d7cefd4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/src/pages/Analytics/Analytics.tsx b/src/pages/Analytics/Analytics.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useMemo, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
-import { Loader, Tabs } from 'components';
+import { Loader, Overlay, Tabs } from 'components';
 import { ChartListType } from 'components/Chart/helpers/types';
 import { useAdapter, useIsMainnet, useNetworkRoute } from 'hooks';
 
+import { faInfoCircle } from 'icons/regular';
 import { AnalyticsChart } from 'pages/AnalyticsCompare/AnalyticsChart';
 import { FailedAnalytics } from 'pages/AnalyticsCompare/components/FailedAnalytics';
 import { NoAnalytics } from 'pages/AnalyticsCompare/components/NoAnalytics';
@@ -248,7 +250,23 @@ export const Analytics = () => {
           </ChartWrapper>
           <ChartWrapper>
             <div className='px-3 pb-3'>
-              <AnalyticsChart series={dailyActiveUsersChart} />
+              <AnalyticsChart
+                series={dailyActiveUsersChart}
+                title={
+                  <div className='d-flex align-items-center'>
+                    Daily Active Users
+                    <Overlay
+                      title='Number of accounts that have sent or received transactions in the last 24 hours'
+                      className='d-inline-flex'
+                    >
+                      <FontAwesomeIcon
+                        icon={faInfoCircle}
+                        className='ms-2 small cursor-context text-neutral-400'
+                      />
+                    </Overlay>
+                  </div>
+                }
+              />
             </div>
           </ChartWrapper>
 

diff --git a/src/pages/AnalyticsCompare/AnalyticsChart/AnalyticsChart.tsx b/src/pages/AnalyticsCompare/AnalyticsChart/AnalyticsChart.tsx
@@ -29,7 +29,7 @@ export const AnalyticsChart = ({
   customDomain
 }: {
   series: ChartListType[];
-  title?: string;
+  title?: React.ReactNode;
 } & StackedChartConfig) => {
   const ref = useRef(null);
 

diff --git a/src/widgets/AccountsStatsCard/AccountsStatsCard.tsx b/src/widgets/AccountsStatsCard/AccountsStatsCard.tsx
@@ -38,9 +38,12 @@ export const AccountsStatsCard = () => {
           {activeAccountsToday} active today
           <Overlay
             title='Number of accounts that have sent or received transactions in the last 24 hours'
-            className='d-inline cursor-context'
+            className='d-inline-flex'
           >
-            <FontAwesomeIcon icon={faInfoCircle} className='ms-2' />
+            <FontAwesomeIcon
+              icon={faInfoCircle}
+              className='ms-2 cursor-context'
+            />
           </Overlay>
         </StatsCard>
       ) : (

diff --git a/src/widgets/StatsCard/StatsCard.tsx b/src/widgets/StatsCard/StatsCard.tsx
@@ -35,7 +35,11 @@ export const StatsCard = ({
           </p>
         )}
 
-        {children && <p className='mb-0 mt-2 text-primary-200'>{children}</p>}
+        {children && (
+          <p className='mb-0 mt-2 text-primary-200 d-flex align-items-center'>
+            {children}
+          </p>
+        )}
       </div>
     </div>
   );