diff --git a/services/web/app/src/Features/User/UserPagesController.mjs b/services/web/app/src/Features/User/UserPagesController.mjs index d7bf00aed7..7789f6af3a 100644 --- a/services/web/app/src/Features/User/UserPagesController.mjs +++ b/services/web/app/src/Features/User/UserPagesController.mjs @@ -117,10 +117,6 @@ async function settingsPage(req, res) { ) } - // Get the user's assignment for this page's Bootstrap 5 split test, which - // populates splitTestVariants with a value for the split test name and allows - // Pug to read it - await SplitTestHandler.promises.getAssignment(req, res, 'bootstrap-5') // Get the users write-and-cite assignment to switch between translation strings await SplitTestHandler.promises.getAssignment(req, res, 'write-and-cite') // Get the users papers-integration assignment to show the linking widget diff --git a/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx b/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx index e8aafb9885..aae27813f3 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx +++ b/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx @@ -4,7 +4,6 @@ import EditorCloneProjectModalWrapper from '../../clone-project-modal/components import LeftMenuButton from './left-menu-button' import { useLocation } from '../../../shared/hooks/use-location' import * as eventTracking from '../../../infrastructure/event-tracking' -import { bsVersionIcon } from '@/features/utils/bootstrap-5' type ProjectCopyResponse = { project_id: string @@ -29,13 +28,7 @@ export default function ActionsCopyProject() { return ( <> - + {t('copy_project')} {pdfUrl ? ( - + {t('word_count')} ) : ( @@ -40,10 +33,7 @@ export default function ActionsWordCount() { {/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
- + {t('contact_us')} {modal} diff --git a/services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx b/services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx index eef1556d3e..e0d2fb6ca5 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx +++ b/services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx @@ -1,20 +1,12 @@ import { useTranslation } from 'react-i18next' import LeftMenuButton from './left-menu-button' -import { bsVersionIcon } from '@/features/utils/bootstrap-5' export default function HelpDocumentation() { const { t } = useTranslation() return ( <> - + {t('documentation')} diff --git a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx b/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx index 98e027977d..1bec8b3686 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx +++ b/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx @@ -4,7 +4,6 @@ import * as eventTracking from '../../../infrastructure/event-tracking' import { useProjectContext } from '../../../shared/context/project-context' import HotkeysModal from '../../hotkeys-modal/components/hotkeys-modal' import LeftMenuButton from './left-menu-button' -import { bsVersionIcon } from '@/features/utils/bootstrap-5' import { isMac } from '@/shared/utils/os' export default function HelpShowHotkeys() { @@ -19,13 +18,7 @@ export default function HelpShowHotkeys() { return ( <> - + {t('show_hotkeys')} void - icon?: { - type: string - fw?: boolean - } + icon?: string svgIcon?: React.ReactElement | null disabled?: boolean disabledAccesibilityText?: string @@ -19,12 +16,12 @@ function LeftMenuButtonIcon({ icon, }: { svgIcon?: React.ReactElement | null - icon?: { type: string; fw?: boolean } + icon?: string }) { if (svgIcon) { return
{svgIcon}
} else if (icon) { - return + return } else return null } diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx index 83920e74ba..6701c78d1f 100644 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx +++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx @@ -1,19 +1,12 @@ -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect } from 'react' import _ from 'lodash' -import type { OverallThemeMeta } from '../../../../../types/project-settings' import { saveUserSettings } from '../utils/api' import { UserSettings } from '../../../../../types/user-settings' import { useUserSettingsContext } from '@/shared/context/user-settings-context' import getMeta from '@/utils/meta' -import { isBootstrap5 } from '@/features/utils/bootstrap-5' import { isIEEEBranded } from '@/utils/is-ieee-branded' -import { useLayoutContext } from '@/shared/context/layout-context' export default function useSetOverallTheme() { - const [chosenTheme, setChosenTheme] = useState(null) - - const { loadingStyleSheet, setLoadingStyleSheet } = useLayoutContext() - const { userSettings, setUserSettings } = useUserSettingsContext() const { overallTheme } = userSettings @@ -24,54 +17,13 @@ export default function useSetOverallTheme() { [setUserSettings] ) - const skipLoadingStyleSheet = isBootstrap5() - useEffect(() => { - // Sets `data-theme` attribute to the body element, needed for Bootstrap 5 theming + // Sets the body's data-theme attribute for theming const theme = overallTheme === 'light-' && !isIEEEBranded() ? 'light' : 'default' document.body.dataset.theme = theme }, [overallTheme]) - useEffect(() => { - if (skipLoadingStyleSheet) { - return - } - - const docHeadEl = document.querySelector('head') - const oldStyleSheetEl = document.getElementById('main-stylesheet') - - const newStyleSheetEl = document.createElement('link') - newStyleSheetEl.setAttribute('rel', 'stylesheet') - newStyleSheetEl.setAttribute('id', 'main-stylesheet') - newStyleSheetEl.setAttribute('href', chosenTheme?.path ?? '') - - const loadEventCallback = () => { - setLoadingStyleSheet(false) - - if (docHeadEl && oldStyleSheetEl) { - docHeadEl.removeChild(oldStyleSheetEl) - } - } - - if (loadingStyleSheet) { - newStyleSheetEl.addEventListener('load', loadEventCallback, { - once: true, - }) - - docHeadEl?.appendChild(newStyleSheetEl) - } - - return () => { - newStyleSheetEl.removeEventListener('load', loadEventCallback) - } - }, [ - loadingStyleSheet, - setLoadingStyleSheet, - skipLoadingStyleSheet, - chosenTheme?.path, - ]) - return useCallback( (newOverallTheme: UserSettings['overallTheme']) => { if (overallTheme !== newOverallTheme) { @@ -81,15 +33,11 @@ export default function useSetOverallTheme() { ) if (chosenTheme) { - if (!skipLoadingStyleSheet) { - setLoadingStyleSheet(true) - } - setChosenTheme(chosenTheme) setOverallTheme(newOverallTheme) saveUserSettings('overallTheme', newOverallTheme) } } }, - [overallTheme, setLoadingStyleSheet, skipLoadingStyleSheet, setOverallTheme] + [overallTheme, setOverallTheme] ) } diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx index b6169cdbb3..5e66614dcd 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useRef } from 'react' import ReactDOM from 'react-dom' -import { Dropdown as BS3Dropdown } from 'react-bootstrap' import { Dropdown, DropdownMenu, @@ -48,7 +47,7 @@ function FileTreeContextMenu() { // A11y - Close the context menu when the user presses the Tab key // Focus should move to the next element in the filetree - function handleKeyDown(event: React.KeyboardEvent) { + function handleKeyDown(event: React.KeyboardEvent) { if (event.key === 'Tab') { close() } diff --git a/services/web/frontend/js/features/history/components/change-list/all-history-list.tsx b/services/web/frontend/js/features/history/components/change-list/all-history-list.tsx index 118389732f..2997fa96ea 100644 --- a/services/web/frontend/js/features/history/components/change-list/all-history-list.tsx +++ b/services/web/frontend/js/features/history/components/change-list/all-history-list.tsx @@ -181,7 +181,6 @@ function AllHistoryList() { onHide={hidePopover} // using scrollerRef to position the popover in the middle of the viewport target={scrollerRef.current} - // Only used in Bootstrap 5. In Bootstrap 3 this is done with CSS. popperConfig={{ modifiers: [ { diff --git a/services/web/frontend/js/features/project-list/components/search-form.tsx b/services/web/frontend/js/features/project-list/components/search-form.tsx index 9f64cdb0c9..c216669a74 100644 --- a/services/web/frontend/js/features/project-list/components/search-form.tsx +++ b/services/web/frontend/js/features/project-list/components/search-form.tsx @@ -1,5 +1,4 @@ import { useTranslation } from 'react-i18next' -import { FormControl } from 'react-bootstrap' import * as eventTracking from '../../../infrastructure/event-tracking' import classnames from 'classnames' import { Tag } from '../../../../../app/src/Features/Tags/types' @@ -59,7 +58,7 @@ function SearchForm({ const handleChange = ( e: React.ChangeEvent< - HTMLInputElement & Omit + HTMLInputElement & Omit > ) => { eventTracking.sendMB('project-list-page-interaction', { diff --git a/services/web/frontend/js/features/source-editor/extensions/search.ts b/services/web/frontend/js/features/source-editor/extensions/search.ts index b7b79d794d..48e58a4bca 100644 --- a/services/web/frontend/js/features/source-editor/extensions/search.ts +++ b/services/web/frontend/js/features/source-editor/extensions/search.ts @@ -303,7 +303,7 @@ const searchFormTheme = EditorView.theme({ padding: 'var(--spacing-03) var(--spacing-05)', }, }, - '&.bootstrap-5 .ol-cm-search-form': { + '&.ol-cm-search-form': { '--ol-cm-search-form-gap': 'var(--spacing-05)', '--ol-cm-search-form-button-margin': 'var(--spacing-02)', '--input-border': 'var(--border-primary)', diff --git a/services/web/frontend/js/features/source-editor/extensions/theme.ts b/services/web/frontend/js/features/source-editor/extensions/theme.ts index a95f94dd88..2fd6a77533 100644 --- a/services/web/frontend/js/features/source-editor/extensions/theme.ts +++ b/services/web/frontend/js/features/source-editor/extensions/theme.ts @@ -19,7 +19,6 @@ type Options = { fontFamily: FontFamily lineHeight: LineHeight overallTheme: OverallTheme - bootstrapVersion: 3 | 5 } export const theme = (options: Options) => [ @@ -60,7 +59,6 @@ const createThemeFromOptions = ({ fontFamily = 'monaco', lineHeight = 'normal', overallTheme = '', - bootstrapVersion = 3, }: Options) => { // Theme styles that depend on settings. const styles = userStyles({ fontSize, fontFamily, lineHeight }) @@ -68,8 +66,7 @@ const createThemeFromOptions = ({ return [ EditorView.editorAttributes.of({ class: classNames( - overallTheme === '' ? 'overall-theme-dark' : 'overall-theme-light', - 'bootstrap-' + bootstrapVersion + overallTheme === '' ? 'overall-theme-dark' : 'overall-theme-light' ), style: Object.entries({ '--font-size': styles.fontSize, diff --git a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts index bc2bd7d56b..cee55ba616 100644 --- a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts +++ b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts @@ -56,7 +56,6 @@ import { useRangesContext } from '@/features/review-panel-new/context/ranges-con import { updateRanges } from '@/features/source-editor/extensions/ranges' import { useThreadsContext } from '@/features/review-panel-new/context/threads-context' import { useHunspell } from '@/features/source-editor/hooks/use-hunspell' -import { isBootstrap5 } from '@/features/utils/bootstrap-5' import { Permissions } from '@/features/ide-react/types/permissions' import { lineHeights } from '@/shared/utils/styles' import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context' @@ -130,7 +129,6 @@ function useCodeMirrorScope(view: EditorView) { lineHeight, overallTheme, editorTheme, - bootstrapVersion: 3 as 3 | 5, }) useEffect(() => { @@ -140,7 +138,6 @@ function useCodeMirrorScope(view: EditorView) { lineHeight, overallTheme, editorTheme, - bootstrapVersion: isBootstrap5() ? 5 : 3, } view.dispatch( @@ -149,7 +146,6 @@ function useCodeMirrorScope(view: EditorView) { fontSize, lineHeight, overallTheme, - bootstrapVersion: themeRef.current.bootstrapVersion, }) ) diff --git a/services/web/frontend/js/features/utils/bootstrap-5.ts b/services/web/frontend/js/features/utils/bootstrap-5.ts index 2f9c4c98f7..7b55c89a6a 100644 --- a/services/web/frontend/js/features/utils/bootstrap-5.ts +++ b/services/web/frontend/js/features/utils/bootstrap-5.ts @@ -12,16 +12,6 @@ export function bsVersion({ bs5, bs3 }: { bs5?: unknown; bs3?: unknown }) { return isBootstrap5() ? bs5 : bs3 } -export const bsVersionIcon = ({ - bs5, - bs3, -}: { - bs5?: { type: string } - bs3?: { type: string; fw?: boolean } -}) => { - return isBootstrap5() ? bs5 : bs3 -} - // get all `aria-*` and `data-*` attributes export const getAriaAndDataProps = (obj: Record) => { return Object.entries(obj).reduce(