From 9503cb6baeabe305106d0f0a8e7e19c061902d0b Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 16 Jul 2024 04:59:46 +0200
Subject: [PATCH 1/3] Always show Activity heading on account page

---
 .../pages/AccountPage/Features/TransactionHistory/index.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx
index 7fa21a0d12..89fc3960ad 100644
--- 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>

From 4203665ca64980a2fda2ea0a1b1f671387737fda Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 16 Jul 2024 05:01:12 +0200
Subject: [PATCH 2/3] Remove headings from staking subpages

---
 .changelog/2009.trivial.md                                   | 1 +
 .../pages/AccountPage/Features/StakeSubnavigation/index.tsx  | 5 +----
 .../Features/DelegationList/ActiveDelegationList.tsx         | 4 ----
 .../Features/DelegationList/DebondingDelegationList.tsx      | 5 -----
 src/app/pages/StakingPage/Features/ValidatorList/index.tsx   | 2 --
 src/locales/en/translation.json                              | 5 +----
 6 files changed, 3 insertions(+), 19 deletions(-)
 create mode 100644 .changelog/2009.trivial.md

diff --git a/.changelog/2009.trivial.md b/.changelog/2009.trivial.md
new file mode 100644
index 0000000000..230a660aae
--- /dev/null
+++ 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
index 071af0cf06..c442253de0 100644
--- 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/StakingPage/Features/DelegationList/ActiveDelegationList.tsx b/src/app/pages/StakingPage/Features/DelegationList/ActiveDelegationList.tsx
index ff04a83be8..09b332628a 100644
--- 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
index a2110f3f23..bb222f61d3 100644
--- 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>
diff --git a/src/app/pages/StakingPage/Features/ValidatorList/index.tsx b/src/app/pages/StakingPage/Features/ValidatorList/index.tsx
index 47733cac3d..783866599a 100644
--- a/src/app/pages/StakingPage/Features/ValidatorList/index.tsx
+++ b/src/app/pages/StakingPage/Features/ValidatorList/index.tsx
@@ -4,7 +4,6 @@
  *
  */
 import { AmountFormatter } from 'app/components/AmountFormatter'
-import { Header } from 'app/components/Header'
 import { ErrorFormatter } from 'app/components/ErrorFormatter'
 import { ShortAddress } from 'app/components/ShortAddress'
 import { ValidatorStatus } from 'app/pages/StakingPage/Features/ValidatorList/ValidatorStatus'
