github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] Fixing styles on the Account Settings page

GitOrigin-RevId: f20d8ccdf762970e22829a15c65d674e3d402bcf
This commit is contained in:
Rebeka Dekany 2024-05-08 13:46:04 +02:00 committed by Copybot
parent 77e2206320
commit 3ae88d80bd
13 changed files with 32 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/js/features/settings/components/account-info-section.tsx
View file

@ -10,7 +10,7 @@ import { ExposedSettings } from '../../../../../types/exposed-settings'
import useAsync from '../../../shared/hooks/use-async' import useAsync from '../../../shared/hooks/use-async'
import { useUserContext } from '../../../shared/context/user-context' import { useUserContext } from '../../../shared/context/user-context'
import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper' 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() { function AccountInfoSection() {
const { t } = useTranslation() const { t } = useTranslation()

2
services/web/frontend/js/features/settings/components/emails-section.tsx
View file

@ -9,7 +9,7 @@ import EmailsHeader from './emails/header'
import EmailsRow from './emails/row' import EmailsRow from './emails/row'
import AddEmail from './emails/add-email' import AddEmail from './emails/add-email'
import Icon from '../../../shared/components/icon' 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 { ExposedSettings } from '../../../../../types/exposed-settings'
import { LeaversSurveyAlert } from './leavers-survey-alert' import { LeaversSurveyAlert } from './leavers-survey-alert'

8
services/web/frontend/js/features/settings/components/emails/add-email.tsx
View file

@ -149,9 +149,9 @@ function AddEmail() {
if (!isValidEmail(newEmail)) { if (!isValidEmail(newEmail)) {
return ( return (
<form>
<Layout isError={isError} error={error}> <Layout isError={isError} error={error}>
<ReCaptcha2 page="addEmail" ref={recaptchaRef} /> <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
<form>
<ColWrapper md={8}> <ColWrapper md={8}>
<Cell> <Cell>
{InputComponent} {InputComponent}
@ -170,8 +170,8 @@ function AddEmail() {
<AddNewEmailBtn email={newEmail} disabled /> <AddNewEmailBtn email={newEmail} disabled />
</Cell> </Cell>
</ColWrapper> </ColWrapper>
</form>
</Layout> </Layout>
</form>
) )
} }
@ -179,9 +179,9 @@ function AddEmail() {
newEmailMatchedDomain && ssoAvailableForDomain(newEmailMatchedDomain) newEmailMatchedDomain && ssoAvailableForDomain(newEmailMatchedDomain)
return ( return (
<form>
<Layout isError={isError} error={error}> <Layout isError={isError} error={error}>
<ReCaptcha2 page="addEmail" ref={recaptchaRef} /> <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
<form>
<ColWrapper md={8}> <ColWrapper md={8}>
<Cell> <Cell>
{InputComponent} {InputComponent}
@ -232,8 +232,8 @@ function AddEmail() {
</Cell> </Cell>
</ColWrapper> </ColWrapper>
)} )}
</form>
</Layout> </Layout>
</form>
) )
} }

2
services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
View file

@ -2,7 +2,7 @@ import Icon from '../../../../../shared/components/icon'
import { UseAsyncReturnType } from '../../../../../shared/hooks/use-async' import { UseAsyncReturnType } from '../../../../../shared/hooks/use-async'
import { getUserFacingMessage } from '../../../../../infrastructure/fetch-json' import { getUserFacingMessage } from '../../../../../infrastructure/fetch-json'
import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper' 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 = { type LayoutProps = {
children: React.ReactNode children: React.ReactNode

2
services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
View file

@ -5,7 +5,7 @@ import ReconfirmationInfoSuccess from './reconfirmation-info/reconfirmation-info
import ReconfirmationInfoPromptText from './reconfirmation-info/reconfirmation-info-prompt-text' import ReconfirmationInfoPromptText from './reconfirmation-info/reconfirmation-info-prompt-text'
import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper' import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper'
import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-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 { isBootstrap5 } from '@/features/utils/bootstrap-5'
import Icon from '@/shared/components/icon' import Icon from '@/shared/components/icon'
import { useUserEmailsContext } from '@/features/settings/context/user-email-context' import { useUserEmailsContext } from '@/features/settings/context/user-email-context'

2
services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
View file

@ -2,7 +2,7 @@ import { useState } from 'react'
import { useTranslation, Trans } from 'react-i18next' import { useTranslation, Trans } from 'react-i18next'
import Icon from '../../../../shared/components/icon' import Icon from '../../../../shared/components/icon'
import getMeta from '../../../../utils/meta' 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 = { type InstitutionLink = {
universityName: string universityName: string

2
services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
View file

@ -2,7 +2,7 @@ import { useTranslation, Trans } from 'react-i18next'
import getMeta from '../../../../utils/meta' import getMeta from '../../../../utils/meta'
import { FetchError } from '../../../../infrastructure/fetch-json' import { FetchError } from '../../../../infrastructure/fetch-json'
import { ExposedSettings } from '../../../../../../types/exposed-settings' 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 = { type LeaveModalFormErrorProps = {
error: FetchError error: FetchError

2
services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx
View file

@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import usePersistedState from '../../../shared/hooks/use-persisted-state' import usePersistedState from '../../../shared/hooks/use-persisted-state'
import { useUserEmailsContext } from '../context/user-email-context' import { useUserEmailsContext } from '../context/user-email-context'
import { sendMB } from '../../../infrastructure/event-tracking' 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') { function sendMetrics(segmentation: 'view' | 'click' | 'close') {
sendMB('institutional-leavers-survey-notification', { type: segmentation }) sendMB('institutional-leavers-survey-notification', { type: segmentation })

2
services/web/frontend/js/features/settings/components/linking-section.tsx
View file

@ -6,7 +6,7 @@ import { SSOLinkingWidget } from './linking/sso-widget'
import getMeta from '../../../utils/meta' import getMeta from '../../../utils/meta'
import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user' import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user'
import { useFeatureFlag } from '@/shared/context/split-test-context' 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() { function LinkingSection() {
useBroadcastUser() useBroadcastUser()

2
services/web/frontend/js/features/settings/components/password-section.tsx
View file

@ -11,7 +11,7 @@ import { ExposedSettings } from '../../../../../types/exposed-settings'
import { PasswordStrengthOptions } from '../../../../../types/password-strength-options' import { PasswordStrengthOptions } from '../../../../../types/password-strength-options'
import useAsync from '../../../shared/hooks/use-async' import useAsync from '../../../shared/hooks/use-async'
import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper' 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 = { type PasswordUpdateResult = {
message?: { message?: {

0
services/web/frontend/js/features/ui/components/bootstrap-5/notification-wrapper.tsx → services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/notification-wrapper.tsx
View file

6
services/web/frontend/stylesheets/bootstrap-5/base/typography.scss
View file

@ -1,6 +1,6 @@
// Headings // Headings
// Apply margin above the heading only when it has a sibling // Headings
h1, h1,
h2, h2,
h3, h3,
@ -13,7 +13,9 @@ h6,
.h4, .h4,
.h5, .h5,
.h6 { .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; margin-top: $spacing-08;
} }
} }

9
services/web/frontend/stylesheets/bootstrap-5/components/button.scss
View file

@ -118,6 +118,15 @@
&.btn-danger { &.btn-danger {
color: var(--content-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;
}
} }
} }