Merge pull request #23305 from overleaf/mf-onboarding-data-collection-bs5

[web] Migrate onboarding collection data page to bootstrap 5

GitOrigin-RevId: ebf91db34ff11313c262bf57ad45e70d30857cd6

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({
     >
       <div {...getComboboxProps()}>
         {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-        <label
+        <OLFormLabel
           {...getLabelProps()}
           className={
             showLabel
@@ -104,7 +105,7 @@ function Downshift({
           }
         >
           {label}
-        </label>
+        </OLFormLabel>
         <OLFormControl
           {...getInputProps({
             onChange: (event: React.ChangeEvent<HTMLInputElement>) => {

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

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

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

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

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

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

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.

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