From 3ae88d80bd1dbb496df9cdfacba9a56956b33327 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Wed, 8 May 2024 13:46:04 +0200
Subject: [PATCH] Merge pull request #18201 from overleaf/rd-bootstrap-fixes

[web] Fixing styles on the Account Settings page

GitOrigin-RevId: f20d8ccdf762970e22829a15c65d674e3d402bcf
---
 .../components/account-info-section.tsx       |  2 +-
 .../settings/components/emails-section.tsx    |  2 +-
 .../settings/components/emails/add-email.tsx  | 20 +++++++++----------
 .../components/emails/add-email/layout.tsx    |  2 +-
 .../components/emails/reconfirmation-info.tsx |  2 +-
 .../settings/components/emails/sso-alert.tsx  |  2 +-
 .../components/leave/modal-form-error.tsx     |  2 +-
 .../components/leavers-survey-alert.tsx       |  2 +-
 .../settings/components/linking-section.tsx   |  2 +-
 .../settings/components/password-section.tsx  |  2 +-
 .../{ => wrappers}/notification-wrapper.tsx   |  0
 .../bootstrap-5/base/typography.scss          |  6 ++++--
 .../bootstrap-5/components/button.scss        |  9 +++++++++
 13 files changed, 32 insertions(+), 21 deletions(-)
 rename services/web/frontend/js/features/ui/components/bootstrap-5/{ => wrappers}/notification-wrapper.tsx (100%)