@@ -119,7 +118,6 @@ export const ValidatorList = memo((props: Props) => {
       <StakeSubnavigation />
       <Box as="section" data-testid="validators-list">
         <Box pad="medium" background="background-front">
-          <Header>{t('common.validators', 'Validators')}</Header>
           {updateValidatorsError && (
             <p>
               <span>{t('account.validator.loadingError', "Couldn't load validators.")}</span>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 717bcf46d7..88c624fdbd 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -36,8 +36,7 @@
       "activeDelegations": "Staked",
       "debondingDelegations": "Debonding",
       "mobileActiveDelegations": "Staked",
-      "mobileDebondingDelegations": "Debonding",
-      "validators": "Validators"
+      "mobileDebondingDelegations": "Debonding"
     },
     "summary": {
       "activity": "Activity",
@@ -136,8 +135,6 @@
     "thisIsYourPhrase": "This is your mnemonic"
   },
   "delegations": {
-    "activeDelegations": "Active delegations",
-    "debondingDelegations": "Debonding delegations",
     "debondingTimeEnd": "End of debonding",
     "delegatedAmount": "Delegated amount",
     "loadingError": "Couldn't load delegations.",

From b8ca902a5589d5192ceef9351a11eb5cdabc1f55 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 16 Jul 2024 05:27:30 +0200
Subject: [PATCH 3/3] Update jest snapshots

---
 .../__snapshots__/index.test.tsx.snap         |  23 +-
 .../ActiveDelegationList.test.tsx.snap        | 172 +++++------
 .../DebondingDelegationList.test.tsx.snap     | 162 +++++------
 .../__snapshots__/index.test.tsx.snap         | 268 +++++++-----------
 4 files changed, 259 insertions(+), 366 deletions(-)

diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
index f9a2cee477..0aeb0203cd 100644
--- 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/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap
index 7e1b83085e..f2fba64d4e 100644
--- a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap
+++ b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
-.c12 {
+.c11 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -12,30 +12,30 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   stroke: currentColor;
 }
 
-.c12 g {
+.c11 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c12 *:not([stroke])[fill='none'] {
+.c11 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c12 *[stroke*='#'],
-.c12 *[STROKE*='#'] {
+.c11 *[stroke*='#'],
+.c11 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c12 *[fill-rule],
-.c12 *[FILL-RULE],
-.c12 *[fill*='#'],
-.c12 *[FILL*='#'] {
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*='#'],
+.c11 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c19 {
+.c18 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -46,25 +46,25 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   stroke: #2ad5ab;
 }
 
-.c19 g {
+.c18 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c19 *:not([stroke])[fill='none'] {
+.c18 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c19 *[stroke*='#'],
-.c19 *[STROKE*='#'] {
+.c18 *[stroke*='#'],
+.c18 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c19 *[fill-rule],
-.c19 *[FILL-RULE],
-.c19 *[fill*='#'],
-.c19 *[FILL*='#'] {
+.c18 *[fill-rule],
+.c18 *[FILL-RULE],
+.c18 *[fill*='#'],
+.c18 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -100,22 +100,13 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   padding: 24px;
 }
 
-.c2 {
-  margin-top: 0px;
-  font-size: 34px;
-  line-height: 40px;
-  max-width: 816px;
-  font-weight: 600;
-  overflow-wrap: break-word;
-}
-
-.c20 {
+.c19 {
   font-size: 18px;
   line-height: 24px;
   color: #0500e2;
 }
 
-.c5 {
+.c4 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -132,7 +123,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   background-color: unset;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -140,7 +131,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   text-align: left;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -157,7 +148,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   border-bottom-style: solid;
 }
 
-.c8 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -176,7 +167,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   padding-right: 16px;
 }
 
-.c17 {
+.c16 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -193,7 +184,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   word-break: break-word;
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -210,7 +201,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   max-width: 34px;
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -225,7 +216,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   min-width: 15ex;
 }
 
-.c13 {
+.c12 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -246,7 +237,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c14 {
+.c13 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -267,11 +258,11 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c18 {
+.c17 {
   font-weight: 400;
 }
 
-.c16 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -291,13 +282,13 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   min-height: 48px;
 }
 
-.c16:not(:last-of-type) {
+.c15:not(:last-of-type) {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #AAAAAAaa;
 }
 
-.c16:hover {
+.c15:hover {
   color: unset;
   background-color: #88888833;
   -webkit-transition-duration: 0.15s;
@@ -310,11 +301,11 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   outline-color: unset;
 }
 
-.c16:hover {
+.c15:hover {
   cursor: pointer;
 }
 
-.c11 {
+.c10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -331,17 +322,17 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   user-select: none;
 }
 
-.c11:focus {
+.c10:focus {
   outline: none;
   color: unset;
 }
 
-.c11:hover {
+.c10:hover {
   color: unset;
 }
 
-.c11 span.__rdt_custom_sort_icon__ i,
-.c11 span.__rdt_custom_sort_icon__ svg {
+.c10 span.__rdt_custom_sort_icon__ i,
+.c10 span.__rdt_custom_sort_icon__ svg {
   opacity: 0;
   color: inherit;
   font-size: 18px !important;
@@ -359,23 +350,23 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   transition-property: transform;
 }
 
-.c11 span.__rdt_custom_sort_icon__.asc i,
-.c11 span.__rdt_custom_sort_icon__.asc svg {
+.c10 span.__rdt_custom_sort_icon__.asc i,
+.c10 span.__rdt_custom_sort_icon__.asc svg {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.c11:hover {
+.c10:hover {
   cursor: pointer;
 }
 
-.c11:hover span,
-.c11:hover span.__rdt_custom_sort_icon__ * {
+.c10:hover span,
+.c10:hover span.__rdt_custom_sort_icon__ * {
   opacity: 1;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -385,7 +376,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: inherit;
@@ -394,7 +385,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   min-height: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   width: 100%;
   display: table;
@@ -418,22 +409,8 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
 
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-top: 0px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c2 {
-    font-size: 26px;
-    line-height: 32px;
-    max-width: 624px;
-  }
-}
-
 @media screen and (max-width:599px) {
-  .c14 {
+  .c13 {
     display: none;
   }
 }
@@ -449,40 +426,35 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
   <div
     class="c1"
   >
-    <h1
-      class="c2"
-    >
-      delegations.activeDelegations
-    </h1>
     <div
-      class="c3"
+      class="c2"
     >
       <div
-        class="c4"
+        class="c3"
       >
         <div
-          class="c5 rdt_Table"
+          class="c4 rdt_Table"
           role="table"
         >
           <div
-            class="c6 rdt_TableHead"
+            class="c5 rdt_TableHead"
             role="rowgroup"
           >
             <div
-              class="c7 rdt_TableHeadRow"
+              class="c6 rdt_TableHeadRow"
               role="row"
             >
               <div
-                class="c8 c9 rdt_TableCol"
+                class="c7 c8 rdt_TableCol"
               />
               <div
-                class="c8 c9 rdt_TableCol"
+                class="c7 c8 rdt_TableCol"
               />
               <div
-                class="c8 c10 rdt_TableCol"
+                class="c7 c9 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-name"
                   role="columnheader"
                   tabindex="0"
@@ -495,7 +467,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -509,10 +481,10 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c8 c13 rdt_TableCol"
+                class="c7 c12 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-amount"
                   role="columnheader"
                   tabindex="0"
@@ -522,7 +494,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -539,10 +511,10 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c8 c14 rdt_TableCol"
+                class="c7 c13 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-fee"
                   role="columnheader"
                   tabindex="0"
@@ -552,7 +524,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -571,30 +543,30 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c15 rdt_TableBody"
+            class="c14 rdt_TableBody"
             offset="250px"
             role="rowgroup"
           >
             <div
-              class="c16 rdt_TableRow"
+              class="c15 rdt_TableRow"
               id="row-test-validator"
               role="row"
             >
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-icon-test-validator"
                 role="gridcell"
               />
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-status-test-validator"
                 role="gridcell"
               >
                 <svg
                   aria-label="Status is okay"
-                  class="c19"
+                  class="c18"
                   viewBox="0 0 24 24"
                 >
                   <path
@@ -606,7 +578,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                 </svg>
               </div>
               <div
-                class="c17 c10 c18 rdt_TableCell"
+                class="c16 c9 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-name-test-validator"
                 role="gridcell"
@@ -614,7 +586,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                 test-validator
               </div>
               <div
-                class="c17 c13 c18 rdt_TableCell"
+                class="c16 c12 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-amount-test-validator"
                 role="gridcell"
@@ -627,7 +599,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                     0.0000001
                   </div>
                   <span
-                    class="c20"
+                    class="c19"
                   >
                     <span
                       class="notranslate"
@@ -639,7 +611,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c17 c14 c18 rdt_TableCell"
+                class="c16 c13 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-fee-test-validator"
                 role="gridcell"
diff --git a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap
index 224f9bd5a3..005771b310 100644
--- a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap
+++ b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
-.c12 {
+.c11 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -12,25 +12,25 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   stroke: currentColor;
 }
 
-.c12 g {
+.c11 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c12 *:not([stroke])[fill='none'] {
+.c11 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c12 *[stroke*='#'],
-.c12 *[STROKE*='#'] {
+.c11 *[stroke*='#'],
+.c11 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c12 *[fill-rule],
-.c12 *[FILL-RULE],
-.c12 *[fill*='#'],
-.c12 *[FILL*='#'] {
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*='#'],
+.c11 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -66,22 +66,13 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   padding: 24px;
 }
 
-.c2 {
-  margin-top: 0px;
-  font-size: 34px;
-  line-height: 40px;
-  max-width: 816px;
-  font-weight: 600;
-  overflow-wrap: break-word;
-}
-
-.c20 {
+.c19 {
   font-size: 18px;
   line-height: 24px;
   color: #0500e2;
 }
 
-.c5 {
+.c4 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -98,7 +89,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   background-color: unset;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -106,7 +97,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   text-align: left;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -123,7 +114,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   border-bottom-style: solid;
 }
 
-.c8 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -142,7 +133,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   padding-right: 16px;
 }
 
-.c18 {
+.c17 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -159,7 +150,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   word-break: break-word;
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -176,7 +167,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   max-width: 34px;
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -191,7 +182,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   min-width: 15ex;
 }
 
-.c13 {
+.c12 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -212,7 +203,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c14 {
+.c13 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -227,11 +218,11 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   min-width: 100px;
 }
 
-.c19 {
+.c18 {
   font-weight: 400;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -251,13 +242,13 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   min-height: 48px;
 }
 
-.c17:not(:last-of-type) {
+.c16:not(:last-of-type) {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #AAAAAAaa;
 }
 
-.c17:hover {
+.c16:hover {
   color: unset;
   background-color: #88888833;
   -webkit-transition-duration: 0.15s;
@@ -270,11 +261,11 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   outline-color: unset;
 }
 
-.c17:hover {
+.c16:hover {
   cursor: pointer;
 }
 
-.c11 {
+.c10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -291,17 +282,17 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   user-select: none;
 }
 
-.c11:focus {
+.c10:focus {
   outline: none;
   color: unset;
 }
 
-.c11:hover {
+.c10:hover {
   color: unset;
 }
 
-.c11 span.__rdt_custom_sort_icon__ i,
-.c11 span.__rdt_custom_sort_icon__ svg {
+.c10 span.__rdt_custom_sort_icon__ i,
+.c10 span.__rdt_custom_sort_icon__ svg {
   opacity: 0;
   color: inherit;
   font-size: 18px !important;
@@ -319,23 +310,23 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   transition-property: transform;
 }
 
-.c11 span.__rdt_custom_sort_icon__.asc i,
-.c11 span.__rdt_custom_sort_icon__.asc svg {
+.c10 span.__rdt_custom_sort_icon__.asc i,
+.c10 span.__rdt_custom_sort_icon__.asc svg {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.c11:hover {
+.c10:hover {
   cursor: pointer;
 }
 
-.c11:hover span,
-.c11:hover span.__rdt_custom_sort_icon__ * {
+.c10:hover span,
+.c10:hover span.__rdt_custom_sort_icon__ * {
   opacity: 1;
 }
 
-.c15 {
+.c14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -353,16 +344,16 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   color: unset;
 }
 
-.c15:focus {
+.c14:focus {
   outline: none;
 }
 
-.c15:hover:not(:focus) {
+.c14:hover:not(:focus) {
   color: unset;
 }
 
-.c15 span.__rdt_custom_sort_icon__ i,
-.c15 span.__rdt_custom_sort_icon__ svg {
+.c14 span.__rdt_custom_sort_icon__ i,
+.c14 span.__rdt_custom_sort_icon__ svg {
   opacity: 1;
   color: inherit;
   font-size: 18px !important;
@@ -380,18 +371,18 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   transition-property: transform;
 }
 
-.c15 span.__rdt_custom_sort_icon__.asc i,
-.c15 span.__rdt_custom_sort_icon__.asc svg {
+.c14 span.__rdt_custom_sort_icon__.asc i,
+.c14 span.__rdt_custom_sort_icon__.asc svg {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.c15:hover {
+.c14:hover {
   cursor: pointer;
 }
 
-.c16 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -401,7 +392,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: inherit;
@@ -410,7 +401,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   min-height: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   width: 100%;
   display: table;
@@ -434,20 +425,6 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
 
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-top: 0px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c2 {
-    font-size: 26px;
-    line-height: 32px;
-    max-width: 624px;
-  }
-}
-
 @media only screen and (max-width:768px) {
 
 }
@@ -459,37 +436,32 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
   <div
     class="c1"
   >
-    <h1
-      class="c2"
-    >
-      delegations.debondingDelegations
-    </h1>
     <div
-      class="c3"
+      class="c2"
     >
       <div
-        class="c4"
+        class="c3"
       >
         <div
-          class="c5 rdt_Table"
+          class="c4 rdt_Table"
           role="table"
         >
           <div
-            class="c6 rdt_TableHead"
+            class="c5 rdt_TableHead"
             role="rowgroup"
           >
             <div
-              class="c7 rdt_TableHeadRow"
+              class="c6 rdt_TableHeadRow"
               role="row"
             >
               <div
-                class="c8 c9 rdt_TableCol"
+                class="c7 c8 rdt_TableCol"
               />
               <div
-                class="c8 c10 rdt_TableCol"
+                class="c7 c9 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-name"
                   role="columnheader"
                   tabindex="0"
@@ -502,7 +474,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -516,10 +488,10 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c8 c13 rdt_TableCol"
+                class="c7 c12 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-amount"
                   role="columnheader"
                   tabindex="0"
@@ -529,7 +501,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -546,10 +518,10 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c8 c14 rdt_TableCol"
+                class="c7 c13 rdt_TableCol"
               >
                 <div
-                  class="c15 rdt_TableCol_Sortable"
+                  class="c14 rdt_TableCol_Sortable"
                   id="column-epoch"
                   role="columnheader"
                   tabindex="0"
@@ -562,7 +534,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -578,23 +550,23 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c16 rdt_TableBody"
+            class="c15 rdt_TableBody"
             offset="250px"
             role="rowgroup"
           >
             <div
-              class="c17 rdt_TableRow"
+              class="c16 rdt_TableRow"
               id="row-test-validator+100"
               role="row"
             >
               <div
-                class="c18 c9 c19 rdt_TableCell"
+                class="c17 c8 c18 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-icon-test-validator+100"
                 role="gridcell"
               />
               <div
-                class="c18 c10 c19 rdt_TableCell"
+                class="c17 c9 c18 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-name-test-validator+100"
                 role="gridcell"
@@ -602,7 +574,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                 test-validator
               </div>
               <div
-                class="c18 c13 c19 rdt_TableCell"
+                class="c17 c12 c18 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-amount-test-validator+100"
                 role="gridcell"
@@ -615,7 +587,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                     0.0000001
                   </div>
                   <span
-                    class="c20"
+                    class="c19"
                   >
                     <span
                       class="notranslate"
@@ -627,7 +599,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c18 c14 c19 rdt_TableCell"
+                class="c17 c13 c18 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-debondingTimeEnd-test-validator+100"
                 role="gridcell"
diff --git a/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap
index a335c34957..8b4abad6c4 100644
--- a/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap
@@ -32,16 +32,7 @@ exports[`<ValidatorList  /> empty should match snapshot 1`] = `
   padding: 24px;
 }
 
-.c2 {
-  margin-top: 0px;
-  font-size: 34px;
-  line-height: 40px;
-  max-width: 816px;
-  font-weight: 600;
-  overflow-wrap: break-word;
-}
-
-.c5 {
+.c4 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -58,7 +49,7 @@ exports[`<ValidatorList  /> empty should match snapshot 1`] = `
   background-color: unset;
 }
 
-.c3 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: inherit;
@@ -67,13 +58,13 @@ exports[`<ValidatorList  /> empty should match snapshot 1`] = `
   min-height: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
+.c5 {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -107,20 +98,6 @@ exports[`<ValidatorList  /> empty should match snapshot 1`] = `
 
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-top: 0px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c2 {
-    font-size: 26px;
-    line-height: 32px;
-    max-width: 624px;
-  }
-}
-
 @media only screen and (max-width:768px) {
 
 }
@@ -132,23 +109,18 @@ exports[`<ValidatorList  /> empty should match snapshot 1`] = `
   <div
     class="c1"
   >
-    <h1
-      class="c2"
-    >
-      common.validators
-    </h1>
     <div
-      class="c3"
+      class="c2"
     >
       <div
-        class="c4"
+        class="c3"
       >
         <div
-          class="c5 rdt_Table"
+          class="c4 rdt_Table"
           role="table"
         >
           <div
-            class="c6"
+            class="c5"
           >
             <div
               style="padding: 24px;"
@@ -164,7 +136,7 @@ exports[`<ValidatorList  /> empty should match snapshot 1`] = `
 `;
 
 exports[`<ValidatorList  /> list should match snapshot 1`] = `
-.c12 {
+.c11 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -175,30 +147,30 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   stroke: currentColor;
 }
 
-.c12 g {
+.c11 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c12 *:not([stroke])[fill='none'] {
+.c11 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c12 *[stroke*='#'],
-.c12 *[STROKE*='#'] {
+.c11 *[stroke*='#'],
+.c11 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c12 *[fill-rule],
-.c12 *[FILL-RULE],
-.c12 *[fill*='#'],
-.c12 *[FILL*='#'] {
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*='#'],
+.c11 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c19 {
+.c18 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -209,30 +181,30 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   stroke: #2ad5ab;
 }
 
-.c19 g {
+.c18 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c19 *:not([stroke])[fill='none'] {
+.c18 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c19 *[stroke*='#'],
-.c19 *[STROKE*='#'] {
+.c18 *[stroke*='#'],
+.c18 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c19 *[fill-rule],
-.c19 *[FILL-RULE],
-.c19 *[fill*='#'],
-.c19 *[FILL*='#'] {
+.c18 *[fill-rule],
+.c18 *[FILL-RULE],
+.c18 *[fill*='#'],
+.c18 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c21 {
+.c20 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -243,25 +215,25 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   stroke: #d24c00;
 }
 
-.c21 g {
+.c20 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c21 *:not([stroke])[fill='none'] {
+.c20 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c21 *[stroke*='#'],
-.c21 *[STROKE*='#'] {
+.c20 *[stroke*='#'],
+.c20 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c21 *[fill-rule],
-.c21 *[FILL-RULE],
-.c21 *[fill*='#'],
-.c21 *[FILL*='#'] {
+.c20 *[fill-rule],
+.c20 *[FILL-RULE],
+.c20 *[fill*='#'],
+.c20 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -297,22 +269,13 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   padding: 24px;
 }
 
-.c20 {
+.c19 {
   font-size: 18px;
   line-height: 24px;
   color: #0500e2;
 }
 
-.c2 {
-  margin-top: 0px;
-  font-size: 34px;
-  line-height: 40px;
-  max-width: 816px;
-  font-weight: 600;
-  overflow-wrap: break-word;
-}
-
-.c5 {
+.c4 {
   position: relative;
   box-sizing: border-box;
   display: -webkit-box;
@@ -329,7 +292,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   background-color: unset;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -337,7 +300,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   text-align: left;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -354,7 +317,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   border-bottom-style: solid;
 }
 
-.c8 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -373,7 +336,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   padding-right: 16px;
 }
 
-.c17 {
+.c16 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -390,7 +353,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   word-break: break-word;
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -407,7 +370,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   max-width: 34px;
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -422,7 +385,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   min-width: 15ex;
 }
 
-.c13 {
+.c12 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -443,7 +406,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c14 {
+.c13 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -464,11 +427,11 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c18 {
+.c17 {
   font-weight: 400;
 }
 
-.c16 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -488,13 +451,13 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   min-height: 48px;
 }
 
-.c16:not(:last-of-type) {
+.c15:not(:last-of-type) {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #AAAAAAaa;
 }
 
-.c16:hover {
+.c15:hover {
   color: unset;
   background-color: #88888833;
   -webkit-transition-duration: 0.15s;
@@ -507,11 +470,11 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   outline-color: unset;
 }
 
-.c16:hover {
+.c15:hover {
   cursor: pointer;
 }
 
-.c11 {
+.c10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -528,17 +491,17 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   user-select: none;
 }
 
-.c11:focus {
+.c10:focus {
   outline: none;
   color: unset;
 }
 
-.c11:hover {
+.c10:hover {
   color: unset;
 }
 
-.c11 span.__rdt_custom_sort_icon__ i,
-.c11 span.__rdt_custom_sort_icon__ svg {
+.c10 span.__rdt_custom_sort_icon__ i,
+.c10 span.__rdt_custom_sort_icon__ svg {
   opacity: 0;
   color: inherit;
   font-size: 18px !important;
@@ -556,23 +519,23 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   transition-property: transform;
 }
 
-.c11 span.__rdt_custom_sort_icon__.asc i,
-.c11 span.__rdt_custom_sort_icon__.asc svg {
+.c10 span.__rdt_custom_sort_icon__.asc i,
+.c10 span.__rdt_custom_sort_icon__.asc svg {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.c11:hover {
+.c10:hover {
   cursor: pointer;
 }
 
-.c11:hover span,
-.c11:hover span.__rdt_custom_sort_icon__ * {
+.c10:hover span,
+.c10:hover span.__rdt_custom_sort_icon__ * {
   opacity: 1;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -582,7 +545,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: inherit;
@@ -591,7 +554,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   min-height: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   width: 100%;
   display: table;
@@ -611,28 +574,14 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
 
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-top: 0px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c2 {
-    font-size: 26px;
-    line-height: 32px;
-    max-width: 624px;
-  }
-}
-
 @media screen and (max-width:599px) {
-  .c13 {
+  .c12 {
     display: none;
   }
 }
 
 @media screen and (max-width:599px) {
-  .c14 {
+  .c13 {
     display: none;
   }
 }
@@ -648,40 +597,35 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
   <div
     class="c1"
   >
-    <h1
-      class="c2"
-    >
-      common.validators
-    </h1>
     <div
-      class="c3"
+      class="c2"
     >
       <div
-        class="c4"
+        class="c3"
       >
         <div
-          class="c5 rdt_Table"
+          class="c4 rdt_Table"
           role="table"
         >
           <div
-            class="c6 rdt_TableHead"
+            class="c5 rdt_TableHead"
             role="rowgroup"
           >
             <div
-              class="c7 rdt_TableHeadRow"
+              class="c6 rdt_TableHeadRow"
               role="row"
             >
               <div
-                class="c8 c9 rdt_TableCol"
+                class="c7 c8 rdt_TableCol"
               />
               <div
-                class="c8 c9 rdt_TableCol"
+                class="c7 c8 rdt_TableCol"
               />
               <div
-                class="c8 c10 rdt_TableCol"
+                class="c7 c9 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-name"
                   role="columnheader"
                   tabindex="0"
@@ -694,7 +638,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -708,10 +652,10 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c8 c13 rdt_TableCol"
+                class="c7 c12 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-escrow"
                   role="columnheader"
                   tabindex="0"
@@ -721,7 +665,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -738,10 +682,10 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c8 c14 rdt_TableCol"
+                class="c7 c13 rdt_TableCol"
               >
                 <div
-                  class="c11 rdt_TableCol_Sortable"
+                  class="c10 rdt_TableCol_Sortable"
                   id="column-fee"
                   role="columnheader"
                   tabindex="0"
@@ -751,7 +695,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                   >
                     <svg
                       aria-label="Down"
-                      class="c12"
+                      class="c11"
                       viewBox="0 0 24 24"
                     >
                       <path
@@ -770,30 +714,30 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c15 rdt_TableBody"
+            class="c14 rdt_TableBody"
             offset="250px"
             role="rowgroup"
           >
             <div
-              class="c16 rdt_TableRow"
+              class="c15 rdt_TableRow"
               id="row-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz"
               role="row"
             >
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-icon-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz"
                 role="gridcell"
               />
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-status-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz"
                 role="gridcell"
               >
                 <svg
                   aria-label="Status is okay"
-                  class="c19"
+                  class="c18"
                   viewBox="0 0 24 24"
                 >
                   <path
@@ -805,7 +749,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </svg>
               </div>
               <div
-                class="c17 c10 c18 rdt_TableCell"
+                class="c16 c9 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-name-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz"
                 role="gridcell"
@@ -813,7 +757,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 test-validator1
               </div>
               <div
-                class="c17 c13 c18 rdt_TableCell"
+                class="c16 c12 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-escrow-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz"
                 role="gridcell"
@@ -826,7 +770,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                     0
                   </div>
                   <span
-                    class="c20"
+                    class="c19"
                   >
                     <span
                       class="notranslate"
@@ -838,7 +782,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c17 c14 c18 rdt_TableCell"
+                class="c16 c13 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-fee-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz"
                 role="gridcell"
@@ -847,25 +791,25 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c16 rdt_TableRow"
+              class="c15 rdt_TableRow"
               id="row-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7"
               role="row"
             >
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-icon-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7"
                 role="gridcell"
               />
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-status-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7"
                 role="gridcell"
               >
                 <svg
                   aria-label="Status is unknown"
-                  class="c21"
+                  class="c20"
                   viewBox="0 0 24 24"
                 >
                   <path
@@ -877,7 +821,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </svg>
               </div>
               <div
-                class="c17 c10 c18 rdt_TableCell"
+                class="c16 c9 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-name-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7"
                 role="gridcell"
@@ -885,7 +829,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 test-validator3
               </div>
               <div
-                class="c17 c13 c18 rdt_TableCell"
+                class="c16 c12 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-escrow-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7"
                 role="gridcell"
@@ -898,7 +842,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                     0
                   </div>
                   <span
-                    class="c20"
+                    class="c19"
                   >
                     <span
                       class="notranslate"
@@ -910,7 +854,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c17 c14 c18 rdt_TableCell"
+                class="c16 c13 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-fee-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7"
                 role="gridcell"
@@ -919,25 +863,25 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c16 rdt_TableRow"
+              class="c15 rdt_TableRow"
               id="row-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe"
               role="row"
             >
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-icon-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe"
                 role="gridcell"
               />
               <div
-                class="c17 c9 c18 rdt_TableCell"
+                class="c16 c8 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-status-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe"
                 role="gridcell"
               >
                 <svg
                   aria-label="Status is critical"
-                  class="c21"
+                  class="c20"
                   viewBox="0 0 24 24"
                 >
                   <path
@@ -949,7 +893,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </svg>
               </div>
               <div
-                class="c17 c10 c18 rdt_TableCell"
+                class="c16 c9 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-name-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe"
                 role="gridcell"
@@ -957,7 +901,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 test-validator2
               </div>
               <div
-                class="c17 c13 c18 rdt_TableCell"
+                class="c16 c12 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-escrow-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe"
                 role="gridcell"
@@ -970,7 +914,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                     0
                   </div>
                   <span
-                    class="c20"
+                    class="c19"
                   >
                     <span
                       class="notranslate"
@@ -982,7 +926,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c17 c14 c18 rdt_TableCell"
+                class="c16 c13 c17 rdt_TableCell"
                 data-tag="allowRowEvents"
                 id="cell-fee-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe"
                 role="gridcell"