Merge pull request #21391 from overleaf/td-bs5-symbol-palette

Migrate symbol palette to Bootstrap 5

GitOrigin-RevId: c014199d1266092a3cdf7df6e98a9a4d5f318c15

services/web/frontend/js/shared/components/upgrade-benefits.jsx

@@ -1,39 +1,50 @@
 import Icon from './icon'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
 
+function Check() {
+  return (
+    <BootstrapVersionSwitcher
+      bs3={<Icon type="check" />}
+      bs5={<MaterialIcon type="check" />}
+    />
+  )
+}
+
 function UpgradeBenefits() {
   const { t } = useTranslation()
 
   return (
     <ul className="list-unstyled upgrade-benefits">
       <li>
-        <Icon type="check" />
+        <Check />
         &nbsp;
         {t('unlimited_projects')}
       </li>
       <li>
-        <Icon type="check" />
+        <Check />
         &nbsp;
         {t('collabs_per_proj', { collabcount: 'Multiple' })}
       </li>
       <li>
-        <Icon type="check" />
+        <Check />
         &nbsp;
         {t('full_doc_history')}
       </li>
       <li>
-        <Icon type="check" />
+        <Check />
         &nbsp;
         {t('sync_to_dropbox')}
       </li>
       <li>
-        <Icon type="check" />
+        <Check />
         &nbsp;
         {t('sync_to_github')}
       </li>
       <li>
-        <Icon type="check" />
+        <Check />
         &nbsp;
         {t('compile_larger_projects')}
       </li>