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

[web] Migrate the cookie banner to Bootstrap 5

GitOrigin-RevId: 79dd74e2cf09faab381f24101a3633b0377009a0

services/web/frontend/js/features/settings/components/emails/add-email/add-another-email-btn.tsx

@@ -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>

services/web/frontend/js/features/settings/components/emails/add-email/email-affiliated-with-institution.tsx

@@ -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')}

services/web/frontend/js/features/settings/components/emails/add-email/university-name.tsx

@@ -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>

services/web/frontend/js/features/settings/components/emails/institution-and-role.tsx

@@ -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>

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

@@ -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>

services/web/frontend/js/features/settings/components/emails/resend-confirmation-email-button.tsx

@@ -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>

services/web/frontend/js/features/settings/components/leave-section.tsx

@@ -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({
+        className="btn-inline-link"
-          bs3: 'btn btn-inline-link btn-danger',
-          bs5: 'btn-link',
-        })}
         variant="danger"
         onClick={handleOpen}
       >

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

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

services/web/frontend/stylesheets/bootstrap-5/base/layout.scss

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

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

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

services/web/frontend/stylesheets/bootstrap-5/components/footer.scss

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