diff --git a/services/web/frontend/js/features/settings/components/account-info-section.tsx b/services/web/frontend/js/features/settings/components/account-info-section.tsx
index 1827a9a7ad..4bbd9df24a 100644
--- a/services/web/frontend/js/features/settings/components/account-info-section.tsx
+++ b/services/web/frontend/js/features/settings/components/account-info-section.tsx
@@ -10,7 +10,7 @@ import { ExposedSettings } from '../../../../../types/exposed-settings'
 import useAsync from '../../../shared/hooks/use-async'
 import { useUserContext } from '../../../shared/context/user-context'
 import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 function AccountInfoSection() {
   const { t } = useTranslation()
diff --git a/services/web/frontend/js/features/settings/components/emails-section.tsx b/services/web/frontend/js/features/settings/components/emails-section.tsx
index 63e1845126..866fc12115 100644
--- a/services/web/frontend/js/features/settings/components/emails-section.tsx
+++ b/services/web/frontend/js/features/settings/components/emails-section.tsx
@@ -9,7 +9,7 @@ import EmailsHeader from './emails/header'
 import EmailsRow from './emails/row'
 import AddEmail from './emails/add-email'
 import Icon from '../../../shared/components/icon'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 import { ExposedSettings } from '../../../../../types/exposed-settings'
 import { LeaversSurveyAlert } from './leavers-survey-alert'
 
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email.tsx b/services/web/frontend/js/features/settings/components/emails/add-email.tsx
index 85f3413c4e..c7bd833c61 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email.tsx
@@ -149,9 +149,9 @@ function AddEmail() {
 
   if (!isValidEmail(newEmail)) {
     return (
-      <Layout isError={isError} error={error}>
-        <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
-        <form>
+      <form>
+        <Layout isError={isError} error={error}>
+          <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
           <ColWrapper md={8}>
             <Cell>
               {InputComponent}
@@ -170,8 +170,8 @@ function AddEmail() {
               <AddNewEmailBtn email={newEmail} disabled />
             </Cell>
           </ColWrapper>
-        </form>
-      </Layout>
+        </Layout>
+      </form>
     )
   }
 
@@ -179,9 +179,9 @@ function AddEmail() {
     newEmailMatchedDomain && ssoAvailableForDomain(newEmailMatchedDomain)
 
   return (
-    <Layout isError={isError} error={error}>
-      <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
-      <form>
+    <form>
+      <Layout isError={isError} error={error}>
+        <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
         <ColWrapper md={8}>
           <Cell>
             {InputComponent}
@@ -232,8 +232,8 @@ function AddEmail() {
             </Cell>
           </ColWrapper>
         )}
-      </form>
-    </Layout>
+      </Layout>
+    </form>
   )
 }
 
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
index ed63c7c8d6..4f021fe95e 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
@@ -2,7 +2,7 @@ import Icon from '../../../../../shared/components/icon'
 import { UseAsyncReturnType } from '../../../../../shared/hooks/use-async'
 import { getUserFacingMessage } from '../../../../../infrastructure/fetch-json'
 import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 type LayoutProps = {
   children: React.ReactNode
diff --git a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
index e1f844803b..48aa9bce4d 100644
--- a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
@@ -5,7 +5,7 @@ import ReconfirmationInfoSuccess from './reconfirmation-info/reconfirmation-info
 import ReconfirmationInfoPromptText from './reconfirmation-info/reconfirmation-info-prompt-text'
 import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper'
 import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-wrapper'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 import Icon from '@/shared/components/icon'
 import { useUserEmailsContext } from '@/features/settings/context/user-email-context'
diff --git a/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx b/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
index 9319f81c5e..52ba09e5e6 100644
--- a/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import Icon from '../../../../shared/components/icon'
 import getMeta from '../../../../utils/meta'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 type InstitutionLink = {
   universityName: string
diff --git a/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx b/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
index f20032e745..a4c1f81c51 100644
--- a/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
+++ b/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
@@ -2,7 +2,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import getMeta from '../../../../utils/meta'
 import { FetchError } from '../../../../infrastructure/fetch-json'
 import { ExposedSettings } from '../../../../../../types/exposed-settings'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 type LeaveModalFormErrorProps = {
   error: FetchError
diff --git a/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx b/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx
index 4789b0d91d..9c28945032 100644
--- a/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx
+++ b/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import { useUserEmailsContext } from '../context/user-email-context'
 import { sendMB } from '../../../infrastructure/event-tracking'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 function sendMetrics(segmentation: 'view' | 'click' | 'close') {
   sendMB('institutional-leavers-survey-notification', { type: segmentation })
diff --git a/services/web/frontend/js/features/settings/components/linking-section.tsx b/services/web/frontend/js/features/settings/components/linking-section.tsx
index dfc26ff86b..c92991340e 100644
--- a/services/web/frontend/js/features/settings/components/linking-section.tsx
+++ b/services/web/frontend/js/features/settings/components/linking-section.tsx
@@ -6,7 +6,7 @@ import { SSOLinkingWidget } from './linking/sso-widget'
 import getMeta from '../../../utils/meta'
 import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 function LinkingSection() {
   useBroadcastUser()
diff --git a/services/web/frontend/js/features/settings/components/password-section.tsx b/services/web/frontend/js/features/settings/components/password-section.tsx
index 3d42fb040e..cd88333ae0 100644
--- a/services/web/frontend/js/features/settings/components/password-section.tsx
+++ b/services/web/frontend/js/features/settings/components/password-section.tsx
@@ -11,7 +11,7 @@ import { ExposedSettings } from '../../../../../types/exposed-settings'
 import { PasswordStrengthOptions } from '../../../../../types/password-strength-options'
 import useAsync from '../../../shared/hooks/use-async'
 import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/notification-wrapper'
+import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
 
 type PasswordUpdateResult = {
   message?: {
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/notification-wrapper.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/notification-wrapper.tsx
similarity index 100%
rename from services/web/frontend/js/features/ui/components/bootstrap-5/notification-wrapper.tsx
rename to services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/notification-wrapper.tsx
diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss b/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss
index 12212d27b7..7d0884af37 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss
@@ -1,6 +1,6 @@
 // Headings
 
-// Apply margin above the heading only when it has a sibling
+// Headings
 h1,
 h2,
 h3,
@@ -13,7 +13,9 @@ h6,
 .h4,
 .h5,
 .h6 {
-  * > * + & {
+  // Apply margin above the heading only when it has a preceding sibling or is inside a row with a preceding sibling
+  * > * + &,
+  * + .row & {
     margin-top: $spacing-08;
   }
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
index 916f5f2b29..5a10892dce 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
@@ -118,6 +118,15 @@
 
   &.btn-danger {
     color: var(--content-danger);
+    //since it's a link, override the button states
+    &:active {
+      color: var(--content-danger);
+      background-color: transparent;
+    }
+    &:focus-visible {
+      background-color: transparent;
+      outline: -webkit-focus-ring-color auto 1px;
+    }
   }
 }