From 1b1c8d14409305d5287b9a68f365473e113587a9 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Fri, 16 Aug 2024 09:29:50 +0200
Subject: [PATCH 1/4] Align MUI table header with new designs

---
 src/styles/theme/defaultTheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
index 0e3100685..a6ac71030 100644
--- a/src/styles/theme/defaultTheme.ts
+++ b/src/styles/theme/defaultTheme.ts
@@ -644,7 +644,7 @@ export const defaultTheme = createTheme({
         head: {
           border: 0,
           color: COLORS.grayDark,
-          fontWeight: 400,
+          fontWeight: 700,
         },
       },
     },

From 37a2bc9c526c887759742bc2565295f85533ce24 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Mon, 2 Dec 2024 12:26:32 +0100
Subject: [PATCH 2/4] Clean up token snapshot cards

---
 src/app/components/Snapshots/SnapshotCard.tsx | 11 ++++-
 .../TokenHoldersCountCard.tsx                 | 34 ++++---------
 .../TokenDashboardPage/TokenSupplyCard.tsx    | 49 +++++++------------
 .../TokenTotalTransactionsCard.tsx            | 32 +++---------
 4 files changed, 43 insertions(+), 83 deletions(-)

diff --git a/src/app/components/Snapshots/SnapshotCard.tsx b/src/app/components/Snapshots/SnapshotCard.tsx
index 96bd4f512..458ed027f 100644
--- a/src/app/components/Snapshots/SnapshotCard.tsx
+++ b/src/app/components/Snapshots/SnapshotCard.tsx
@@ -82,6 +82,7 @@ type SnapshotTextCardProps = {
   label?: ReactNode
   title: ReactNode
   withContentPadding?: boolean
+  withConstantHeight?: boolean
 }
 
 export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
@@ -89,10 +90,16 @@ export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
   label,
   title,
   withContentPadding,
+  withConstantHeight,
 }) => {
   return (
-    <SnapshotCard title={title} label={label} withContentPadding={withContentPadding}>
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', height: '100%' }}>
+    <SnapshotCard
+      title={title}
+      label={label}
+      withContentPadding={withContentPadding}
+      withConstantHeight={withConstantHeight}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
         <Typography
           component="span"
           sx={{
diff --git a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
index 6173dc3ec..e84255b53 100644
--- a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
@@ -1,12 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
-import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
+import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { SearchScope } from '../../../types/searchScope'
+import { useTokenInfo } from './hook'
 
 export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
   const { t } = useTranslation()
@@ -15,25 +12,12 @@ export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }>
 
   const title = t('tokens.holders')
   return (
-    <SnapshotCard title={title} withConstantHeight>
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="text" sx={{ width: '50%' }} />
-        ) : (
-          isFetched && (
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '32px',
-                fontWeight: 700,
-                color: COLORS.brandDark,
-              }}
-            >
-              {t('tokens.holdersValue', { value: token?.num_holders })}
-            </Typography>
-          )
-        )}
-      </Box>
-    </SnapshotCard>
+    <SnapshotTextCard title={title} withConstantHeight>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched && <>{t('tokens.holdersValue', { value: token?.num_holders })}</>
+      )}
+    </SnapshotTextCard>
   )
 }
diff --git a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx
index 08fc10a91..b03536517 100644
--- a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx
@@ -1,9 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
+import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
 import { SearchScope } from '../../../types/searchScope'
@@ -11,39 +8,27 @@ import { RoundedBalance } from '../../components/RoundedBalance'
 
 export const TokenSupplyCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
   const { t } = useTranslation()
-
   const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
-    <SnapshotCard
+    <SnapshotTextCard
       title={t('tokens.totalSupply')}
       label={isLoading ? <Skeleton variant="text" sx={{ width: '4em' }} /> : token?.symbol}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="text" sx={{ width: '50%' }} />
-        ) : (
-          isFetched &&
-          token && (
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '32px',
-                fontWeight: 700,
-                color: COLORS.brandDark,
-                textAlign: 'center',
-                width: '100%',
-              }}
-            >
-              {token.total_supply ? (
-                <RoundedBalance value={token.total_supply} compactLargeNumbers />
-              ) : (
-                t('common.not_defined')
-              )}
-            </Typography>
-          )
-        )}
-      </Box>
-    </SnapshotCard>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched &&
+        token && (
+          <>
+            {token.total_supply ? (
+              <RoundedBalance value={token.total_supply} compactLargeNumbers />
+            ) : (
+              t('common.not_defined')
+            )}
+          </>
+        )
+      )}
+    </SnapshotTextCard>
   )
 }
