Merge pull request #1308 from oasisprotocol/csillag/adjust-title-levels

Adjust title levels: use h2 for main title on each page

.changelog/1308.trivial.md

@@ -0,0 +1 @@
+Adjust title levels: use h2 for main title on each page

src/app/components/Snapshots/Snapshot.tsx

@@ -26,7 +26,7 @@ export const Snapshot: FC<SnapshotProps> = ({ children, header, scope, title })
           <AppendMobileSearch scope={scope}>
             <Box sx={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', mb: 2 }}>
               <Typography
-                variant="h3"
+                variant="h2"
                 sx={{ color: theme.palette.layout.main, fontWeight: 700, mr: 3, mb: isMobile ? 4 : 0 }}
               >
                 {title}

src/app/components/SubPageCard/index.tsx

@@ -15,6 +15,7 @@ type StyledComponentProps = {
   subheader?: string
   action?: ReactNode
   noPadding?: boolean
+  mainTitle?: boolean
 }
 type SubPageCardProps = PropsWithChildren<StyledComponentProps>
 
@@ -69,6 +70,7 @@ export const SubPageCard: FC<SubPageCardProps> = ({
   subheader,
   action,
   noPadding = false,
+  mainTitle = false,
 }) => {
   const theme = useTheme()
   const { isMobile } = useScreenSize()
@@ -78,8 +80,8 @@ export const SubPageCard: FC<SubPageCardProps> = ({
       {isMobile && (title || subheader || action) && (
         <Box sx={{ position: 'relative', display: 'flex', alignItems: 'baseline', mb: 4, mx: 4 }}>
           <Typography
-            variant="h3"
-            component="h3"
+            variant={mainTitle ? 'h2' : 'h3'}
+            component={mainTitle ? 'h2' : 'h3'}
             sx={{ display: 'inline' }}
             color={theme.palette.layout.titleOnBackground}
           >
@@ -102,8 +104,8 @@ export const SubPageCard: FC<SubPageCardProps> = ({
               title={isLoadingTitle ? <TitleSkeleton /> : title}
               titleTypographyProps={{
                 display: 'inline',
-                component: 'h3',
-                variant: 'h3',
+                component: mainTitle ? 'h2' : 'h3',
+                variant: mainTitle ? 'h2' : 'h3',
               }}
               subheader={subheader}
               subheaderTypographyProps={{

src/app/pages/AccountDetailsPage/AccountDetailsCard.tsx

@@ -28,6 +28,7 @@ export const AccountDetailsCard: FC<AccountDetailsProps> = ({
       featured
       isLoadingTitle={isLoading}
       title={isContract ? t('contract.title') : t('account.title')}
+      mainTitle
     >
       <AccountDetailsView
         isLoading={isLoading}

src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx

@@ -32,7 +32,7 @@ export const ConsensusAccountDetailsCard: FC<ConsensusAccountDetailsCardProps> =
   const { t } = useTranslation()
 
   return (
-    <SubPageCard featured isLoadingTitle={isLoading} title={t('account.title')}>
+    <SubPageCard featured isLoadingTitle={isLoading} title={t('account.title')} mainTitle>
       <ConsensusAccountDetails isError={isError} isLoading={isLoading} account={account} />
     </SubPageCard>
   )

src/app/pages/ConsensusAccountsPage/index.tsx

@@ -57,6 +57,7 @@ export const ConsensusAccountsPage: FC = () => {
             isTotalCountClipped={accountsData?.is_total_count_clipped}
           />
         }
+        mainTitle
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
       >

src/app/pages/ConsensusBlocksPage/index.tsx

@@ -90,6 +90,7 @@ export const ConsensusBlocksPage: FC = () => {
         title={t('blocks.title')}
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <ConsensusBlocks

src/app/pages/ConsensusTransactionsPage/index.tsx

@@ -78,6 +78,7 @@ export const ConsensusTransactionsPage: FC = () => {
         title={t('transactions.latest')}
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <ConsensusTransactions

src/app/pages/ProposalDetailsPage/index.tsx

@@ -36,7 +36,7 @@ export const ProposalDetailsPage: FC = () => {
   const proposal = data?.data!
   return (
     <PageLayout>
-      <SubPageCard featured title={t('common.proposal')}>
+      <SubPageCard featured title={t('common.proposal')} mainTitle>
         <ProposalDetailView isLoading={isLoading} proposal={proposal} highlightedPart={searchTerm} />
       </SubPageCard>
     </PageLayout>

src/app/pages/ProposalsPage/index.tsx

@@ -60,6 +60,7 @@ export const ProposalsPage: FC = () => {
         }
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <NetworkProposalsList

src/app/pages/RuntimeBlockDetailPage/index.tsx

@@ -41,7 +41,7 @@ export const RuntimeBlockDetailPage: FC = () => {
 
   return (
     <PageLayout>
-      <SubPageCard featured title={t('common.block')}>
+      <SubPageCard featured title={t('common.block')} mainTitle>
         <RuntimeBlockDetailView enableBlockNavigation={true} isLoading={isLoading} block={block} />
       </SubPageCard>
       {!!block?.num_transactions && <TransactionsCard scope={scope} blockHeight={blockHeight} />}

src/app/pages/RuntimeBlocksPage/index.tsx

@@ -87,6 +87,7 @@ export const RuntimeBlocksPage: FC = () => {
         title={t('blocks.latest')}
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <RuntimeBlocks

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -122,6 +122,7 @@ export const RuntimeTransactionDetailPage: FC = () => {
             onSelectionChange={addressSwitch => setAddressSwitchOption(addressSwitch)}
           />
         }
+        mainTitle
       >
         <RuntimeTransactionDetailView
           isLoading={isLoading}

src/app/pages/RuntimeTransactionsPage/index.tsx

@@ -93,6 +93,7 @@ export const RuntimeTransactionsPage: FC = () => {
         title={t('transactions.latest')}
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <RuntimeTransactions

src/app/pages/TokensOverviewPage/index.tsx

@@ -70,6 +70,7 @@ export const TokensPage: FC = () => {
         title={t('common.tokens')}
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <TokenList

src/app/pages/ValidatorsPage/index.tsx

@@ -59,6 +59,7 @@ export const ValidatorsPage: FC = () => {
         }
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
+        mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <Validators

src/styles/theme/defaultTheme.ts

@@ -143,8 +143,8 @@ export const defaultTheme = createTheme({
     },
     h2: {
       fontSize: '24px',
-      fontWeight: 500,
-      lineHeight: '140%',
+      fontWeight: 600,
+      lineHeight: '32px',
       color: COLORS.brandExtraDark,
     },
     h3: {