Bootstrap files and folders cleanup (#27692)

* Remove icons folder

* Create folders for badge, button, and dropdown components

* Remove Bootstrap 5 from test

* Rename `getBootstrap5Breakpoint` to `getBootstrapBreakpoint`

* Cleanup and update BS 5 comments

* Move components to the shared folder

* Rename `tooltips-bs5` to `tooltip`

* Remove `-bs5` suffix

* Fix path

* Delete BS3 version file

* Rename `_form_marketing-bootstrap-5` to `_form_marketing`

* Delete BS3 version file

* Rename `_contact_general_modal-marketing-bootstrap-5` to `_contact_general_modal-marketing`

* Delete BS3 version file

* Rename `_contact_modal-marketing-bootstrap-5` to `_contact_modal-marketing`

* Delete BS3 version file

* Rename `thin-footer-bootstrap-5` to `thin-footer`

* Delete BS3 version file

* Rename `language-picker-bootstrap-5` to `language-picker`

* Rename `fat-footer-react-bootstrap-5` to `fat-footer-react`

* Delete BS3 version file

* Rename `navbar-marketing-bootstrap-5` to `navbar-marketing`

* Rename `navbar-marketing-react-bootstrap-5` to `navbar-marketing-react`

* Delete BS3 version file

* Rename `layout-website-redesign-cms-bootstrap-5` to `layout-website-redesign-cms`

* Source format

* Fix path

GitOrigin-RevId: cf0f5db7c84cf545c69213dcc271d9ff17fe5db7

services/web/app/views/layout-marketing.pug

@@ -8,20 +8,20 @@ block entrypointVar
 
 block body
 	if typeof suppressNavbar === 'undefined'
-		include layout/navbar-marketing-bootstrap-5
+		include layout/navbar-marketing
 
 	block content
 
 	if typeof suppressFooter === 'undefined'
 		if showThinFooter
-			include layout/thin-footer-bootstrap-5
+			include layout/thin-footer
 		else
 			include layout/fat-footer
 
 	if typeof suppressPugCookieBanner == 'undefined'
 		include _cookie_banner
 
-	!= moduleIncludes('contactModal-marketing-bootstrap-5', locals)
+	!= moduleIncludes('contactModal-marketing', locals)
 
 block prepend foot-scripts
 	+bootstrap-js

services/web/app/views/layout-react.pug

@@ -1,5 +1,5 @@
-//- This is used for pages that are migrated to Bootstrap 5 but don't use Bootstrap's own JS, instead using
-//- react-bootstrap for all Bootstrap components
+//- Avoids including Bootstrap's own JS to prevent conflicts with react-bootstrap,
+//- since Bootstrap 5's JS and react-bootstrap should not be used together on the same page.
 extends ./layout-base
 
 include ./_mixins/formMessages
@@ -59,15 +59,15 @@ block append meta
 
 block body
 	if typeof suppressNavbar === 'undefined'
-		include layout/navbar-marketing-react-bootstrap-5
+		include layout/navbar-marketing-react
 
 	block content
 
 	if typeof suppressFooter === 'undefined'
 		if showThinFooter
-			include layout/thin-footer-bootstrap-5
+			include layout/thin-footer
 		else
-			include layout/fat-footer-react-bootstrap-5
+			include layout/fat-footer-react
 
 	if typeof suppressPugCookieBanner === 'undefined'
 		include _cookie_banner

services/web/app/views/layout-website-redesign.pug

@@ -11,13 +11,13 @@ block append meta
 
 block body
 	if typeof suppressNavbar == 'undefined'
-		include layout/navbar-marketing-bootstrap-5
+		include layout/navbar-marketing
 
 	block content
 
 	if typeof suppressFooter == 'undefined'
 		if showThinFooter
-			include layout/thin-footer-bootstrap-5
+			include layout/thin-footer
 		else
 			include layout/fat-footer-website-redesign
 
@@ -25,7 +25,7 @@ block body
 		include _cookie_banner
 
 	block contactModal
-		!= moduleIncludes('contactModal-marketing-bootstrap-5', locals)
+		!= moduleIncludes('contactModal-marketing', locals)
 
 block prepend foot-scripts
 	+bootstrap-js

services/web/app/views/layout/fat-footer-base.pug

@@ -5,7 +5,7 @@
 			a(href='/legal') #{translate('privacy_and_terms')}
 			a(href='https://www.digital-science.com/security-certifications/') #{translate('compliance')}
 		ul.fat-footer-base-item.list-unstyled.fat-footer-base-language
-			include language-picker-bootstrap-5
+			include language-picker
 	.fat-footer-base-section.fat-footer-base-social
 		.fat-footer-base-item
 			a.fat-footer-social.x-logo(href='https://x.com/overleaf')

services/web/app/views/layout/language-picker-bootstrap-5.pug

@@ -1,35 +0,0 @@
-include ../_mixins/material_symbol
-
-li.dropdown.dropup.subdued.language-picker(dropdown)
-	button#language-picker-toggle.btn.btn-link.btn-inline-link(
-		dropdown-toggle
-		data-ol-lang-selector-tooltip
-		data-bs-toggle='dropdown'
-		aria-haspopup='true'
-		aria-expanded='false'
-		aria-label='Select ' + translate('language')
-		tooltip=translate('language')
-		title=translate('language')
-	)
-		+material-symbol('translate')
-		|  
-		span.language-picker-text #{settings.translatedLanguages[currentLngCode]}
-
-	ul.dropdown-menu.dropdown-menu-sm-width(
-		role='menu'
-		aria-labelledby='language-picker-toggle'
-	)
-		li.dropdown-header #{translate("language")}
-		each subdomainDetails, subdomain in settings.i18n.subdomainLang
-			if !subdomainDetails.hide
-				- let isActive = subdomainDetails.lngCode === currentLngCode
-				li.lng-option
-					a.menu-indent(
-						href=subdomainDetails.url + currentUrlWithQueryParams
-						role='menuitem'
-						class=['dropdown-item', {active: isActive}]
-						aria-selected=isActive ? 'true' : 'false'
-					)
-						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
-						if subdomainDetails.lngCode === currentLngCode
-							+material-symbol('check', 'dropdown-item-trailing-icon')

services/web/app/views/layout/language-picker.pug

@@ -1,27 +1,35 @@
+include ../_mixins/material_symbol
+
 li.dropdown.dropup.subdued.language-picker(dropdown)
-	a#language-picker-toggle.dropdown-toggle(
-		href='#'
+	button#language-picker-toggle.btn.btn-link.btn-inline-link(
 		dropdown-toggle
 		data-ol-lang-selector-tooltip
-		data-toggle='dropdown'
-		role='button'
+		data-bs-toggle='dropdown'
 		aria-haspopup='true'
 		aria-expanded='false'
 		aria-label='Select ' + translate('language')
 		tooltip=translate('language')
 		title=translate('language')
 	)
-		i.fa.fa-fw.fa-language
-		|
-		| #{settings.translatedLanguages[currentLngCode]}
+		+material-symbol('translate')
+		|  
+		span.language-picker-text #{settings.translatedLanguages[currentLngCode]}
 
