Merge pull request #2009 from oasisprotocol/lw/headings

Remove headings from staking subpages
oasisprotocol · Jul 16, 2024 · 1f408c3 · 1f408c3
2 parents 8d49242 + b8ca902
commit 1f408c3
Show file tree

Hide file tree

Showing 11 changed files with 264 additions and 387 deletions.
diff --git a/.changelog/2009.trivial.md b/.changelog/2009.trivial.md
@@ -0,0 +1 @@
+Remove headings from staking subpages
diff --git a/src/app/pages/AccountPage/Features/StakeSubnavigation/index.tsx b/src/app/pages/AccountPage/Features/StakeSubnavigation/index.tsx
@@ -58,10 +58,7 @@ export function StakeSubnavigation() {
       gap="none"
       wrap
     >
-      <NavItem
-        label={t('account.subnavigation.validators', 'Validators')}
-        route={`/account/${address}/stake`}
-      />
+      <NavItem label={t('common.validators', 'Validators')} route={`/account/${address}/stake`} />
 
       <NavItem
         counter={stake.delegations?.length}

diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx
@@ -102,9 +102,9 @@ export function TransactionHistory() {
               {pendingTransactionComponents}
             </Box>
           )}
-          <Heading level="3">{t('account.summary.activity', 'Activity')}</Heading>
         </>
       )}
+      <Heading level="3">{t('account.summary.activity', 'Activity')}</Heading>
       {/* eslint-enable no-restricted-syntax */}
       {allTransactions.length ? (
         <Box gap="medium" margin="none" data-testid="completed-txs">
@@ -117,7 +117,7 @@ export function TransactionHistory() {
           background="background-front"
           pad="large"
         >
-          <Heading level="3">{t('account.summary.noTransactionFound', 'No transactions found.')}</Heading>
+          <Text>{t('account.summary.noTransactionFound', 'No transactions found.')}</Text>
         </Box>
       )}
     </Box>

diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -272,7 +272,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c31 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -393,7 +393,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   line-height: 24px;
 }
 
-.c32 {
+.c31 {
   font-size: 26px;
   line-height: 32px;
   max-width: 624px;
@@ -793,13 +793,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c31 {
+  .c32 {
     border: solid 1px #EDEDED;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c31 {
+  .c32 {
     padding: 24px;
   }
 }
@@ -829,7 +829,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c32 {
+  .c31 {
     font-size: 18px;
     line-height: 24px;
     max-width: 432px;
@@ -1168,14 +1168,19 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
         <div
           class="c30"
         >
-          <div
+          <h3
             class="c31"
           >
-            <h3
-              class="c32"
+            Activity
+          </h3>
+          <div
+            class="c32"
+          >
+            <span
+              class="c14"
             >
               No transactions found.
-            </h3>
+            </span>
           </div>
         </div>
       </div>

diff --git a/src/app/pages/StakingPage/Features/DelegationList/ActiveDelegationList.tsx b/src/app/pages/StakingPage/Features/DelegationList/ActiveDelegationList.tsx
@@ -1,22 +1,18 @@
-import { Header } from 'app/components/Header'
 import { selectActiveDelegations } from 'app/state/staking/selectors'
 import { Box } from 'grommet/es6/components/Box'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import { DelegationList } from '.'
 import { StakeSubnavigation } from '../../../AccountPage/Features/StakeSubnavigation'
 
 export const ActiveDelegationList = () => {
-  const { t } = useTranslation()
   const delegations = useSelector(selectActiveDelegations)
   return (
     <>
       <StakeSubnavigation />
       <Box as="section" data-testid="active-delegations">
         <Box pad="medium" background="background-front">
-          <Header>{t('delegations.activeDelegations', 'Active delegations')}</Header>
           <DelegationList type="active" delegations={delegations ?? []} />
         </Box>
       </Box>

diff --git a/src/app/pages/StakingPage/Features/DelegationList/DebondingDelegationList.tsx b/src/app/pages/StakingPage/Features/DelegationList/DebondingDelegationList.tsx
@@ -1,22 +1,17 @@
-import { Header } from 'app/components/Header'
 import { selectDebondingDelegations } from 'app/state/staking/selectors'
 import { Box } from 'grommet/es6/components/Box'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import { DelegationList } from '.'
 import { StakeSubnavigation } from '../../../AccountPage/Features/StakeSubnavigation'
 
 export const DebondingDelegationList = () => {
-  const { t } = useTranslation()
   const delegations = useSelector(selectDebondingDelegations)
   return (
     <>
       <StakeSubnavigation />
       <Box as="section" data-testid="debonding-delegations">
         <Box pad="medium" background="background-front">
-          <Header>{t('delegations.debondingDelegations', 'Debonding delegations')}</Header>
           <DelegationList type="debonding" delegations={delegations ?? []} />
         </Box>
       </Box>