From 2b7d2afe4fa407626efd9f03a78737aec8405a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20T=C3=B3rz?= <tomasz.torz@l2beat.com>
Date: Fri, 18 Aug 2023 12:17:19 +0200
Subject: [PATCH] update statistics design

---
 .../pages/home/components/HomeStatistics.tsx  | 54 +++++++++++--------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/view/pages/home/components/HomeStatistics.tsx b/packages/frontend/src/view/pages/home/components/HomeStatistics.tsx
index 54b15d863..3b1542cef 100644
--- a/packages/frontend/src/view/pages/home/components/HomeStatistics.tsx
+++ b/packages/frontend/src/view/pages/home/components/HomeStatistics.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { formatInt } from '../../../../utils/formatting/formatAmount'
 import { Card } from '../../../components/Card'
 import { SectionHeading } from '../../../components/SectionHeading'
 
@@ -28,37 +27,37 @@ export function HomeStatistics({
       <SectionHeading title="Statistics" />
       <Card
         className={classNames(
-          'grid h-full grid-cols-1 divide-y-2 divide-slate-800 !px-0',
-          showL2Transactions
-            ? 'md:grid-cols-2'
-            : 'md:grid-cols-3 md:divide-x-2 md:divide-y-0'
+          'grid h-full grid-cols-1 divide-y-2 divide-slate-800 md:grid-cols-3 md:divide-x-2 md:divide-y-0'
         )}
       >
         <StatisticsItem
           title="State updates"
           value={statistics.stateUpdateCount}
+          className="pb-6 md:pb-0"
         />
         {showL2Transactions && (
-          <>
-            <StatisticsItem
-              title="Live transactions"
-              className="pt-5 md:!border-t-0 md:pt-0"
-              value={statistics.l2TransactionCount}
-            />
-          </>
+          <StatisticsItem
+            title="Transactions"
+            className="py-6 md:!border-t-0 md:py-0"
+            value={statistics.l2TransactionCount}
+          />
         )}
         <StatisticsItem
           title="Forced transactions"
           className={classNames(
-            showL2Transactions ? 'pt-5' : 'pt-5 md:!border-t-0 md:pt-0'
+            'md:!border-t-0',
+            showL2Transactions && 'pt-6 md:pt-0',
+            !showL2Transactions && 'py-6 md:py-0'
           )}
           value={statistics.forcedTransactionCount}
         />
-        <StatisticsItem
-          title="Offers"
-          className={classNames(showL2Transactions ? 'pt-5' : 'pt-5 md:pt-0')}
-          value={statistics.offerCount}
-        />
+        {!showL2Transactions && (
+          <StatisticsItem
+            title="Offers"
+            className="pt-6 md:pt-0"
+            value={statistics.offerCount}
+          />
+        )}
       </Card>
     </div>
   )
@@ -76,12 +75,25 @@ function StatisticsItem({
   return (
     <div
       className={classNames(
-        'flex flex-col justify-center text-center',
+        'flex flex-col items-center justify-between gap-4 text-center leading-none',
         className
       )}
     >
-      <div className="text-gray-400 text-lg font-medium">{title}</div>
-      <div className="text-bold text-[50px] text-brand">{formatInt(value)}</div>
+      <span className="text-[20px] font-semibold">{title}</span>
+      <span className="text-[50px] font-extrabold text-brand">
+        {formatStatisticsCount(value)}
+      </span>
+      <span className="hidden text-sm font-semibold text-zinc-500 md:inline">
+        # of all current {title.toLowerCase()}
+      </span>
     </div>
   )
 }
+
+function formatStatisticsCount(count: number) {
+  if (count < 1000000) {
+    return count.toString()
+  }
+
+  return `${(count / 1000000).toFixed(2).replace('.', ',')}M`
+}