From cd358e492c1cd3833c7ab27d9514150b22b49647 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Fri, 26 Apr 2024 05:10:44 +0200
Subject: [PATCH 1/2] Make Total balance font-size equal to other balance
 fields

---
 .changelog/2005.trivial.md                    |   1 +
 .../Features/AccountSummary/index.tsx         |  19 +-
 .../__snapshots__/index.test.tsx.snap         | 216 ++++++++----------
 3 files changed, 101 insertions(+), 135 deletions(-)
 create mode 100644 .changelog/2005.trivial.md

diff --git a/.changelog/2005.trivial.md b/.changelog/2005.trivial.md
new file mode 100644
index 0000000000..4a0ab38359
--- /dev/null
+++ b/.changelog/2005.trivial.md
@@ -0,0 +1 @@
+Make Total balance font-size equal to other balance fields
diff --git a/src/app/pages/AccountPage/Features/AccountSummary/index.tsx b/src/app/pages/AccountPage/Features/AccountSummary/index.tsx
index 5aa7680d6b..ed4d5e61d3 100644
--- a/src/app/pages/AccountPage/Features/AccountSummary/index.tsx
+++ b/src/app/pages/AccountPage/Features/AccountSummary/index.tsx
@@ -4,7 +4,6 @@ import { AlertBox } from 'app/components/AlertBox'
 import { AmountFormatter } from 'app/components/AmountFormatter'
 import { AnchorLink } from 'app/components/AnchorLink'
 import { Box } from 'grommet/es6/components/Box'
-import { Text } from 'grommet/es6/components/Text'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { QRCodeCanvas } from 'qrcode.react'
 import { useContext, useState } from 'react'
@@ -48,12 +47,6 @@ const StyledDescriptionList = styled.dl`
       :not(:last-of-type) {
         margin-bottom: ${({ theme }) => theme.global?.edgeSize?.xsmall};
       }
-
-      :first-of-type {
-        font-size: ${({ theme }) => theme.text?.large?.size};
-        line-height: ${({ theme }) => theme.text?.large?.height};
-        margin-bottom: ${({ theme }) => theme.global?.edgeSize?.small};
-      }
     }
   }
 
@@ -74,12 +67,6 @@ const StyledDescriptionList = styled.dl`
       :not(:last-of-type) {
         margin-bottom: ${({ theme }) => theme.global?.edgeSize?.xxsmall};
       }
