From b4051e48d36668dfdcf3c6f8d8b2a43d37dfc57c Mon Sep 17 00:00:00 2001 From: M Fahru Date: Wed, 12 Feb 2025 06:47:13 -0700 Subject: [PATCH] Merge pull request #23305 from overleaf/mf-onboarding-data-collection-bs5 [web] Migrate onboarding collection data page to bootstrap 5 GitOrigin-RevId: ebf91db34ff11313c262bf57ad45e70d30857cd6 --- .../components/emails/downshift-input.tsx | 5 +- .../bootstrap-5/components/all.scss | 2 + .../bootstrap-5/components/button.scss | 8 ++ .../bootstrap-5/components/radio-chip.scss | 56 ++++++++ .../bootstrap-5/components/stepper.scss | 20 +++ .../stylesheets/bootstrap-5/pages/all.scss | 1 + .../bootstrap-5/pages/onboarding.scss | 130 ++++++++++++++++++ .../stylesheets/components/buttons.less | 4 +- .../stylesheets/modules/onboarding.less | 4 - 9 files changed, 223 insertions(+), 7 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/radio-chip.scss create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/stepper.scss create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/onboarding.scss diff --git a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx index 6fd0d39716..a1615d05cd 100644 --- a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx +++ b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx @@ -6,6 +6,7 @@ import { bsVersion } from '@/features/utils/bootstrap-5' import OLFormControl from '@/features/ui/components/ol/ol-form-control' import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' +import OLFormLabel from '@/features/ui/components/ol/ol-form-label' type DownshiftInputProps = { highlightMatches?: boolean @@ -95,7 +96,7 @@ function Downshift({ >
{/* eslint-disable-next-line jsx-a11y/label-has-for */} - + ) => { diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss index 1ccb913a7a..00e838bc31 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss @@ -36,6 +36,8 @@ @import 'dev-toolbar'; @import 'tos'; @import 'collapsible-file-header'; +@import 'stepper'; +@import 'radio-chip'; @import 'panel-heading'; @import 'menu-bar'; @import 'invite'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss index 3b782ed1f8..2cab3ac231 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss @@ -78,6 +78,14 @@ ); } + &.btn-info-ghost { + @include ol-button-variant( + $color: var(--blue-50), + $background: transparent, + $hover-background: var(--neutral-10) + ); + } + &.btn-premium { @include ol-button-variant( $color: var(--content-primary-dark), diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/radio-chip.scss b/services/web/frontend/stylesheets/bootstrap-5/components/radio-chip.scss new file mode 100644 index 0000000000..1cb2fe73d1 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/components/radio-chip.scss @@ -0,0 +1,56 @@ +.radio-chip { + background: #fff; + border: 1px solid var(--neutral-60); + border-radius: var(--border-radius-full); + color: var(--neutral-90); + cursor: pointer; + display: inline-flex; + font-weight: 400; + gap: var(--spacing-02); + inline-size: fit-content; + line-height: 1.4; + padding: var(--spacing-04) var(--spacing-06) var(--spacing-04) + var(--spacing-04); + + @include media-breakpoint-down(md) { + width: 100%; + } + + &:hover { + background: var(--neutral-20); + } + + &:focus-within { + box-shadow: 0 0 0 2px var(--blue-30); + } + + input[type='radio'] { + accent-color: var(--green-50); + cursor: pointer; + height: 16px; + margin: var(--spacing-02); + width: 15px; + } +} + +.radio-chip[data-disabled='true'] { + border-color: var(--neutral-20); + + &:hover { + background: #fff; + cursor: not-allowed; + } +} + +.radio-group { + display: flex; + flex-flow: column wrap; + grid-gap: var(--spacing-06); + height: 180px; + width: 100%; + + @include media-breakpoint-down(md) { + flex-wrap: nowrap; + height: 100%; + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/stepper.scss b/services/web/frontend/stylesheets/bootstrap-5/components/stepper.scss new file mode 100644 index 0000000000..d1134fe485 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/components/stepper.scss @@ -0,0 +1,20 @@ +.stepper { + display: flex; + gap: var(--spacing-05); + width: 100%; + height: 6px; + + .step { + width: 100%; + border-radius: 6px; + background: var(--neutral-20); + } + + .step.completed { + background: var(--green-50); + } + + .step.active { + background: var(--green-20); + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index a17070382b..87c34f04fa 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -46,5 +46,6 @@ @import 'register'; @import 'onboarding-confirm-email'; @import 'secondary-confirm-email'; +@import 'onboarding'; @import 'admin/admin'; @import 'admin/project-url-lookup'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/onboarding.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/onboarding.scss new file mode 100644 index 0000000000..1244850279 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/onboarding.scss @@ -0,0 +1,130 @@ +.onboarding-data-collection-wrapper { + max-width: 730px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 10px; + + .d-block, + .select-wrapper { + label { + font-size: 14px; // override DownshiftInput and Select component label size + } + + .select-items { + max-height: 150px; + } + + .select-trigger { + border: 1px solid var(--neutral-60); + color: var(--neutral-60); + } + } + + p { + font-size: 16px; + margin-bottom: var(--spacing-06); + } + + .logo { + width: 130px; + margin: 0 auto; + } + + form { + display: flex; + flex-direction: column; + gap: var(--spacing-08); + + .group-horizontal { + display: flex; + justify-content: stretch; + gap: var(--spacing-08); + + @include media-breakpoint-down(md) { + flex-direction: column; + gap: 0; + } + + .form-group { + flex-grow: 1; + } + } + + .form-actions { + display: flex; + justify-content: space-between; + + > div { + display: flex; + align-items: center; + gap: var(--spacing-04); + + button.btn-info-ghost { + color: var(--neutral-90); + } + } + } + } +} + +.onboarding-data-collection-form { + background: var(--bg-light-primary); + padding: var(--spacing-08); + display: flex; + flex-direction: column; + gap: var(--spacing-08); +} + +.onboarding-question-title { + font-size: 20px; + border-bottom: none; + margin-bottom: var(--spacing-08); +} + +.onboarding-step-2 { + .form-check { + margin: 0; + + p { + margin-bottom: 0; + } + + label { + display: flex; + align-items: center; + gap: var(--spacing-04); + + input { + margin-right: var(--spacing-02); + } + } + } +} + +.onboarding-collapse-button { + display: flex; + align-items: center; + cursor: pointer; + color: var(--blue-50); + user-select: none; +} + +.onboarding-collapse-button, +.onboarding-privacy-extended { + @include media-breakpoint-down(md) { + padding: 0 var(--spacing-08); + } +} + +.onboarding-data-collection-form-margin { + @include media-breakpoint-down(md) { + margin-bottom: 100px; + } +} + +.compromised-password-content { + display: flex; + flex-direction: column; + gap: var(--spacing-05); +} diff --git a/services/web/frontend/stylesheets/components/buttons.less b/services/web/frontend/stylesheets/components/buttons.less index ec2b5df2e1..0ff2933597 100755 --- a/services/web/frontend/stylesheets/components/buttons.less +++ b/services/web/frontend/stylesheets/components/buttons.less @@ -104,7 +104,9 @@ .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10); } // Background Ghost appear as neutral-90 (matching our text colour) with no border -.btn-bg-ghost { +// .btn-ghost is backported from bs5 +.btn-bg-ghost, +.btn-ghost { .btn-borderless(@neutral-90, @btn-info-ghost-bg, @neutral-10); } // Inline button to fit text, without link styling. diff --git a/services/web/frontend/stylesheets/modules/onboarding.less b/services/web/frontend/stylesheets/modules/onboarding.less index bae3ebd68f..ddff6641f9 100644 --- a/services/web/frontend/stylesheets/modules/onboarding.less +++ b/services/web/frontend/stylesheets/modules/onboarding.less @@ -72,10 +72,6 @@ display: flex; align-items: center; gap: 8px; - - button.btn-info-ghost { - color: @neutral-90; - } } } }