Merge pull request #1640 from oasisprotocol/mz/cardCleanUp

Minor styles updates
oasisprotocol · Dec 2, 2024 · 5b65742 · 5b65742
2 parents 43c9419 + b7236dc
commit 5b65742
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 94 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,17 +82,24 @@ type SnapshotTextCardProps = {
   label?: ReactNode
   title: ReactNode
   withContentPadding?: boolean
+  alignWithCardsWithActions?: boolean
 }
 
 export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
   children,
   label,
   title,
   withContentPadding,
+  alignWithCardsWithActions,
 }) => {
   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}
+      alignWithCardsWithActions={alignWithCardsWithActions}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
         <Typography
           component="span"
           sx={{

diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx
@@ -1,20 +1,17 @@
 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
 }
 
 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')} alignWithCardsWithActions>
+      {typeof totalDelegators === 'number' && totalDelegators.toLocaleString()}
     </SnapshotTextCard>
   )
 }
diff --git 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>
         )
       }
+      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
@@ -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} alignWithCardsWithActions>
+      {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
@@ -1,49 +1,34 @@
 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'
 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
@@ -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')} alignWithCardsWithActions>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched && <>{t('common.valuePair', { value: token?.num_transfers })}</>
+      )}
+    </SnapshotTextCard>
   )
 }
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%' }} />

diff --git 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,
         },
       },
     },
-Original file line number
+Diff line change
@@ Expand Up @@
               </Box>
             )
           }
+          alignWithCardsWithActions
         >
           {totalStaked && (
             <Box sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
@@ Expand Down @@