diff --git a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
index 13003137a..2d1a34a52 100644
--- a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
@@ -1,10 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
 import Skeleton from '@mui/material/Skeleton'
+import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { useTokenInfo } from './hook'
 import { SearchScope } from '../../../types/searchScope'
 
@@ -16,25 +13,12 @@ export const TokenTotalTransactionsCard: FC<{ scope: SearchScope; address: strin
   const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
-    <SnapshotCard title={t('common.transfers')} withConstantHeight>
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="text" sx={{ width: '50%' }} />
-        ) : (
-          isFetched && (
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '32px',
-                fontWeight: 700,
-                color: COLORS.brandDark,
-              }}
-            >
-              {t('common.valuePair', { value: token?.num_transfers })}
-            </Typography>
-          )
-        )}
-      </Box>
-    </SnapshotCard>
+    <SnapshotTextCard title={t('common.transfers')} withConstantHeight>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched && <>{t('common.valuePair', { value: token?.num_transfers })}</>
+      )}
+    </SnapshotTextCard>
   )
 }

From d4f1009b9c27d2a2bf63c69a331fba9df85d582a Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Mon, 2 Dec 2024 12:14:30 +0100
Subject: [PATCH 3/4] Update Consensus cards props

---
 .../pages/ConsensusDashboardPage/SnapshotDelegators.tsx    | 7 ++-----
 src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx    | 1 +
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
index 8e858cfd4..3048b4efa 100644
--- a/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
+++ b/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
@@ -1,8 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
-import { useScreenSize } from '../../hooks/useScreensize'
 
 type SnapshotDelegatorsProps = {
   totalDelegators: number | undefined
@@ -10,11 +8,10 @@ type SnapshotDelegatorsProps = {
 
 export const SnapshotDelegators: FC<SnapshotDelegatorsProps> = ({ totalDelegators }) => {
   const { t } = useTranslation()
-  const { isMobile } = useScreenSize()
 
   return (
-    <SnapshotTextCard title={t('validator.delegators')}>
-      {totalDelegators && <Box sx={{ pb: isMobile ? 3 : 5 }}>{totalDelegators.toLocaleString()}</Box>}
+    <SnapshotTextCard title={t('validator.delegators')} withConstantHeight>
+      {typeof totalDelegators === 'number' && totalDelegators.toLocaleString()}
     </SnapshotTextCard>
   )
 }
diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
index 12a890871..bb2598250 100644
--- a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
+++ b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
@@ -47,6 +47,7 @@ export const SnapshotStaked: FC<SnapshotStakedProps> = ({ totalStaked, ticker })
           </Box>
         )
       }
