Merge pull request #2126 from oasisprotocol/mz/headerFix

Fix headers colors after changing Explorer background

Author: buberdds

.changelog/2126.bugfix.md

@@ -0,0 +1 @@
+Fix headers colors after changing Explorer background

src/app/components/CardHeaderWithCounter/index.tsx

@@ -2,40 +2,33 @@ import { FC } from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { COLORS } from 'styles/theme/colors'
-import { useScreenSize } from '../../hooks/useScreensize'
+import { useTheme } from '@mui/material/styles'
 
 type CardHeaderWithCounterProps = {
   label: string | undefined
   totalCount: number | undefined
   isTotalCountClipped: boolean | undefined
-  changeMobileColors?: boolean
 }
 
 export const CardHeaderWithCounter: FC<CardHeaderWithCounterProps> = ({
   label,
   totalCount,
   isTotalCountClipped,
-  changeMobileColors,
 }) => {
-  const { isMobile } = useScreenSize()
+  const theme = useTheme()
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'baseline' }} gap={'0.8ex'}>
       <Typography
         fontWeight={700}
         component="span"
-        color={isMobile && changeMobileColors ? COLORS.white : COLORS.brandExtraDark}
+        color={theme.palette.layout.titleOnBackground}
         fontSize="inherit"
       >
         {label}
       </Typography>
       {!!totalCount && (
-        <Typography
-          fontWeight="normal"
-          component="span"
-          color={isMobile && changeMobileColors ? COLORS.white : COLORS.grayMedium}
-          fontSize="inherit"
-        >
+        <Typography fontWeight="normal" component="span" color={COLORS.grayMedium} fontSize="inherit">
           ({`${isTotalCountClipped ? '>' : ''}${totalCount}`})
         </Typography>
       )}

src/app/pages/ConsensusAccountsPage/index.tsx

@@ -51,7 +51,6 @@ export const ConsensusAccountsPage: FC = () => {
       <SubPageCard
         title={
           <CardHeaderWithCounter
-            changeMobileColors
             label={t('account.listTitle')}
             totalCount={accountsData?.total_count}
             isTotalCountClipped={accountsData?.is_total_count_clipped}

src/app/pages/ProposalsPage/index.tsx

@@ -51,7 +51,6 @@ export const ProposalsPage: FC = () => {
       <SubPageCard
         title={
           <CardHeaderWithCounter
-            changeMobileColors
             label={t('networkProposal.listTitle')}
             totalCount={proposalsData?.total_count}
             isTotalCountClipped={proposalsData?.is_total_count_clipped}

src/app/pages/ValidatorsPage/index.tsx

@@ -52,7 +52,6 @@ export const ValidatorsPage: FC = () => {
       <SubPageCard
         title={
           <CardHeaderWithCounter
-            changeMobileColors
             label={t('validator.listTitle')}
             totalCount={validatorsData?.total_count}
             isTotalCountClipped={validatorsData?.is_total_count_clipped}