From 9120afffa5a3ecaf433c12cd0e48c0d5f1311726 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Thu, 30 May 2024 17:09:57 +0200 Subject: [PATCH] Merge pull request #18567 from overleaf/rd-bs5-settings-modal [web] Migrate the Git Integration settings on the Account Settings page to Bootstrap 5 GitOrigin-RevId: bafac941d3afaadaa046de07e18968d8e3692b1c --- .../components/emails/actions/remove.tsx | 2 +- .../features/ui/components/ol/ol-button.tsx | 3 ++ .../ui/components/ol/ol-icon-button.tsx | 6 ++- .../js/features/ui/components/ol/ol-modal.tsx | 1 - .../shared/components/copy-to-clipboard.tsx | 52 +++++++++++-------- .../bootstrap-5/base/typography.scss | 9 ++++ .../bootstrap-5/components/button.scss | 5 ++ .../bootstrap-5/components/modal.scss | 35 +++++++++++++ 8 files changed, 86 insertions(+), 27 deletions(-) diff --git a/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx b/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx index 214243c28f..c7dcebdf83 100644 --- a/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx +++ b/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx @@ -30,7 +30,7 @@ function DeleteButton({ disabled, isLoading, onClick }: DeleteButtonProps) { bsVersion({ bs5: 'delete', bs3: 'trash', - }) || 'trash' + }) as string } bs3Props={{ fw: true }} /> diff --git a/services/web/frontend/js/features/ui/components/ol/ol-button.tsx b/services/web/frontend/js/features/ui/components/ol/ol-button.tsx index a6725f0d46..4e5a0d48af 100644 --- a/services/web/frontend/js/features/ui/components/ol/ol-button.tsx +++ b/services/web/frontend/js/features/ui/components/ol/ol-button.tsx @@ -4,11 +4,14 @@ import type { ButtonProps } from '@/features/ui/components/types/button-props' import type { ButtonProps as BS3ButtonPropsBase } from 'react-bootstrap' import Button from '../bootstrap-5/button' +export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg' + export type OLButtonProps = ButtonProps & { bs3Props?: { bsStyle?: string | null className?: string loading?: React.ReactNode + bsSize?: BS3ButtonSize } } diff --git a/services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx b/services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx index 25d261ef9a..ea87d902c4 100644 --- a/services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx +++ b/services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx @@ -1,4 +1,4 @@ -import { BS3ButtonProps, mapBsButtonSizes } from './ol-button' +import { BS3ButtonProps, BS3ButtonSize, mapBsButtonSizes } from './ol-button' import { Button as BS3Button } from 'react-bootstrap' import type { IconButtonProps } from '@/features/ui/components/types/icon-button-props' import BootstrapVersionSwitcher from '../bootstrap-5/bootstrap-version-switcher' @@ -9,6 +9,8 @@ export type OLIconButtonProps = IconButtonProps & { bs3Props?: { loading?: React.ReactNode fw?: IconProps['fw'] + className?: string + bsSize?: BS3ButtonSize } } @@ -18,7 +20,7 @@ export default function OLIconButton(props: OLIconButtonProps) { const { fw, ...filterBs3Props } = bs3Props || {} const bs3ButtonProps: BS3ButtonProps = { - bsStyle: rest.variant, + bsStyle: rest.variant === 'secondary' ? 'default' : rest.variant, bsSize: mapBsButtonSizes(rest.size), disabled: rest.isLoading || rest.disabled, form: rest.form, diff --git a/services/web/frontend/js/features/ui/components/ol/ol-modal.tsx b/services/web/frontend/js/features/ui/components/ol/ol-modal.tsx index 991209cfea..d59eecfe2e 100644 --- a/services/web/frontend/js/features/ui/components/ol/ol-modal.tsx +++ b/services/web/frontend/js/features/ui/components/ol/ol-modal.tsx @@ -42,7 +42,6 @@ export default function OLModal({ children, ...props }: OLModalProps) { onHide: bs5Props.onHide, backdrop: bs5Props.backdrop, animation: bs5Props.animation, - dialogComponent: bs5Props.dialogAs, ...bs3Props, } diff --git a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx b/services/web/frontend/js/shared/components/copy-to-clipboard.tsx index 7fadc0d4a4..519d141812 100644 --- a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx +++ b/services/web/frontend/js/shared/components/copy-to-clipboard.tsx @@ -1,8 +1,9 @@ import { FC, memo, MouseEventHandler, useCallback, useState } from 'react' -import { Button } from 'react-bootstrap' import { useTranslation } from 'react-i18next' -import Tooltip from './tooltip' -import Icon from './icon' +import OLButton from '@/features/ui/components/ol/ol-button' +import OLTooltip from '@/features/ui/components/ol/ol-tooltip' +import OLIconButton from '@/features/ui/components/ol/ol-icon-button' +import { bsVersion } from '@/features/utils/bootstrap-5' export const CopyToClipboard = memo<{ content: string @@ -27,13 +28,10 @@ export const CopyToClipboard = memo<{ } return ( - {kind === 'text' ? ( @@ -42,43 +40,51 @@ export const CopyToClipboard = memo<{ )} - + ) }) CopyToClipboard.displayName = 'CopyToClipboard' const TextButton: FC<{ - handleClick: MouseEventHandler + ) } const IconButton: FC<{ - handleClick: MouseEventHandler + bs3Props={{ bsSize: 'xsmall' }} + icon={ + bsVersion({ + bs5: copied ? 'check' : 'content_copy', + bs3: copied ? 'check' : 'clipboard', + }) || '' + } + /> ) } diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss b/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss index 7d0884af37..49b51d0b2a 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss @@ -54,3 +54,12 @@ h6, .small { @include body-sm; } + +// Peformatted text, sample output, code, keyboard input elements +// E.g.: Git authentication token +code, +kbd, +pre, +samp { + @include body-base; +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss index 66d153bdda..bca56dd37e 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss @@ -201,3 +201,8 @@ a[role='button']:visited { color: var(--bs-btn-color); } + +// Copy icon button +.copy-button { + text-decoration: none; +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss index 486ac8884d..82ff7fd2c0 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss @@ -47,3 +47,38 @@ } } } + +// Git bridge modal +.git-bridge-copy { + background: var(--bg-light-secondary); + color: var(--content-primary); + padding: var(--spacing-05); + border-radius: var(--border-radius-base); + display: flex; + justify-content: center; + gap: var(--spacing-05); + align-items: center; + margin: var(--spacing-09) 0; + + & code { + color: var(--content-primary); + word-break: break-word; + } +} + +.git-bridge-optional-tokens { + border: 1px solid var(--border-primary); + border-radius: var(--border-radius-base); + padding: var(--spacing-07); + margin: var(--spacing-09) 0; +} + +.git-bridge-optional-tokens-header { + font-size: 120%; + font-weight: bold; + margin-bottom: var(--spacing-05); +} + +.git-bridge-optional-tokens-actions { + margin-top: var(--spacing-05); +}