-	ul.dropdown-menu(role='menu' aria-labelledby='language-picker-toggle')
+	ul.dropdown-menu.dropdown-menu-sm-width(
+		role='menu'
+		aria-labelledby='language-picker-toggle'
+	)
 		li.dropdown-header #{translate("language")}
 		each subdomainDetails, subdomain in settings.i18n.subdomainLang
 			if !subdomainDetails.hide
+				- let isActive = subdomainDetails.lngCode === currentLngCode
 				li.lng-option
 					a.menu-indent(
 						href=subdomainDetails.url + currentUrlWithQueryParams
 						role='menuitem'
+						class=['dropdown-item', {active: isActive}]
+						aria-selected=isActive ? 'true' : 'false'
 					)
 						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
+						if subdomainDetails.lngCode === currentLngCode
+							+material-symbol('check', 'dropdown-item-trailing-icon')

services/web/app/views/layout/navbar-marketing-bootstrap-5.pug

@@ -1,212 +0,0 @@
-include ../_mixins/navbar
-include ../_mixins/material_symbol
-
-nav.navbar.navbar-default.navbar-main.navbar-expand-lg(
-	class={
-		'website-redesign-navbar': isWebsiteRedesign,
-	}
-	aria-label=translate('primary')
-)
-	.container-fluid.navbar-container
-		.navbar-header
-			if settings.nav.custom_logo
-				a.navbar-brand(
-					href='/'
-					aria-label=settings.appName
-					style='background-image:url("' + settings.nav.custom_logo + '")'
-				)
-			else if nav.title
-				a.navbar-title(href='/' aria-label=settings.appName) #{nav.title}
-			else
-				a.navbar-brand(href='/' aria-label=settings.appName)
-
-			- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
-			if enableUpgradeButton
-				a.btn.btn-primary.me-2.d-md-none(
-					href='/user/subscription/plans'
-					event-tracking='upgrade-button-click'
-					event-tracking-mb='true'
-					event-tracking-label='upgrade'
-					event-tracking-trigger='click'
-					event-segmentation={source: 'dashboard-top', projectDashboardReact: 'enabled', isDashboardSidebarHidden: 'true', isScreenWidthLessThan768px: 'true'}
-				) #{translate("upgrade")}
-
-		- var canDisplayAdminMenu = hasAdminAccess()
-		- var canDisplayAdminRedirect = canRedirectToAdminDomain()
-		- var canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
-		- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
-		- var canDisplayScriptLogMenu = hasFeature('saas') && hasAdminCapability('view-script-log') && canDisplayAdminMenu
-
-		if typeof suppressNavbarRight === 'undefined'
-			button#navbar-toggle-btn.navbar-toggler.collapsed(
-				type='button'
-				data-bs-toggle='collapse'
-				data-bs-target='#navbar-main-collapse'
-				aria-controls='navbar-main-collapse'
-				aria-expanded='false'
-				aria-label='Toggle ' + translate('navigation')
-			)
-				+material-symbol('menu')
-
-			#navbar-main-collapse.navbar-collapse.collapse
-				ul.nav.navbar-nav.navbar-right.ms-auto(role='menubar')
-					if canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu
-						+nav-item.dropdown.subdued
-							button.dropdown-toggle(
-								aria-haspopup='true'
-								aria-expanded='false'
-								data-bs-toggle='dropdown'
-								role='menuitem'
-								event-tracking='menu-expand'
-								event-tracking-mb='true'
-								event-tracking-trigger='click'
-								event-segmentation={item: 'admin', location: 'top-menu'}
-							)
-								| Admin
-							+dropdown-menu.dropdown-menu-end
-								if canDisplayAdminMenu
-									+dropdown-menu-link-item(href='/admin') Manage Site
-									+dropdown-menu-link-item(href='/admin/user') Manage Users
-									+dropdown-menu-link-item(href='/admin/project') Project URL Lookup
-								if canDisplayAdminRedirect
-									+dropdown-menu-link-item(href=settings.adminUrl) Switch to Admin
-								if canDisplaySplitTestMenu
-									+dropdown-menu-link-item(href='/admin/split-test') Manage Feature Flags
-								if canDisplaySurveyMenu
-									+dropdown-menu-link-item(href='/admin/survey') Manage Surveys
-								if canDisplayScriptLogMenu
-									+dropdown-menu-link-item(href='/admin/script-logs') View Script Logs
-
-					// loop over header_extras
-					each item in nav.header_extras
-						-
-							if ((item.only_when_logged_in && getSessionUser())
-											|| (item.only_when_logged_out && (!getSessionUser()))
-											|| (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages)
-											|| (item.only_content_pages && (typeof suppressNavContentLinks === "undefined" || !suppressNavContentLinks))
-							){
-								var showNavItem = true
-							} else {
-								var showNavItem = false
-							}
-
-						if showNavItem
-							if item.dropdown
-								+nav-item.dropdown(class=item.class)
-									button.dropdown-toggle(
-										aria-haspopup='true'
-										aria-expanded='false'
-										data-bs-toggle='dropdown'
-										role='menuitem'
-										event-tracking='menu-expand'
-										event-tracking-mb='true'
-										event-tracking-trigger='click'
-										event-segmentation={item: item.trackingKey, location: 'top-menu'}
-									)
-										| !{translate(item.text)}
-									+dropdown-menu.dropdown-menu-end
-										each child in item.dropdown
-											if child.divider
-												+dropdown-menu-divider
-											else if child.isContactUs
-												+dropdown-menu-link-item(
-													data-ol-open-contact-form-modal='contact-us'
-													data-bs-target='#contactUsModal'
-													href
-													data-bs-toggle='modal'
-													event-tracking='menu-click'
-													event-tracking-mb='true'
-													event-tracking-trigger='click'
-													event-segmentation={item: 'contact', location: 'top-menu'}
-												)
-													span
-														| #{translate("contact_us")}
-											else
-												if child.url
-													+dropdown-menu-link-item(
-														href=child.url
-														class=child.class
-														event-tracking='menu-click'
-														event-tracking-mb='true'
-														event-tracking-trigger='click'
-														event-segmentation={item: child.trackingKey, location: 'top-menu'}
-													) !{translate(child.text)}
-												else
-													+dropdown-menu-item
-														| !{translate(child.text)}
-							else
-								+nav-item(class=item.class)
-									if item.url
-										+nav-link(
-											href=item.url
-											class=item.class
-											event-tracking='menu-click'
-											event-tracking-mb='true'
-											event-tracking-trigger='click'
-											event-segmentation={item: item.trackingKey, location: 'top-menu'}
-										) !{translate(item.text)}
-									else
-										| !{translate(item.text)}
-
-					// logged out
-					if !getSessionUser()
-						// register link
-						if hasFeature('registration-page')
-							+nav-item.primary
-								+nav-link(
-									href='/register'
-									event-tracking='menu-click'
-									event-tracking-action='clicked'
-									event-tracking-trigger='click'
-									event-tracking-mb='true'
-									event-segmentation={page: currentUrl, item: 'register', location: 'top-menu'}
-								) #{translate('sign_up')}
-
-						// login link
-						+nav-item
-							+nav-link(
-								href='/login'
-								event-tracking='menu-click'
-								event-tracking-action='clicked'
-								event-tracking-trigger='click'
-								event-tracking-mb='true'
-								event-segmentation={page: currentUrl, item: 'login', location: 'top-menu'}
-							) #{translate('log_in')}
-
-					// projects link and account menu
-					if getSessionUser()
-						+nav-item
-							+nav-link(href='/project') #{translate('Projects')}
-						+nav-item.dropdown
-							button.dropdown-toggle(
-								aria-haspopup='true'
-								aria-expanded='false'
-								data-bs-toggle='dropdown'
-								role='menuitem'
-								event-tracking='menu-expand'
-								event-tracking-mb='true'
-								event-tracking-trigger='click'
-								event-segmentation={item: 'account', location: 'top-menu'}
-							)
-								| #{translate('Account')}
-							+dropdown-menu.dropdown-menu-end
-								+dropdown-menu-item
-									.disabled.dropdown-item #{getSessionUser().email}
-								+dropdown-menu-divider
-								+dropdown-menu-link-item(href='/user/settings') #{translate('account_settings')}
-								if nav.showSubscriptionLink
-									+dropdown-menu-link-item(href='/user/subscription') #{translate('subscription')}
-								+dropdown-menu-divider
-								+dropdown-menu-item
-									//-
-										The button is outside the form but still belongs to it via the form attribute. The reason to do 
-										this is that if the button is inside the form, screen readers will not count it in the total
-										number of menu items.
-									button.btn-link.text-left.dropdown-menu-button.dropdown-item(
-										role='menuitem'
-										tabindex='-1'
-										form='logOutForm'
-									)
-										| #{translate('log_out')}
-									form(method='POST' action='/logout' id='logOutForm')
-										input(name='_csrf' type='hidden' value=csrfToken)

