Symbol palette: switch to 'OL' UI components and apply minor cosmetic changes

services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js

@@ -1,16 +1,19 @@
-import { Button } from 'react-bootstrap'
 import { useEditorContext } from '../../../shared/context/editor-context'
+import { useTranslation } from 'react-i18next'
 
 export default function SymbolPaletteCloseButton() {
   const { toggleSymbolPalette } = useEditorContext()
+  const { t } = useTranslation()
 
   return (
-    <div className="symbol-palette-header-outer">
+    <div className="symbol-palette-close-button-outer">
-      <Button
+      <button
+        type="button"
         className="btn-close symbol-palette-close-button"
-        onClick={toggleSymbolPalette} // Trigger closePanel on click
+        onClick={toggleSymbolPalette}
+        aria-label={t('clear_search')}
       >
-      </Button>
+      </button>
     </div>
   )
 }

services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { matchSorter } from 'match-sorter'
-
 import symbols from '../data/symbols.json'
 import { buildCategorisedSymbols, createCategories } from '../utils/categories'
 import SymbolPaletteSearch from './symbol-palette-search'
@@ -67,11 +66,11 @@ export default function SymbolPaletteContent({ handleSelect }) {
         <div className="symbol-palette-header-outer">
           <div className="symbol-palette-header">
             <SymbolPaletteTabs categories={categories} />
-            <div className="symbol-palette-header-group"> 
+            <div className="symbol-palette-header-group">
               <SymbolPaletteSearch setInput={setInput} inputRef={inputRef} />
+              <SymbolPaletteCloseButton />
             </div>
           </div>
-          <SymbolPaletteCloseButton />
         </div>
         <div className="symbol-palette-body">
           <SymbolPaletteBody

services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap-5'
 import PropTypes from 'prop-types'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 export default function SymbolPaletteItem({
   focused,
@@ -22,20 +22,24 @@ export default function SymbolPaletteItem({
   }, [focused])
 
   return (
-    <OverlayTrigger
+    <OLTooltip
-      placement="top"
+      id={`symbol-${symbol.codepoint}`}
-      trigger={['hover', 'focus']}
+      description={
-      overlay={
+        <div>
-        <Tooltip id={`tooltip-symbol-${symbol.codepoint}`}>
           <div className="symbol-palette-item-description">
             {symbol.description}
           </div>
-          <div className="symbol-palette-item-command">{symbol.command}</div>
+          <div className="symbol-palette-item-command">
+            {symbol.command}
+          </div>
           {symbol.notes && (
-            <div className="symbol-palette-item-notes">{symbol.notes}</div>
+            <div className="symbol-palette-item-notes">
+              {symbol.notes}
+            </div>
           )}
-        </Tooltip>
+        </div>
       }
+      overlayProps={{ placement: 'top', trigger: ['hover', 'focus'] }}
     >
       <button
         key={symbol.codepoint}
@@ -50,9 +54,10 @@ export default function SymbolPaletteItem({
       >
         {symbol.character}
       </button>
-    </OverlayTrigger>
+    </OLTooltip>
   )
 }
+
 SymbolPaletteItem.propTypes = {
   symbol: PropTypes.shape({
     codepoint: PropTypes.string.isRequired,

services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import { FormControl } from 'react-bootstrap'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
 import useDebounce from '../../../shared/hooks/use-debounce'
 
 export default function SymbolPaletteSearch({ setInput, inputRef }) {
@@ -24,10 +24,10 @@ export default function SymbolPaletteSearch({ setInput, inputRef }) {
   )
 
   return (
-    <FormControl
+    <OLFormControl
       className="symbol-palette-search"
       type="search"
-      inputRef={inputRefCallback}
+      ref={inputRefCallback}
       id="symbol-palette-input"
       aria-label="Search"
       value={localInput}
@@ -38,7 +38,8 @@ export default function SymbolPaletteSearch({ setInput, inputRef }) {
     />
   )
 }
+
 SymbolPaletteSearch.propTypes = {
   setInput: PropTypes.func.isRequired,
   inputRef: PropTypes.object.isRequired,
-}
+};

services/web/frontend/stylesheets/modules/symbol-palette.scss

@@ -154,6 +154,8 @@
 
 .symbol-palette-close-button-outer {
   display: flex;
+  align-items: center;
+  margin-right: var(--spacing-01);
 }
 
 .symbol-palette-close-button {