Merge pull request #18201 from overleaf/rd-bootstrap-fixes

[web] Fixing styles on the Account Settings page

GitOrigin-RevId: f20d8ccdf762970e22829a15c65d674e3d402bcf

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()

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'
 

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>
   )
 }
 

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

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'

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

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

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 })

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()

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?: {

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;
   }
 }

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;
+    }
   }
 }