From 76d242cabf0d5fa1216e397d21bbabb2550930e3 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Thu, 29 Feb 2024 02:48:14 +0100
Subject: [PATCH] Use h2 insteaf of h3 in some places

(But since h2 and h3 look the same, this doesn't change the UI)
---
 .changelog/1308.trivial.md                             |  1 +
 src/app/components/Snapshots/Snapshot.tsx              |  2 +-
 src/app/components/SubPageCard/index.tsx               | 10 ++++++----
 .../pages/AccountDetailsPage/AccountDetailsCard.tsx    |  1 +
 .../ConsensusAccountDetailsCard.tsx                    |  2 +-
 src/app/pages/ConsensusAccountsPage/index.tsx          |  1 +
 src/app/pages/ConsensusBlocksPage/index.tsx            |  1 +
 src/app/pages/ConsensusTransactionsPage/index.tsx      |  1 +
 src/app/pages/ProposalDetailsPage/index.tsx            |  2 +-
 src/app/pages/ProposalsPage/index.tsx                  |  1 +
 src/app/pages/RuntimeBlockDetailPage/index.tsx         |  2 +-
 src/app/pages/RuntimeBlocksPage/index.tsx              |  1 +
 src/app/pages/RuntimeTransactionDetailPage/index.tsx   |  1 +
 src/app/pages/RuntimeTransactionsPage/index.tsx        |  1 +
 src/app/pages/TokensOverviewPage/index.tsx             |  1 +
 src/app/pages/ValidatorsPage/index.tsx                 |  1 +
 src/styles/theme/defaultTheme.ts                       |  4 ++--
 17 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 .changelog/1308.trivial.md

diff --git a/.changelog/1308.trivial.md b/.changelog/1308.trivial.md
new file mode 100644
index 000000000..274fe0f8a
--- /dev/null
+++ b/.changelog/1308.trivial.md
@@ -0,0 +1 @@
+Adjust title levels: use h2 for main title on each page
diff --git a/src/app/components/Snapshots/Snapshot.tsx b/src/app/components/Snapshots/Snapshot.tsx
index 34d31b387..b65a833f2 100644
--- a/src/app/components/Snapshots/Snapshot.tsx
+++ b/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}
diff --git a/src/app/components/SubPageCard/index.tsx b/src/app/components/SubPageCard/index.tsx
index d0e6b59dd..2d3b27328 100644
--- a/src/app/components/SubPageCard/index.tsx
+++ b/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={{
diff --git a/src/app/pages/AccountDetailsPage/AccountDetailsCard.tsx b/src/app/pages/AccountDetailsPage/AccountDetailsCard.tsx
index 23bfe2975..18c57866d 100644
--- a/src/app/pages/AccountDetailsPage/AccountDetailsCard.tsx
+++ b/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}
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
index bc42b7620..6cc372f8d 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
+++ b/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>
   )
diff --git a/src/app/pages/ConsensusAccountsPage/index.tsx b/src/app/pages/ConsensusAccountsPage/index.tsx
index 7ea6ead67..5df98c75c 100644
--- a/src/app/pages/ConsensusAccountsPage/index.tsx
+++ b/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}
       >
diff --git a/src/app/pages/ConsensusBlocksPage/index.tsx b/src/app/pages/ConsensusBlocksPage/index.tsx
index ed359f474..701639336 100644
--- a/src/app/pages/ConsensusBlocksPage/index.tsx
+++ b/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
diff --git a/src/app/pages/ConsensusTransactionsPage/index.tsx b/src/app/pages/ConsensusTransactionsPage/index.tsx
index 8a583ec1f..0741ea4e0 100644
--- a/src/app/pages/ConsensusTransactionsPage/index.tsx
+++ b/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
diff --git a/src/app/pages/ProposalDetailsPage/index.tsx b/src/app/pages/ProposalDetailsPage/index.tsx
index 1e7c602ff..cc0ae6667 100644
--- a/src/app/pages/ProposalDetailsPage/index.tsx
+++ b/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>
diff --git a/src/app/pages/ProposalsPage/index.tsx b/src/app/pages/ProposalsPage/index.tsx
index d6bdf8c42..8dca90fb3 100644
--- a/src/app/pages/ProposalsPage/index.tsx
+++ b/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
diff --git a/src/app/pages/RuntimeBlockDetailPage/index.tsx b/src/app/pages/RuntimeBlockDetailPage/index.tsx
index 217901364..9f1f264a6 100644
--- a/src/app/pages/RuntimeBlockDetailPage/index.tsx
+++ b/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} />}
diff --git a/src/app/pages/RuntimeBlocksPage/index.tsx b/src/app/pages/RuntimeBlocksPage/index.tsx
index 0fccedb74..efcdca2a5 100644
--- a/src/app/pages/RuntimeBlocksPage/index.tsx
+++ b/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
diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
index 20c235b3f..7a7956ba6 100644
--- a/src/app/pages/RuntimeTransactionDetailPage/index.tsx
+++ b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
@@ -122,6 +122,7 @@ export const RuntimeTransactionDetailPage: FC = () => {
             onSelectionChange={addressSwitch => setAddressSwitchOption(addressSwitch)}
           />
         }
+        mainTitle
       >
         <RuntimeTransactionDetailView
           isLoading={isLoading}
diff --git a/src/app/pages/RuntimeTransactionsPage/index.tsx b/src/app/pages/RuntimeTransactionsPage/index.tsx
index 5c452dcc7..0317c800d 100644
--- a/src/app/pages/RuntimeTransactionsPage/index.tsx
+++ b/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
diff --git a/src/app/pages/TokensOverviewPage/index.tsx b/src/app/pages/TokensOverviewPage/index.tsx
index ec8333922..d3322524f 100644
--- a/src/app/pages/TokensOverviewPage/index.tsx
+++ b/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
diff --git a/src/app/pages/ValidatorsPage/index.tsx b/src/app/pages/ValidatorsPage/index.tsx
index b3ea5780c..9a7403fa0 100644
--- a/src/app/pages/ValidatorsPage/index.tsx
+++ b/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
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
index f61bf152e..e2352466f 100644
--- a/src/styles/theme/defaultTheme.ts
+++ b/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: {