services/web/app/views/layout/navbar-marketing.pug

@@ -1,35 +1,14 @@
-nav.navbar.navbar-default.navbar-main(
+include ../_mixins/navbar
+include ../_mixins/material_symbol
+
+nav.navbar.navbar-default.navbar-main.navbar-expand-lg(
 	class={
 		'website-redesign-navbar': isWebsiteRedesign,
 	}
 	aria-label=translate('primary')
 )
-	.container-fluid
+	.container-fluid.navbar-container
 		.navbar-header
-			if typeof suppressNavbarRight == 'undefined'
-				button.navbar-toggle.collapsed(
-					type='button'
-					data-toggle='collapse'
-					data-target='#navbar-main-collapse'
-					aria-label='Toggle ' + translate('navigation')
-				)
-					i.fa.fa-bars(aria-hidden='true')
-			- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
-			if enableUpgradeButton
-				//- prettier-ignore
-				a.btn.btn-primary.float-end.me-2.visible-xs(
-					href='/user/subscription/plans'
-					event-tracking='upgrade-button-click'
-					event-tracking-mb='true'
-					event-tracking-label='upgrade'
-					event-tracking-trigger='click'
-					event-segmentation={
-						source: "dashboard-top",
-						"project-dashboard-react": "enabled",
-						"is-dashboard-sidebar-hidden": "true",
-						"is-screen-width-less-than-768px": "true"
-					}
-				) #{translate("upgrade")}
 			if settings.nav.custom_logo
 				a.navbar-brand(
 					href='/'
@@ -41,50 +20,62 @@ nav.navbar.navbar-default.navbar-main(
 			else
 				a.navbar-brand(href='/' aria-label=settings.appName)
 
+			- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
+			if enableUpgradeButton
+				a.btn.btn-primary.me-2.d-md-none(
+					href='/user/subscription/plans'
+					event-tracking='upgrade-button-click'
+					event-tracking-mb='true'
+					event-tracking-label='upgrade'
+					event-tracking-trigger='click'
+					event-segmentation={source: 'dashboard-top', projectDashboardReact: 'enabled', isDashboardSidebarHidden: 'true', isScreenWidthLessThan768px: 'true'}
+				) #{translate("upgrade")}
+
 		- var canDisplayAdminMenu = hasAdminAccess()
 		- var canDisplayAdminRedirect = canRedirectToAdminDomain()
 		- var canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
 		- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
 		- var canDisplayScriptLogMenu = hasFeature('saas') && hasAdminCapability('view-script-log') && canDisplayAdminMenu
 
-		if typeof suppressNavbarRight == 'undefined'
+		if typeof suppressNavbarRight === 'undefined'
+			button#navbar-toggle-btn.navbar-toggler.collapsed(
+				type='button'
+				data-bs-toggle='collapse'
+				data-bs-target='#navbar-main-collapse'
+				aria-controls='navbar-main-collapse'
+				aria-expanded='false'
+				aria-label='Toggle ' + translate('navigation')
+			)
+				+material-symbol('menu')
+
 			#navbar-main-collapse.navbar-collapse.collapse
-				ul.nav.navbar-nav.navbar-right
+				ul.nav.navbar-nav.navbar-right.ms-auto(role='menubar')
 					if canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu
-						li.dropdown.subdued
-							a.dropdown-toggle(
-								href='#'
-								role='button'
+						+nav-item.dropdown.subdued
+							button.dropdown-toggle(
 								aria-haspopup='true'
 								aria-expanded='false'
-								data-toggle='dropdown'
+								data-bs-toggle='dropdown'
+								role='menuitem'
 								event-tracking='menu-expand'
 								event-tracking-mb='true'
 								event-tracking-trigger='click'
 								event-segmentation={item: 'admin', location: 'top-menu'}
 							)
 								| Admin
-								span.caret
-							ul.dropdown-menu
+							+dropdown-menu.dropdown-menu-end
 								if canDisplayAdminMenu
-									li
-										a(href='/admin') Manage Site
-									li
-										a(href='/admin/user') Manage Users
-									li
-										a(href='/admin/project') Project URL Lookup
+									+dropdown-menu-link-item(href='/admin') Manage Site
+									+dropdown-menu-link-item(href='/admin/user') Manage Users
+									+dropdown-menu-link-item(href='/admin/project') Project URL Lookup
 								if canDisplayAdminRedirect
-									li
-										a(href=settings.adminUrl) Switch to Admin
+									+dropdown-menu-link-item(href=settings.adminUrl) Switch to Admin
 								if canDisplaySplitTestMenu
-									li
-										a(href='/admin/split-test') Manage Feature Flags
+									+dropdown-menu-link-item(href='/admin/split-test') Manage Feature Flags
 								if canDisplaySurveyMenu
-									li
-										a(href='/admin/survey') Manage Surveys
+									+dropdown-menu-link-item(href='/admin/survey') Manage Surveys
 								if canDisplayScriptLogMenu
-									li
-										a(href='/admin/script-logs') View Script Logs
+									+dropdown-menu-link-item(href='/admin/script-logs') View Script Logs
 
 					// loop over header_extras
 					each item in nav.header_extras
@@ -92,8 +83,8 @@ nav.navbar.navbar-default.navbar-main(
 							if ((item.only_when_logged_in && getSessionUser())
 											|| (item.only_when_logged_out && (!getSessionUser()))
 											|| (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages)
-											|| (item.only_content_pages && (typeof (suppressNavContentLinks) == "undefined" || !suppressNavContentLinks))
-							) {
+											|| (item.only_content_pages && (typeof suppressNavContentLinks === "undefined" || !suppressNavContentLinks))
+							){
 								var showNavItem = true
 							} else {
 								var showNavItem = false
@@ -101,53 +92,52 @@ nav.navbar.navbar-default.navbar-main(
 
 						if showNavItem
 							if item.dropdown
-								li.dropdown(class=item.class)
-									a.dropdown-toggle(
-										href='#'
-										role='button'
+								+nav-item.dropdown(class=item.class)
+									button.dropdown-toggle(
 										aria-haspopup='true'
 										aria-expanded='false'
-										data-toggle='dropdown'
+										data-bs-toggle='dropdown'
+										role='menuitem'
 										event-tracking='menu-expand'
 										event-tracking-mb='true'
 										event-tracking-trigger='click'
 										event-segmentation={item: item.trackingKey, location: 'top-menu'}
 									)
 										| !{translate(item.text)}
-										span.caret
-									ul.dropdown-menu
+									+dropdown-menu.dropdown-menu-end
 										each child in item.dropdown
 											if child.divider
-												li.divider
+												+dropdown-menu-divider
 											else if child.isContactUs
-												li
-													a(
-														data-ol-open-contact-form-modal='contact-us'
-														href
+												+dropdown-menu-link-item(
+													data-ol-open-contact-form-modal='contact-us'
+													data-bs-target='#contactUsModal'
+													href
+													data-bs-toggle='modal'
+													event-tracking='menu-click'
+													event-tracking-mb='true'
+													event-tracking-trigger='click'
+													event-segmentation={item: 'contact', location: 'top-menu'}
+												)
+													span
+														| #{translate("contact_us")}
+											else
+												if child.url
+													+dropdown-menu-link-item(
+														href=child.url
+														class=child.class
 														event-tracking='menu-click'
 														event-tracking-mb='true'
 														event-tracking-trigger='click'
-														event-segmentation={item: 'contact', location: 'top-menu'}
-													)
-														span
-															| #{translate("contact_us")}
-											else
-												li
-													if child.url
-														a(
-															href=child.url
-															class=child.class
-															event-tracking='menu-click'
-															event-tracking-mb='true'
-															event-tracking-trigger='click'
-															event-segmentation={item: item.trackingKey, location: 'top-menu'}
-														) !{translate(child.text)}
-													else
+														event-segmentation={item: child.trackingKey, location: 'top-menu'}
+													) !{translate(child.text)}
+												else
+													+dropdown-menu-item
 														| !{translate(child.text)}
 							else
-								li(class=item.class)
+								+nav-item(class=item.class)
 									if item.url
-										a(
+										+nav-link(
 											href=item.url
 											class=item.class
 											event-tracking='menu-click'
@@ -162,8 +152,8 @@ nav.navbar.navbar-default.navbar-main(
 					if !getSessionUser()
 						// register link
 						if hasFeature('registration-page')
-							li.primary
-								a(
+							+nav-item.primary
+								+nav-link(
 									href='/register'
 									event-tracking='menu-click'
 									event-tracking-action='clicked'
@@ -173,8 +163,8 @@ nav.navbar.navbar-default.navbar-main(
 								) #{translate('sign_up')}
 
 						// login link
-						li
-							a(
+						+nav-item
+							+nav-link(
 								href='/login'
 								event-tracking='menu-click'
 								event-tracking-action='clicked'
@@ -185,33 +175,38 @@ nav.navbar.navbar-default.navbar-main(
 
 					// projects link and account menu
 					if getSessionUser()
-						li
-							a(href='/project') #{translate('Projects')}
-						li.dropdown
-							a.dropdown-toggle(
-								href='#'
-								role='button'
+						+nav-item
+							+nav-link(href='/project') #{translate('Projects')}
+						+nav-item.dropdown
+							button.dropdown-toggle(
 								aria-haspopup='true'
 								aria-expanded='false'
-								data-toggle='dropdown'
+								data-bs-toggle='dropdown'
+								role='menuitem'
 								event-tracking='menu-expand'
 								event-tracking-mb='true'
 								event-tracking-trigger='click'
 								event-segmentation={item: 'account', location: 'top-menu'}
 							)
 								| #{translate('Account')}
-								span.caret
-							ul.dropdown-menu
-								li
-									.subdued #{getSessionUser().email}
-								li.divider.hidden-xs.hidden-sm
-								li
-									a(href='/user/settings') #{translate('account_settings')}
+							+dropdown-menu.dropdown-menu-end
+								+dropdown-menu-item
+									.disabled.dropdown-item #{getSessionUser().email}
+								+dropdown-menu-divider
+								+dropdown-menu-link-item(href='/user/settings') #{translate('account_settings')}
 								if nav.showSubscriptionLink
-									li
-										a(href='/user/subscription') #{translate('subscription')}
-								li.divider.hidden-xs.hidden-sm
-								li
-									form(method='POST' action='/logout')
+									+dropdown-menu-link-item(href='/user/subscription') #{translate('subscription')}
+								+dropdown-menu-divider
+								+dropdown-menu-item
+									//-
+										The button is outside the form but still belongs to it via the form attribute. The reason to do 
+										this is that if the button is inside the form, screen readers will not count it in the total
+										number of menu items.
+									button.btn-link.text-left.dropdown-menu-button.dropdown-item(
+										role='menuitem'
+										tabindex='-1'
+										form='logOutForm'
+									)
+										| #{translate('log_out')}
+									form(method='POST' action='/logout' id='logOutForm')
 										input(name='_csrf' type='hidden' value=csrfToken)
-										button.btn-link.text-left.dropdown-menu-button #{translate('log_out')}

services/web/app/views/layout/thin-footer-bootstrap-5.pug

@@ -1,38 +0,0 @@
-footer.site-footer
-	- var showLanguagePicker = Object.keys(settings.i18n.subdomainLang).length > 1
-	- var hasCustomLeftNav = nav.left_footer && nav.left_footer.length > 0
-	.site-footer-content.hidden-print
-		.row
-			ul.site-footer-items.col-lg-9
-				if !settings.nav.hide_powered_by
-					li
-						//- year of Server Pro release, static
-						| © 2025
-						|
-						a(href='https://www.overleaf.com/for/enterprises') Powered by Overleaf
-
-					if showLanguagePicker || hasCustomLeftNav
-						li
-							strong.text-muted |
-
-				if showLanguagePicker
-					include language-picker-bootstrap-5
-
-				if showLanguagePicker && hasCustomLeftNav
-					li
-						strong.text-muted |
-
-				each item in nav.left_footer
-					li
-						if item.url
-							a(href=item.url class=item.class) !{translate(item.text)}
-						else
-							| !{item.text}
-
-			ul.site-footer-items.col-lg-3.text-end
-				each item in nav.right_footer
-					li
-						if item.url
-							a(href=item.url class=item.class aria-label=item.label) !{item.text}
-						else
-							| !{item.text}

services/web/app/views/layout/thin-footer.pug

@@ -3,10 +3,8 @@ footer.site-footer
 	- var hasCustomLeftNav = nav.left_footer && nav.left_footer.length > 0
 	.site-footer-content.hidden-print
 		.row
-			ul.col-md-9
-				if hasFeature('saas')
-					li © #{new Date().getFullYear()} Overleaf
-				else if !settings.nav.hide_powered_by
+			ul.site-footer-items.col-lg-9
+				if !settings.nav.hide_powered_by
 					li
 						//- year of Server Pro release, static
 						| © 2025
@@ -31,7 +29,7 @@ footer.site-footer
 						else
 							| !{item.text}
 
-			ul.col-md-3.text-right
+			ul.site-footer-items.col-lg-3.text-end
 				each item in nav.right_footer
 					li
 						if item.url

services/web/app/views/subscriptions/team/invite_logged_out.pug

@@ -11,8 +11,7 @@ block content
 					.card.text-center
 						.card-body
 							.page-header
-								// TODO: Remove `team-invite-name` once we fully migrated to Bootstrap 5
-								h1.text-center !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
+								h1.text-center !{translate("invited_to_group", {inviterName: inviterName, appName: appName })}
 
 							if accountExists
 								div

services/web/frontend/js/features/chat/components/chat-fallback-error.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import OLButton from '@/shared/components/ol/ol-button'
 
 interface ChatFallbackErrorProps {
   reconnect?: () => void

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx

@@ -8,13 +8,13 @@ import {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
+} from '@/shared/components/ol/ol-modal'
 import Notification from '@/shared/components/notification'
-import OLForm from '@/features/ui/components/ol/ol-form'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLButton from '@/shared/components/ol/ol-button'
 import { Tag } from '../../../../../app/src/Features/Tags/types'
 
 export default function CloneProjectModalContent({

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } from 'react'
 import CloneProjectModalContent from './clone-project-modal-content'
-import OLModal from '@/features/ui/components/ol/ol-modal'
+import OLModal from '@/shared/components/ol/ol-modal'
 import { ClonedProject } from '../../../../../types/project/dashboard/api'
 import { Tag } from '../../../../../app/src/Features/Tags/types'
 

services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Tag as TagType } from '../../../../../app/src/Features/Tags/types'
 import { getTagColor } from '@/features/project-list/util/tag'
-import Tag from '@/features/ui/components/bootstrap-5/tag'
+import Tag from '@/shared/components/tag'
 
 export const CloneProjectTag: FC<{
   tag: TagType

services/web/frontend/js/features/compromised-password/components/compromised-password-root.tsx

@@ -1,5 +1,5 @@
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 import { Trans, useTranslation } from 'react-i18next'
 import { Interstitial } from '@/shared/components/interstitial'
 

services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx

@@ -8,11 +8,11 @@ import {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
+} from '@/shared/components/ol/ol-modal'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
 import { learnedWords as initialLearnedWords } from '@/features/source-editor/extensions/spelling/learned-words'
 
 type DictionaryModalContentProps = {

services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import DictionaryModalContent from './dictionary-modal-content'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
-import OLModal from '@/features/ui/components/ol/ol-modal'
+import OLModal from '@/shared/components/ol/ol-modal'
 
 type DictionaryModalProps = {
   show?: boolean

services/web/frontend/js/features/editor-left-menu/components/download-pdf.tsx

@@ -4,7 +4,7 @@ import { useProjectContext } from '../../../shared/context/project-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { isSmallDevice } from '../../../infrastructure/event-tracking'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 export default function DownloadPDF() {
   const { t } = useTranslation()

services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx

@@ -6,7 +6,7 @@ import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import { Offcanvas } from 'react-bootstrap'
 import { EditorLeftMenuProvider } from './editor-left-menu-context'
 import withErrorBoundary from '@/infrastructure/error-boundary'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 import { useTranslation } from 'react-i18next'
 
 const EditorLeftMenuBody = lazy(() => import('./editor-left-menu-body'))

services/web/frontend/js/features/editor-left-menu/components/settings-menu.tsx

@@ -18,7 +18,7 @@ import SettingsSyntaxValidation from './settings/settings-syntax-validation'
 import SettingsMathPreview from './settings/settings-math-preview'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import { ElementType } from 'react'
-import OLForm from '@/features/ui/components/ol/ol-form'
+import OLForm from '@/shared/components/ol/ol-form'
 
 const moduleSettings: Array<{
   import: { default: ElementType }

services/web/frontend/js/features/editor-left-menu/components/settings/settings-dictionary.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import DictionaryModal from '../../../dictionary/components/dictionary-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
 
 export default function SettingsDictionary() {
   const { t } = useTranslation()

services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx

@@ -1,6 +1,6 @@
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
-import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLFormSelect from '@/shared/components/ol/ol-form-select'
 import { ChangeEventHandler, useCallback, useEffect, useRef } from 'react'
 import { Spinner } from 'react-bootstrap'
 import { useEditorLeftMenuContext } from '@/features/editor-left-menu/components/editor-left-menu-context'

services/web/frontend/js/features/editor-navigation-toolbar/components/back-to-editor-button.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 function BackToEditorButton({ onClick }: { onClick: () => void }) {
   const { t } = useTranslation()

services/web/frontend/js/features/editor-navigation-toolbar/components/back-to-projects-button.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 
 function BackToProjectsButton() {

services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLBadge from '@/features/ui/components/ol/ol-badge'
+import OLBadge from '@/shared/components/ol/ol-badge'
 
 function ChatToggleButton({
   chatIsOpen,

services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenu,
   DropdownToggle,
   DropdownToggleCustom,
-} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+} from '@/shared/components/dropdown/dropdown-menu'
 import { Trans, useTranslation } from 'react-i18next'
 import {
   IdeLayout,
@@ -17,7 +17,7 @@ import * as eventTracking from '../../../infrastructure/event-tracking'
 import useEventListener from '../../../shared/hooks/use-event-listener'
 import { DetachRole } from '@/shared/context/detach-context'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 const isActiveDropdownItem = ({
   iconFor,

services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx

@@ -6,9 +6,9 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
-} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+} from '@/shared/components/dropdown/dropdown-menu'
 import { getBackgroundColorForUserId } from '@/shared/utils/colors'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import { OnlineUser } from '@/features/ide-react/context/online-users-context'
 

services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 
 type ProjectNameEditableLabelProps = {

services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 function UpgradePrompt() {
   const { t } = useTranslation()

services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import OLButton from '../ui/components/ol/ol-button'
+import OLButton from '../../shared/components/ol/ol-button'
 import { useIdeRedesignSwitcherContext } from '../ide-react/context/ide-redesign-switcher-context'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import {
   Dropdown,
   DropdownMenu,
-} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+} from '@/shared/components/dropdown/dropdown-menu'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { useFileTreeMainContext } from '../contexts/file-tree-main'
 

services/web/frontend/js/features/file-tree/components/file-tree-create/danger-message.tsx

@@ -1,4 +1,4 @@
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 export default function DangerMessage({
   children,

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.tsx

@@ -6,10 +6,10 @@ import {
   DuplicateFilenameError,
   InvalidFilenameError,
 } from '../../errors'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 /**
  * A form component that renders a text input with label,

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-footer.tsx

@@ -2,8 +2,8 @@ import { useTranslation } from 'react-i18next'
 import { useFileTreeCreateForm } from '../../contexts/file-tree-create-form'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import { useFileTreeData } from '../../../../shared/context/file-tree-data-context'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 export default function FileTreeModalCreateFileFooter() {
   const { valid } = useFileTreeCreateForm()

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 export default function FileTreeModalCreateFileMode({
   mode,

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-upload-conflicts.tsx

@@ -4,7 +4,7 @@ import { useProjectContext } from '@/shared/context/project-context'
 import { useCallback } from 'react'
 import { syncDelete } from '@/features/file-tree/util/sync-mutation'
 import { TFunction } from 'i18next'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 export type Conflict = {
   entity: FileTreeEntity

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx

@@ -19,11 +19,11 @@ import * as eventTracking from '../../../../../infrastructure/event-tracking'
 import { File } from '@/features/source-editor/utils/file'
 import { Project } from '../../../../../../../types/project'
 import getMeta from '@/utils/meta'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
-import OLForm from '@/features/ui/components/ol/ol-form'
-import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLFormSelect from '@/shared/components/ol/ol-form-select'
 import { Spinner } from 'react-bootstrap'
 
 export default function FileTreeImportFromProject() {

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.jsx

@@ -6,9 +6,9 @@ import { useFileTreeCreateName } from '../../../contexts/file-tree-create-name'
 import { useFileTreeCreateForm } from '../../../contexts/file-tree-create-form'
 import ErrorMessage from '../error-message'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
 
 export default function FileTreeImportFromUrl() {
   const { t } = useTranslation()

services/web/frontend/js/features/file-tree/components/file-tree-error.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { useLocation } from '../../../shared/hooks/use-location'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 function FileTreeError() {
   const { t } = useTranslation()

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.tsx

@@ -6,7 +6,7 @@ import { useProjectContext } from '@/shared/context/project-context'
 import {
   DropdownDivider,
   DropdownItem,
-} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+} from '@/shared/components/dropdown/dropdown-menu'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 
 function FileTreeItemMenuItems() {

services/web/frontend/js/features/file-tree/components/file-tree-toolbar.tsx

@@ -2,9 +2,9 @@ import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { useFileTreeActionable } from '../contexts/file-tree-actionable'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar'
+import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import React, { ElementType } from 'react'
 

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.jsx

@@ -8,7 +8,7 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
+} from '@/shared/components/ol/ol-modal'
 
 export default function FileTreeModalCreateFile() {
   const { t } = useTranslation()

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.tsx

@@ -9,8 +9,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 
 function FileTreeModalCreateFolder() {
   const { t } = useTranslation()

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.jsx

@@ -6,9 +6,9 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
 import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
 
 function FileTreeModalDelete() {

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.jsx

@@ -13,8 +13,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 
 function FileTreeModalError() {
   const { t } = useTranslation()

services/web/frontend/js/features/file-view/components/file-view-header.tsx

@@ -13,7 +13,7 @@ import { BinaryFile, hasProvider, LinkedFile } from '../types/binary-file'
 import FileViewRefreshButton from './file-view-refresh-button'
 import FileViewRefreshError from './file-view-refresh-error'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 const tprFileViewInfo = importOverleafModules('tprFileViewInfo') as {
   import: { TPRFileViewInfo: ElementType }

services/web/frontend/js/features/file-view/components/file-view-refresh-button.tsx

@@ -11,7 +11,7 @@ import { useProjectContext } from '@/shared/context/project-context'
 import type { BinaryFile } from '../types/binary-file'
 import { Nullable } from '../../../../../types/utils'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 import { sendMB } from '@/infrastructure/event-tracking'
 import useIsMounted from '@/shared/hooks/use-is-mounted'
 

services/web/frontend/js/features/file-view/components/file-view-refresh-error.tsx

@@ -2,7 +2,7 @@ import type { ElementType } from 'react'
 import { useTranslation } from 'react-i18next'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import { BinaryFile } from '../types/binary-file'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 type FileViewRefreshErrorProps = {
   file: BinaryFile

services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx

@@ -5,7 +5,7 @@ import withErrorBoundary from '@/infrastructure/error-boundary'
 import useAbortController from '@/shared/hooks/use-abort-controller'
 import LoadingSpinner from '@/shared/components/loading-spinner'
 import Notification from '@/shared/components/notification'
-import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
+import IconButton from '@/shared/components/button/icon-button'
 import {
   Card,
   Row,
@@ -14,8 +14,8 @@ import {
   FormLabel,
   FormControl,
 } from 'react-bootstrap'
-import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
-import Button from '@/features/ui/components/bootstrap-5/button'
+import FormText from '@/shared/components/form/form-text'
+import Button from '@/shared/components/button/button'
 import PoNumber from '@/features/group-management/components/add-seats/po-number'
 import CostSummary from '@/features/group-management/components/add-seats/cost-summary'
 import RequestStatus from '@/features/group-management/components/request-status'

services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormControl, FormGroup, FormLabel } from 'react-bootstrap'
-import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import FormText from '@/shared/components/form/form-text'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 
 type PoNumberProps = {
   error: string | undefined

services/web/frontend/js/features/group-management/components/back-button.tsx

@@ -1,4 +1,4 @@
-import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
+import IconButton from '@/shared/components/button/icon-button'
 
 type BackButtonProps = {
   href: string

services/web/frontend/js/features/group-management/components/card.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import { Card as BSCard, CardBody, Col, Row } from 'react-bootstrap'
-import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
+import IconButton from '@/shared/components/button/icon-button'
 
 type CardProps = {
   children: React.ReactNode

services/web/frontend/js/features/group-management/components/error-alert.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 export type APIError = {
   message?: string

services/web/frontend/js/features/group-management/components/group-members.tsx

@@ -7,13 +7,13 @@ import ErrorAlert from './error-alert'
 import MembersList from './members-table/members-list'
 import { sendMB } from '../../../infrastructure/event-tracking'
 import BackButton from '@/features/group-management/components/back-button'
-import OLRow from '@/features/ui/components/ol/ol-row'
-import OLCol from '@/features/ui/components/ol/ol-col'
-import OLCard from '@/features/ui/components/ol/ol-card'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLFormText from '@/features/ui/components/ol/ol-form-text'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLRow from '@/shared/components/ol/ol-row'
+import OLCol from '@/shared/components/ol/ol-col'
+import OLCard from '@/shared/components/ol/ol-card'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLFormText from '@/shared/components/ol/ol-form-text'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 export default function GroupMembers() {
   const { isReady } = useWaitForI18n()

services/web/frontend/js/features/group-management/components/managers-table.tsx

@@ -8,16 +8,16 @@ import UserRow from './user-row'
 import useUserSelection from '../hooks/use-user-selection'
 import { User } from '../../../../../types/group-management/user'
 import { debugConsole } from '@/utils/debugging'
-import OLRow from '@/features/ui/components/ol/ol-row'
-import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+import OLCol from '@/shared/components/ol/ol-col'
 import BackButton from '@/features/group-management/components/back-button'
-import OLCard from '@/features/ui/components/ol/ol-card'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLFormText from '@/features/ui/components/ol/ol-form-text'
-import OLTable from '@/features/ui/components/ol/ol-table'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import OLCard from '@/shared/components/ol/ol-card'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLFormText from '@/shared/components/ol/ol-form-text'
+import OLTable from '@/shared/components/ol/ol-table'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 
 type ManagersPaths = {
   addMember: string

services/web/frontend/js/features/group-management/components/manually-collected-subscription.tsx

@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 import Card from '@/features/group-management/components/card'
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 

services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx

@@ -10,7 +10,7 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
-} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+} from '@/shared/components/dropdown/dropdown-menu'
 import { User } from '../../../../../../types/group-management/user'
 import useAsync from '@/shared/hooks/use-async'
 import { type FetchError, postJSON } from '@/infrastructure/fetch-json'
@@ -18,7 +18,7 @@ import { GroupUserAlert } from '../../utils/types'
 import { useGroupMembersContext } from '../../context/group-members-context'
 import getMeta from '@/utils/meta'
 import MaterialIcon from '@/shared/components/material-icon'
-import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
+import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
 import { Spinner } from 'react-bootstrap'
 import { sendMB } from '@/infrastructure/event-tracking'
 

services/web/frontend/js/features/group-management/components/members-table/list-alert.tsx

@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import type { GroupUserAlertVariant } from '../../utils/types'
 import NotificationScrolledTo from '@/shared/components/notification-scrolled-to'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 type GroupUsersListAlertProps = {
   variant: GroupUserAlertVariant

services/web/frontend/js/features/group-management/components/members-table/member-row.tsx

@@ -8,8 +8,8 @@ import SSOStatus from './sso-status'
 import DropdownButton from './dropdown-button'
 import SelectUserCheckbox from './select-user-checkbox'
 import getMeta from '@/utils/meta'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import OLTag from '@/features/ui/components/ol/ol-tag'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import OLTag from '@/shared/components/ol/ol-tag'
 import MaterialIcon from '@/shared/components/material-icon'
 import classnames from 'classnames'
 

services/web/frontend/js/features/group-management/components/members-table/members-list.tsx

@@ -11,15 +11,15 @@ import SelectAllCheckbox from './select-all-checkbox'
 import classNames from 'classnames'
 import getMeta from '@/utils/meta'
 import UnlinkUserModal from './unlink-user-modal'
-import OLTable from '@/features/ui/components/ol/ol-table'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTable from '@/shared/components/ol/ol-table'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import Pagination from '@/shared/components/pagination'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLForm from '@/features/ui/components/ol/ol-form'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLCol from '@/features/ui/components/ol/ol-col'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLCol from '@/shared/components/ol/ol-col'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLRow from '@/features/ui/components/ol/ol-row'
+import OLRow from '@/shared/components/ol/ol-row'
 import { isNonEmptyString, NonEmptyString } from '@ol-types/helpers/string'
 
 const USERS_DISPLAY_LIMIT = 50

services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx

@@ -10,13 +10,13 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
-import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
+} from '@/shared/components/ol/ol-modal'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLFormSelect from '@/shared/components/ol/ol-form-select'
 import { sendMB } from '@/infrastructure/event-tracking'
 
 type OffboardManagedUserModalProps = {

services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx

@@ -10,12 +10,12 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
-import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+} from '@/shared/components/ol/ol-modal'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import { sendMB } from '@/infrastructure/event-tracking'
 
 type RemoveManagedUserModalProps = {

services/web/frontend/js/features/group-management/components/members-table/select-all-checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGroupMembersContext } from '../../context/group-members-context'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 
 export default function SelectAllCheckbox() {
   const { t } = useTranslation()

services/web/frontend/js/features/group-management/components/members-table/select-user-checkbox.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import type { User } from '../../../../../../types/group-management/user'
 import { useGroupMembersContext } from '../../context/group-members-context'
 import { useCallback } from 'react'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 
 type ManagedUsersSelectUserCheckboxProps = {
   user: User

services/web/frontend/js/features/group-management/components/members-table/unlink-user-modal.tsx

@@ -13,8 +13,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 
 export type UnlinkUserModalProps = {
   onClose: () => void

services/web/frontend/js/features/group-management/components/missing-billing-information.tsx

@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 import Card from '@/features/group-management/components/card'
 
 function MissingBillingInformation() {

services/web/frontend/js/features/group-management/components/request-status.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next'
 import { Card, CardBody, Row, Col } from 'react-bootstrap'
-import Button from '@/features/ui/components/bootstrap-5/button'
+import Button from '@/shared/components/button/button'
 import MaterialIcon from '@/shared/components/material-icon'
 import getMeta from '@/utils/meta'
-import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
+import IconButton from '@/shared/components/button/icon-button'
 import classnames from 'classnames'
 
 type RequestStatusProps = {

services/web/frontend/js/features/group-management/components/subtotal-limit-exceeded.tsx

@@ -1,5 +1,5 @@
 import { Trans } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 import Card from '@/features/group-management/components/card'
 
 function SubtotalLimitExceeded() {

services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx

@@ -2,8 +2,8 @@ import getMeta from '@/utils/meta'
 import { FetchError, postJSON } from '@/infrastructure/fetch-json'
 import { useTranslation, Trans } from 'react-i18next'
 import { Card, Row, Col } from 'react-bootstrap'
-import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
-import Button from '@/features/ui/components/bootstrap-5/button'
+import IconButton from '@/shared/components/button/icon-button'
+import Button from '@/shared/components/button/button'
 import UpgradeSubscriptionPlanDetails from './upgrade-subscription-plan-details'
 import RequestStatus from '../request-status'
 import UpgradeSummary, {

services/web/frontend/js/features/group-management/components/user-row.tsx

@@ -2,7 +2,7 @@ import moment from 'moment'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { User } from '../../../../../types/group-management/user'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 import MaterialIcon from '@/shared/components/material-icon'
 
 type GroupMemberRowProps = {

services/web/frontend/js/features/header-footer-react/index.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import getMeta from '@/utils/meta'
-import { DefaultNavbarRoot } from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
-import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
+import { DefaultNavbarRoot } from '@/shared/components/navbar/default-navbar'
+import Footer from '@/shared/components/footer/footer'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
 
 const navbarElement = document.getElementById('navbar-container')

services/web/frontend/js/features/history/components/change-list/add-label-modal.tsx

@@ -1,15 +1,15 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
-import OLForm from '@/features/ui/components/ol/ol-form'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import ModalError from './modal-error'
 import OLModal, {
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 import useAsync from '../../../../shared/hooks/use-async'
 import useAbortController from '../../../../shared/hooks/use-abort-controller'
 import useAddOrRemoveLabels from '../../hooks/use-add-or-remove-labels'
@@ -18,7 +18,7 @@ import { addLabel } from '../../services/api'
 import { Label } from '../../services/types/label'
 import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 import { debugConsole } from '@/utils/debugging'
-import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
 
 type AddLabelModalProps = {
   show: boolean

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -8,8 +8,8 @@ import { useUserContext } from '../../../../shared/context/user-context'
 import useDropdownActiveItem from '../../hooks/use-dropdown-active-item'
 import { useHistoryContext } from '../../context/history-context'
 import { useEditorContext } from '../../../../shared/context/editor-context'
-import OLPopover from '@/features/ui/components/ol/ol-popover'
-import OLOverlay from '@/features/ui/components/ol/ol-overlay'
+import OLPopover from '@/shared/components/ol/ol-popover'
+import OLOverlay from '@/shared/components/ol/ol-overlay'
 import Close from '@/shared/components/close'
 import { Trans, useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'

services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx

@@ -3,8 +3,8 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownToggle,
-} from '@/features/ui/components/bootstrap-5/dropdown-menu'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+} from '@/shared/components/dropdown/dropdown-menu'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 type ActionDropdownProps = {
   id: string

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
-import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon'
+import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import OLTagIcon from '@/shared/components/ol/ol-tag-icon'
 import AddLabelModal from '../../add-label-modal'
 
 type AddLabelProps = {

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx

@@ -1,7 +1,7 @@
 import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
 import { ReactNode } from 'react'
-import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
+import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
 
 type CompareProps = {
   comparisonRange: UpdateRange

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare.tsx

@@ -1,7 +1,7 @@
 import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
 import { ReactNode } from 'react'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 type CompareProps = {
   comparisonRange: UpdateRange

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
+import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
 import MaterialIcon from '@/shared/components/material-icon'
 
 type DownloadProps = {

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
+import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
 import { useTranslation } from 'react-i18next'
 import { RestoreProjectModal } from '../../../diff-view/modals/restore-project-modal'
 import { useSplitTestContext } from '@/shared/context/split-test-context'

services/web/frontend/js/features/history/components/change-list/modal-error.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 // Using this workaround due to inconsistent and improper error responses from the server
 type ModalErrorProps = {

services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx

@@ -5,8 +5,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+} from '@/shared/components/ol/ol-modal'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import ModalError from './modal-error'
 import useAbortController from '../../../../shared/hooks/use-abort-controller'
 import useAsync from '../../../../shared/hooks/use-async'
@@ -18,9 +18,9 @@ import { LoadedLabel } from '../../services/types/label'
 import { debugConsole } from '@/utils/debugging'
 import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-year'
 import { useEditorContext } from '@/shared/context/editor-context'
-import OLTag from '@/features/ui/components/ol/ol-tag'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon'
+import OLTag from '@/shared/components/ol/ol-tag'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLTagIcon from '@/shared/components/ol/ol-tag-icon'
 
 type TagProps = {
   label: LoadedLabel

services/web/frontend/js/features/history/components/diff-view/document-diff-viewer.tsx

@@ -20,7 +20,7 @@ import {
 } from '../../extensions/highlight-locations'
 import { useTranslation } from 'react-i18next'
 import { inlineBackground } from '../../../source-editor/extensions/inline-background'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 
 function extensions(themeOptions: Options): Extension[] {
   return [

services/web/frontend/js/features/history/components/diff-view/main.tsx

@@ -3,7 +3,7 @@ import { Diff } from '../../services/types/doc'
 import DocumentDiffViewer from './document-diff-viewer'
 import LoadingSpinner from '../../../../shared/components/loading-spinner'
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 type MainProps = {
   diff: Nullable<Diff>

services/web/frontend/js/features/history/components/diff-view/modals/restore-file-confirm-modal.tsx

@@ -5,8 +5,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 
 type RestoreFileConfirmModalProps = {

services/web/frontend/js/features/history/components/diff-view/modals/restore-file-error-modal.tsx

@@ -3,8 +3,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 
 export function RestoreFileErrorModal({

services/web/frontend/js/features/history/components/diff-view/modals/restore-project-error-modal.tsx

@@ -3,8 +3,8 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 
 export function RestoreProjectErrorModal({

services/web/frontend/js/features/history/components/diff-view/modals/restore-project-modal.tsx

@@ -3,10 +3,10 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
+} from '@/shared/components/ol/ol-modal'
 import { formatDate } from '@/utils/dates'
 import { useCallback } from 'react'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 
 type RestoreProjectModalProps = {

services/web/frontend/js/features/history/components/diff-view/toolbar/toolbar-restore-file-button.tsx

@@ -1,4 +1,4 @@
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 import { useRestoreDeletedFile } from '../../../context/hooks/use-restore-deleted-file'
 import type { HistoryContextValue } from '../../../context/types/history-context-value'

services/web/frontend/js/features/history/components/diff-view/toolbar/toolbar-restore-file-to-version-button.tsx

@@ -1,4 +1,4 @@
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 import type { HistoryContextValue } from '../../../context/types/history-context-value'
 import withErrorBoundary from '@/infrastructure/error-boundary'

services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import type { ReactNode } from 'react'
 import type { FileOperation } from '../../services/types/file-operation'
-import OLTag from '@/features/ui/components/ol/ol-tag'
+import OLTag from '@/shared/components/ol/ol-tag'
 
 type FileTreeItemProps = {
   name: string

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.jsx

@@ -6,10 +6,10 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLRow from '@/features/ui/components/ol/ol-row'
-import OLCol from '@/features/ui/components/ol/ol-col'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLRow from '@/shared/components/ol/ol-row'
+import OLCol from '@/shared/components/ol/ol-col'
 
 export default function HotkeysModal({
   animation = true,

services/web/frontend/js/features/ide-react/components/alerts/alerts.tsx

@@ -4,7 +4,7 @@ import { useConnectionContext } from '@/features/ide-react/context/connection-co
 import { debugging } from '@/utils/debugging'
 import { createPortal } from 'react-dom'
 import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLNotification from '@/shared/components/ol/ol-notification'
 
 export function Alerts() {
   const { t } = useTranslation()

services/web/frontend/js/features/ide-react/components/alerts/lost-connection-alert.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
 import { secondsUntil } from '@/features/ide-react/connection/utils'
-import OLNotification from '@/features/ui/components/ol/ol-notification'
-import OLButton from '@/features/ui/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import OLButton from '@/shared/components/ol/ol-button'
 
 type LostConnectionAlertProps = {
   reconnectAt: number

services/web/frontend/js/features/ide-react/components/editor-survey.tsx

@@ -1,10 +1,10 @@
-import OLButton from '@/features/ui/components/ol/ol-button'
-import OLForm from '@/features/ui/components/ol/ol-form'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
-import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
-import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
-import { OLToast } from '@/features/ui/components/ol/ol-toast'
-import { OLToastContainer } from '@/features/ui/components/ol/ol-toast-container'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
+import { OLToast } from '@/shared/components/ol/ol-toast'
+import { OLToastContainer } from '@/shared/components/ol/ol-toast-container'
 import { useEditorContext } from '@/shared/context/editor-context'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { useCallback, useEffect, useMemo, useState } from 'react'

services/web/frontend/js/features/ide-react/components/global-toasts.tsx

@@ -1,10 +1,10 @@
-import { OLToast, OLToastProps } from '@/features/ui/components/ol/ol-toast'
+import { OLToast, OLToastProps } from '@/shared/components/ol/ol-toast'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { Fragment, ReactElement, useCallback, useState } from 'react'
 
 import { debugConsole } from '@/utils/debugging'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
-import { OLToastContainer } from '@/features/ui/components/ol/ol-toast-container'
+import { OLToastContainer } from '@/shared/components/ol/ol-toast-container'
 
 const moduleGeneratorsImport = importOverleafModules('toastGenerators') as {
   import: { default: GlobalToastGeneratorEntry[] }

services/web/frontend/js/features/ide-react/components/modals/force-disconnected.tsx

@@ -5,7 +5,7 @@ import OLModal, {
   OLModalBody,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
+} from '@/shared/components/ol/ol-modal'
 
 // show modal when editor is forcefully disconnected
 function ForceDisconnected() {

services/web/frontend/js/features/ide-react/components/modals/generic-confirm-modal.tsx

@@ -5,9 +5,9 @@ import OLModal, {
   OLModalFooter,
   OLModalHeader,
   OLModalTitle,
-} from '@/features/ui/components/ol/ol-modal'
-import OLButton from '@/features/ui/components/ol/ol-button'
-import { ButtonProps } from '@/features/ui/components/types/button-props'
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
+import { ButtonProps } from '@/shared/components/types/button-props'
 
 export type GenericConfirmModalOwnProps = {
   title: string