Rename SnapshotCard prop

oasisprotocol · Dec 2, 2024 · b7236dc · b7236dc
1 parent d4f1009
commit b7236dc
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 12 deletions.
diff --git a/.changelog/1640.trivial.md 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
@@ -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,22 +82,22 @@ type SnapshotTextCardProps = {
   label?: ReactNode
   title: ReactNode
   withContentPadding?: boolean
-  withConstantHeight?: boolean
+  alignWithCardsWithActions?: boolean
 }
 
 export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
   children,
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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%' }} />