+      withConstantHeight
     >
       {totalStaked && (
         <Box sx={{ wordBreak: 'break-all', lineHeight: 1 }}>

From b7236dc0dc9afe3fd0c7232326ac0931a9f70831 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Mon, 2 Dec 2024 12:15:48 +0100
Subject: [PATCH 4/4] Rename SnapshotCard prop

---
 .changelog/1640.trivial.md                           |  5 +++++
 src/app/components/Snapshots/SnapshotCard.tsx        | 12 ++++++------
 .../ConsensusDashboardPage/SnapshotDelegators.tsx    |  2 +-
 .../pages/ConsensusDashboardPage/SnapshotStaked.tsx  |  2 +-
 .../pages/TokenDashboardPage/TokenGasUsedCard.tsx    |  2 +-
 .../TokenDashboardPage/TokenHoldersCountCard.tsx     |  2 +-
 .../TokenTotalTransactionsCard.tsx                   |  2 +-
 src/app/pages/TokenDashboardPage/TokenTypeCard.tsx   |  2 +-
 8 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 .changelog/1640.trivial.md

diff --git a/.changelog/1640.trivial.md b/.changelog/1640.trivial.md
new file mode 100644
index 000000000..cb153ab7b
--- /dev/null
+++ b/.changelog/1640.trivial.md
@@ -0,0 +1,5 @@
+Minor styles updates:
+
+- remove custom styling in tokens Snapshots cards
+- use new prop in Consensus Snapshot cards
+- sync table header styles with Figma
diff --git a/src/app/components/Snapshots/SnapshotCard.tsx b/src/app/components/Snapshots/SnapshotCard.tsx
index 458ed027f..86eded005 100644
--- a/src/app/components/Snapshots/SnapshotCard.tsx
+++ b/src/app/components/Snapshots/SnapshotCard.tsx
@@ -33,7 +33,7 @@ type SnapshotCardProps = PropsWithChildren & {
   label?: ReactNode
   title: ReactNode
   withContentPadding?: boolean
-  withConstantHeight?: boolean
+  alignWithCardsWithActions?: boolean
 }
 
 export const SnapshotCard: FC<SnapshotCardProps> = ({
@@ -42,13 +42,13 @@ export const SnapshotCard: FC<SnapshotCardProps> = ({
   title,
   label,
   withContentPadding = true,
-  withConstantHeight = false,
+  alignWithCardsWithActions = false,
 }) => {
   return (
     <StyledCard>
       <CardHeader component="h5" title={title} sx={{ pb: 0, pl: 4, pt: 4 }} />
       <StyledCardContent withContentPadding={withContentPadding}>{children}</StyledCardContent>
-      {(badge || label || withConstantHeight) && (
+      {(badge || label || alignWithCardsWithActions) && (
         <CardActions sx={{ minHeight: 60 }}>
           <Box
             sx={{
@@ -82,7 +82,7 @@ type SnapshotTextCardProps = {
   label?: ReactNode
   title: ReactNode
   withContentPadding?: boolean
-  withConstantHeight?: boolean
+  alignWithCardsWithActions?: boolean
 }
 
 export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
@@ -90,14 +90,14 @@ export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
   label,
   title,
   withContentPadding,
-  withConstantHeight,
+  alignWithCardsWithActions,
 }) => {
   return (
     <SnapshotCard
       title={title}
       label={label}
       withContentPadding={withContentPadding}
-      withConstantHeight={withConstantHeight}
+      alignWithCardsWithActions={alignWithCardsWithActions}
     >
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
         <Typography
diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
index 3048b4efa..ac3be5ea7 100644
--- a/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
+++ b/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
@@ -10,7 +10,7 @@ export const SnapshotDelegators: FC<SnapshotDelegatorsProps> = ({ totalDelegator
   const { t } = useTranslation()
 
   return (
-    <SnapshotTextCard title={t('validator.delegators')} withConstantHeight>
+    <SnapshotTextCard title={t('validator.delegators')} alignWithCardsWithActions>
       {typeof totalDelegators === 'number' && totalDelegators.toLocaleString()}
     </SnapshotTextCard>
   )
diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
index bb2598250..313595b39 100644
--- a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
+++ b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
@@ -47,7 +47,7 @@ export const SnapshotStaked: FC<SnapshotStakedProps> = ({ totalStaked, ticker })
           </Box>
         )
       }
-      withConstantHeight
+      alignWithCardsWithActions
     >
       {totalStaked && (
         <Box sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
diff --git a/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx b/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx
index df8f985d4..db6141be7 100644
--- a/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx
@@ -13,7 +13,7 @@ export const TokenGasUsedCard: FC<{ scope: SearchScope; address: string }> = ({
   const { account, isFetched } = useAccount(scope, address)
 
   return (
-    <SnapshotCard title={t('common.gasUsed')} withConstantHeight>
+    <SnapshotCard title={t('common.gasUsed')} alignWithCardsWithActions>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
         {isFetched && (
           <>
diff --git a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
index e84255b53..ff4c2a51c 100644
--- a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
@@ -12,7 +12,7 @@ export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }>
 
   const title = t('tokens.holders')
   return (
-    <SnapshotTextCard title={title} withConstantHeight>
+    <SnapshotTextCard title={title} alignWithCardsWithActions>
       {isLoading ? (
         <Skeleton variant="text" />
       ) : (
diff --git a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
index 2d1a34a52..b5744bc3d 100644
--- a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
@@ -13,7 +13,7 @@ export const TokenTotalTransactionsCard: FC<{ scope: SearchScope; address: strin
   const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
-    <SnapshotTextCard title={t('common.transfers')} withConstantHeight>
+    <SnapshotTextCard title={t('common.transfers')} alignWithCardsWithActions>
       {isLoading ? (
         <Skeleton variant="text" />
       ) : (
diff --git a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx
index e0fce9977..aa8ce5d61 100644
--- a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx
@@ -15,7 +15,7 @@ export const TokenTypeCard: FC<{ scope: SearchScope; address: string }> = ({ sco
   const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
-    <SnapshotCard title={t('common.type')} withConstantHeight>
+    <SnapshotCard title={t('common.type')} alignWithCardsWithActions>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
         {isLoading ? (
           <Skeleton variant="text" sx={{ width: '50%' }} />