-
-      :first-of-type {
-        font-size: ${({ theme }) => theme.text?.medium?.size};
-        line-height: ${({ theme }) => theme.text?.medium?.height};
-        margin-bottom: ${({ theme }) => theme.global?.edgeSize?.xsmall};
-      }
     }
   }
 `
@@ -152,11 +139,7 @@ export function AccountSummary({
               />
             )}
             <StyledDescriptionList data-testid="account-balance-summary">
-              <dt>
-                <Text size={isMobile ? 'medium' : 'large'}>
-                  {t('account.summary.balance.total', 'Total')}
-                </Text>
-              </dt>
+              <dt>{t('account.summary.balance.total', 'Total')}</dt>
               <dd data-testid="account-balance-total">
                 <AmountFormatter amount={balance.total} smallTicker={true} />
               </dd>
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 dbb4e83df1..5ef265ed3c 100644
--- a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex: 1 1;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -149,7 +149,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -166,7 +166,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-wrap: wrap;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -186,7 +186,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-basis: 32ex;
 }
 
-.c19 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -203,7 +203,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   padding: 24px;
 }
 
-.c21 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -218,7 +218,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -237,7 +237,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c29 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -257,7 +257,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-basis: 80ex;
 }
 
-.c30 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -272,7 +272,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c32 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -350,7 +350,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   padding-bottom: 12px;
 }
 
-.c24 {
+.c23 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -372,14 +372,14 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   line-height: normal;
 }
 
-.c16 {
+.c15 {
   font-size: 12px;
   line-height: 18px;
   color: #0500e2;
   font-weight: 600;
 }
 
-.c20 {
+.c19 {
   margin-left: 12px;
   margin-right: 12px;
   margin-top: 6px;
@@ -388,12 +388,12 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   line-height: 24px;
 }
 
-.c14 {
+.c32 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c31 {
+.c30 {
   font-size: 26px;
   line-height: 32px;
   max-width: 624px;
@@ -461,7 +461,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c28 {
+.c27 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -490,51 +490,51 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c28:hover {
+.c27:hover {
   box-shadow: 0px 0px 0px 2px #0500e2;
 }
 
-.c28:focus {
+.c27:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c28:focus > circle,
-.c28:focus > ellipse,
-.c28:focus > line,
-.c28:focus > path,
-.c28:focus > polygon,
-.c28:focus > polyline,
-.c28:focus > rect {
+.c27:focus > circle,
+.c27:focus > ellipse,
+.c27:focus > line,
+.c27:focus > path,
+.c27:focus > polygon,
+.c27:focus > polyline,
+.c27:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c28:focus::-moz-focus-inner {
+.c27:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c28:focus:not(:focus-visible) {
+.c27:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c28:focus:not(:focus-visible) > circle,
-.c28:focus:not(:focus-visible) > ellipse,
-.c28:focus:not(:focus-visible) > line,
-.c28:focus:not(:focus-visible) > path,
-.c28:focus:not(:focus-visible) > polygon,
-.c28:focus:not(:focus-visible) > polyline,
-.c28:focus:not(:focus-visible) > rect {
+.c27:focus:not(:focus-visible) > circle,
+.c27:focus:not(:focus-visible) > ellipse,
+.c27:focus:not(:focus-visible) > line,
+.c27:focus:not(:focus-visible) > path,
+.c27:focus:not(:focus-visible) > polygon,
+.c27:focus:not(:focus-visible) > polyline,
+.c27:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c28:focus:not(:focus-visible)::-moz-focus-inner {
+.c27:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c23 {
+.c22 {
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
@@ -555,49 +555,49 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   border: none;
 }
 
-.c23::-webkit-input-placeholder {
+.c22::-webkit-input-placeholder {
   color: #AAAAAA;
 }
 
-.c23::-moz-placeholder {
+.c22::-moz-placeholder {
   color: #AAAAAA;
 }
 
-.c23:-ms-input-placeholder {
+.c22:-ms-input-placeholder {
   color: #AAAAAA;
 }
 
-.c23::-webkit-search-decoration {
+.c22::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c23::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c23:-moz-placeholder,
-.c23::-moz-placeholder {
+.c22:-moz-placeholder,
+.c22::-moz-placeholder {
   opacity: 1;
 }
 
-.c23::-webkit-input-placeholder {
+.c22::-webkit-input-placeholder {
   font-size: 14px;
 }
 
-.c23::-moz-placeholder {
+.c22::-moz-placeholder {
   font-size: 14px;
 }
 
-.c23:-ms-input-placeholder {
+.c22:-ms-input-placeholder {
   font-size: 14px;
 }
 
-.c23::placeholder {
+.c22::placeholder {
   font-size: 14px;
 }
 
-.c26 {
+.c25 {
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
@@ -619,54 +619,54 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   padding-right: 48px;
 }
 
-.c26::-webkit-input-placeholder {
+.c25::-webkit-input-placeholder {
   color: #AAAAAA;
 }
 
-.c26::-moz-placeholder {
+.c25::-moz-placeholder {
   color: #AAAAAA;
 }
 
-.c26:-ms-input-placeholder {
+.c25:-ms-input-placeholder {
   color: #AAAAAA;
 }
 
-.c26::-webkit-search-decoration {
+.c25::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c26::-moz-focus-inner {
+.c25::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c26:-moz-placeholder,
-.c26::-moz-placeholder {
+.c25:-moz-placeholder,
+.c25::-moz-placeholder {
   opacity: 1;
 }
 
-.c26::-webkit-input-placeholder {
+.c25::-webkit-input-placeholder {
   font-size: 14px;
 }
 
-.c26::-moz-placeholder {
+.c25::-moz-placeholder {
   font-size: 14px;
 }
 
-.c26:-ms-input-placeholder {
+.c25:-ms-input-placeholder {
   font-size: 14px;
 }
 
-.c26::placeholder {
+.c25::placeholder {
   font-size: 14px;
 }
 
-.c22 {
+.c21 {
   position: relative;
   width: 100%;
 }
 
-.c25 {
+.c24 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -769,37 +769,37 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c19 {
+  .c18 {
     padding: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c21 {
+  .c20 {
     border-bottom: solid 1px rgba(0,0,0,0.33);
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c27 {
+  .c26 {
     margin-top: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c30 {
+  .c29 {
     margin: 0px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c32 {
+  .c31 {
     border: solid 1px #EDEDED;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c32 {
+  .c31 {
     padding: 24px;
   }
 }
@@ -823,13 +823,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c24 {
+  .c23 {
     height: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c31 {
+  .c30 {
     font-size: 18px;
     line-height: 24px;
     max-width: 432px;
@@ -849,13 +849,6 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   .c13 dd:not(:last-of-type) {
     margin-bottom: 6px;
   }
-
-  .c13 dt:first-of-type,
-  .c13 dd:first-of-type {
-    font-size: 22px;
-    line-height: 28px;
-    margin-bottom: 12px;
-  }
 }
 
 @media only screen and (max-width:768px) {
@@ -877,13 +870,6 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   .c13 dd:not(:last-of-type) {
     margin-bottom: 3px;
   }
-
-  .c13 dt:first-of-type,
-  .c13 dd:first-of-type {
-    font-size: 18px;
-    line-height: 24px;
-    margin-bottom: 6px;
-  }
 }
 
 <div
@@ -956,24 +942,20 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
             data-testid="account-balance-summary"
           >
             <dt>
-              <span
-                class="c14"
-              >
-                Total
-              </span>
+              Total
             </dt>
             <dd
               data-testid="account-balance-total"
             >
               <span>
                 <div
-                  class="c15"
+                  class="c14"
                   style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   100.000001111
                 </div>
                 <span
-                  class="c16"
+                  class="c15"
                 >
                   <span
                     class="notranslate"
@@ -990,13 +972,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
             <dd>
               <span>
                 <div
-                  class="c15"
+                  class="c14"
                   style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   100.0
                 </div>
                 <span
-                  class="c16"
+                  class="c15"
                 >
                   <span
                     class="notranslate"
@@ -1014,13 +996,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
             <dd>
               <span>
                 <div
-                  class="c15"
+                  class="c14"
                   style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   0.000001111
                 </div>
                 <span
-                  class="c16"
+                  class="c15"
                 >
                   <span
                     class="notranslate"
@@ -1037,13 +1019,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
             <dd>
               <span>
                 <div
-                  class="c15"
+                  class="c14"
                   style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   0.0
                 </div>
                 <span
-                  class="c16"
+                  class="c15"
                 >
                   <span
                     class="notranslate"
@@ -1062,39 +1044,39 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
       class="c2"
     />
     <div
-      class="c17"
+      class="c16"
       style="gap: 24px;"
     >
       <div
-        class="c18"
+        class="c17"
       >
         <div
           class="c3"
         >
           <form>
             <div
-              class="c19"
+              class="c18"
             >
               <div
                 class="c2 "
               >
                 <label
-                  class="c20"
+                  class="c19"
                   for="recipient-id"
                 >
                   Recipient
                 </label>
                 <div
-                  class="c21 "
+                  class="c20 "
                 >
                   <div
-                    class="c22"
+                    class="c21"
                   >
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
                       autocomplete="off"
-                      class="c23"
+                      class="c22"
                       id="recipient-id"
                       name="recipient"
                       placeholder="Enter an address"
@@ -1106,33 +1088,33 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c24"
+                class="c23"
               />
               <div
                 class="c2 "
               >
                 <label
-                  class="c20"
+                  class="c19"
                   for="amount-id"
                 >
                   Amount
                 </label>
                 <div
-                  class="c21 "
+                  class="c20 "
                 >
                   <div
-                    class="c22"
+                    class="c21"
                   >
                     <div
-                      class="c25"
+                      class="c24"
                     >
                       <span
-                        class="c16"
+                        class="c15"
                       />
                     </div>
                     <input
                       autocomplete="off"
-                      class="c26"
+                      class="c25"
                       id="amount-id"
                       min="0"
                       name="amount"
@@ -1146,13 +1128,13 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c24"
+                class="c23"
               />
               <div
-                class="c27"
+                class="c26"
               >
                 <button
-                  class="c28"
+                  class="c27"
                   type="submit"
                 >
                   Send
@@ -1163,21 +1145,21 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c29"
+        class="c28"
       >
         <div
-          class="c30"
+          class="c29"
         >
           <h3
-            class="c31"
+            class="c30"
           >
             Activity
           </h3>
           <div
-            class="c32"
+            class="c31"
           >
             <span
-              class="c14"
+              class="c32"
             >
               No transactions found.
             </span>

From 03d11db623478ac54a306d1498217df09647d73e Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 16 Jul 2024 18:29:12 +0200
Subject: [PATCH 2/2] Fix failing tests after removing headings from staking
 subpages

Fixes 4203665ca64980a2fda2ea0a1b1f671387737fda.
---
 playwright/tests/validators.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/playwright/tests/validators.spec.ts b/playwright/tests/validators.spec.ts
index 3247a49373..ee4a1697be 100644
--- a/playwright/tests/validators.spec.ts
+++ b/playwright/tests/validators.spec.ts
@@ -37,7 +37,6 @@ test.describe('Validators', () => {
     )
 
     await page.getByRole('link', { name: 'Stake' }).click()
-    await expect(page.getByRole('heading', { name: 'Validators' })).toBeVisible()
     // Wait for validators to be shown, then scroll to them to trigger lazy loading.
     await expect(page.getByText('Everstake')).toBeVisible()
     await page.getByText('Everstake').scrollIntoViewIfNeeded()