Cleanup Bootstrap 3 code in the Account settings page (#24058)

* Remove the Bootstrap 5 version utilities

* Remove Account settings LESS stylesheet and unused styles

* Prefer using the OLFormText wrapper component instead of FormText

* Remove the Bootstrap 3 version stories

* Replace Font Awesome icons to Material icons

* Fix the heading hierarchy

* Cleanup unused translation

* Restore ellipsis to the text of two loading spinners

* Add loading button tests back and add some button loading labels

---------

Co-authored-by: Tim Down <158919+timdown@users.noreply.github.com>
GitOrigin-RevId: 283a9167c8c78bf0fe5062840ded6917dcd6263b

services/web/test/frontend/features/project-list/components/notifications.test.tsx

@@ -875,7 +875,7 @@ describe('<UserNotifications />', function () {
       fireEvent.click(
         screen.getByRole('button', { name: /resend confirmation email/i })
       )
-      await waitForElementToBeRemoved(() => screen.getByText('Loading'))
+      await waitForElementToBeRemoved(() => screen.getByText('Sending…'))
       expect(sendReconfirmationMock.calls()).to.have.lengthOf(2)
     })
 

services/web/test/frontend/features/settings/components/account-info-section.test.tsx

@@ -90,7 +90,7 @@ describe('<AccountInfoSection />', function () {
         name: 'Update',
       })
     )
-    await screen.findByRole('button', { name: 'Loading' })
+    await screen.findByRole('button', { name: /saving/i })
 
     finishUpdateCall(200)
     await screen.findByRole('button', {

services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx

@@ -69,7 +69,7 @@ async function confirmCodeForEmail(email: string) {
   })
   fireEvent.click(submitCodeBtn)
   await waitForElementToBeRemoved(() =>
-    screen.getByRole('button', { name: /Loading/i })
+    screen.getByRole('button', { name: /confirming/i })
   )
 }
 
@@ -221,7 +221,7 @@ describe('<EmailsSection />', function () {
     )
 
     await confirmCodeForEmail(userEmailData.email)
-    screen.getByText(userEmailData.email)
+    await screen.findByText(userEmailData.email)
   })
 
   it('fails to add add new email address', async function () {
@@ -381,8 +381,8 @@ describe('<EmailsSection />', function () {
 
     await confirmCodeForEmail(userEmailData.email)
 
-    screen.getByText(userEmailData.affiliation.role!, { exact: false })
-    screen.getByText(customDepartment, { exact: false })
+    await screen.findByText(userEmailData.affiliation.role!, { exact: false })
+    await screen.findByText(customDepartment, { exact: false })
   })
 
   it('autocompletes institution name', async function () {
@@ -528,10 +528,12 @@ describe('<EmailsSection />', function () {
       department: userEmailData.affiliation?.department,
     })
 
-    screen.getByText(userEmailData.email)
-    screen.getByText(newUniversity)
-    screen.getByText(userEmailData.affiliation.role!, { exact: false })
-    screen.getByText(userEmailData.affiliation.department!, { exact: false })
+    await screen.findByText(userEmailData.email)
+    await screen.findByText(newUniversity)
+    await screen.findByText(userEmailData.affiliation.role!, { exact: false })
+    await screen.findByText(userEmailData.affiliation.department!, {
+      exact: false,
+    })
   })
 
   it('shows country, university, role and department fields based on whether `change` was clicked or not', async function () {

services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx

@@ -195,7 +195,7 @@ describe('user role and institution', function () {
       screen.getByRole('button', { name: /saving/i })
     )
 
-    screen.getByText(roleValue, { exact: false })
-    screen.getByText(departmentValue, { exact: false })
+    await screen.findByText(roleValue, { exact: false })
+    await screen.findByText(departmentValue, { exact: false })
   })
 })

services/web/test/frontend/features/settings/components/emails/reconfirmation-info.test.tsx

@@ -161,7 +161,7 @@ describe('<ReconfirmationInfo/>', function () {
         // commented out as it's already gone by this point
         // await screen.findByText(/Sending/)
         expect(fetchMock.called()).to.be.true
-        await waitForElementToBeRemoved(() => screen.getByText(/Sending/))
+        await waitForElementToBeRemoved(() => screen.getByText('Sending…'))
         await screen.findByRole('button', {
           name: 'Resend confirmation email',
         })