Merge pull request #18418 from overleaf/rd-bs5-cookie-banner

[web] Migrate the cookie banner to Bootstrap 5

GitOrigin-RevId: 79dd74e2cf09faab381f24101a3633b0377009a0
This commit is contained in:
Rebeka Dekany 2024-05-21 14:16:19 +02:00 committed by Copybot
parent 3434d8c908
commit 74f0483157
11 changed files with 32 additions and 17 deletions

View file

@ -8,8 +8,9 @@ function AddAnotherEmailBtn({ onClick, ...props }: OLButtonProps) {
<OLButton
variant="link"
onClick={onClick}
className="btn-inline-link"
bs3Props={{ bsStyle: null }}
{...props}
bs3Props={{ bsStyle: null, className: 'btn-inline-link' }}
>
{t('add_another_email')}
</OLButton>

View file

@ -10,7 +10,8 @@ function EmailAffiliatedWithInstitution({ onClick, ...props }: OLButtonProps) {
<OLButton
variant="link"
onClick={onClick}
bs3Props={{ bsStyle: null, className: 'btn-inline-link' }}
className="btn-inline-link"
bs3Props={{ bsStyle: null }}
{...props}
>
{t('let_us_know')}

View file

@ -17,7 +17,8 @@ function UniversityName({ name, onClick }: UniversityNameProps) {
<OLButton
variant="link"
onClick={onClick}
bs3Props={{ bsStyle: null, className: 'btn-inline-link' }}
className="btn-inline-link"
bs3Props={{ bsStyle: null }}
>
{t('change')}
</OLButton>

View file

@ -111,7 +111,7 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
<OLButton
onClick={handleChangeAffiliation}
variant="link"
bs3Props={{ className: 'btn-inline-link' }}
className="btn-inline-link"
>
{!affiliation.department && !affiliation.role
? t('add_role_and_department')
@ -160,7 +160,7 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
<OLButton
variant="link"
onClick={handleCancelAffiliationChange}
bs3Props={{ className: 'btn-inline-link' }}
className="btn-inline-link"
>
{t('save_or_cancel-cancel')}
</OLButton>

View file

@ -149,8 +149,8 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
variant="link"
disabled={state.isLoading}
onClick={handleRequestReconfirmation}
className="btn-inline-link"
bs3Props={{
className: 'btn-inline-link',
bsStyle: null,
}}
>
@ -208,7 +208,8 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
variant="link"
disabled={state.isLoading}
onClick={handleRequestReconfirmation}
bs3Props={{ className: 'btn-inline-link', bsStyle: null }}
className="btn-inline-link"
bs3Props={{ bsStyle: null }}
>
{t('resend_confirmation_email')}
</OLButton>

View file

@ -51,7 +51,8 @@ function ResendConfirmationEmailButton({
variant="link"
disabled={state.isLoading || isLoading}
onClick={handleResendConfirmationEmail}
bs3Props={{ bsStyle: null, className: 'btn-inline-link' }}
className="btn-inline-link"
bs3Props={{ bsStyle: null }}
>
{t('resend_confirmation_email')}
</OLButton>

View file

@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
import LeaveModal from './leave/modal'
import getMeta from '../../../utils/meta'
import OLButton from '@/features/ui/components/ol/ol-button'
import { bsVersion } from '@/features/utils/bootstrap-5'
function LeaveSection() {
const { t } = useTranslation()
@ -31,10 +30,7 @@ function LeaveSection() {
<>
{t('need_to_leave')}{' '}
<OLButton
className={bsVersion({
bs3: 'btn btn-inline-link btn-danger',
bs5: 'btn-link',
})}
className="btn-inline-link"
variant="danger"
onClick={handleOpen}
>

View file

@ -27,7 +27,7 @@ $focus-ring-blur: 0;
// Buttons
$btn-font-family: $font-family-sans-serif;
$btn-font-weight: 700;
$btn-font-weight: 600;
$btn-padding-x: $spacing-06;
$btn-padding-y: $spacing-02;
$btn-border-radius: $border-radius-full;

View file

@ -30,3 +30,11 @@ hr {
.horizontal-divider {
border-top: 1px solid var(--border-divider);
}
.hidden {
@extend .d-none;
}
.hidden-print {
@extend .d-print-none;
}

View file

@ -98,7 +98,6 @@
cursor: pointer;
border-radius: 0;
text-decoration: underline;
padding: 0;
font-size: inherit;
vertical-align: inherit;
@ -130,6 +129,13 @@
}
}
.btn-inline-link {
@extend .btn-link;
font-size: inherit;
padding: 0;
vertical-align: inherit;
}
.button-loading {
align-items: center;
display: inline-grid;

View file

@ -297,7 +297,7 @@ footer.site-footer {
.cookie-banner {
@include body-sm;
padding: var(--spacing-04) var(--spacing-07);
padding: var(--spacing-05) var(--spacing-07);
position: fixed;
bottom: 0;
left: 0;
@ -324,7 +324,7 @@ footer.site-footer {
.cookie-banner-actions {
flex-shrink: 0;
white-space: nowrap;
padding-top: var(--spacing-07);
padding-top: var(--spacing-00);
}
}
}