diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 2ae530c3d2..4a4fdd94f9 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -14,6 +14,7 @@
"autocomplete": "",
"autocomplete_references": "",
"back_to_your_projects": "",
+ "beta_badge_tooltip": "",
"blocked_filename": "",
"can_edit": "",
"cancel": "",
@@ -85,6 +86,7 @@
"file_name_in_this_project": "",
"file_outline": "",
"files_cannot_include_invalid_characters": "",
+ "find_out_more_about_latex_symbols": "",
"find_out_more_about_the_file_outline": "",
"first_error_popup_label": "",
"following_paths_conflict": "",
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
index f22759c69a..11ae7a2e83 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
@@ -7,10 +7,12 @@ import { matchSorter } from 'match-sorter'
import symbols from '../data/symbols.json'
import { buildCategorisedSymbols, createCategories } from '../utils/categories'
import SymbolPaletteSearch from './symbol-palette-search'
-
-import '@reach/tabs/styles.css'
import SymbolPaletteBody from './symbol-palette-body'
import SymbolPaletteTabs from './symbol-palette-tabs'
+// import SymbolPaletteInfoLink from './symbol-palette-info-link'
+import BetaBadge from '../../../shared/components/beta-badge'
+
+import '@reach/tabs/styles.css'
export default function SymbolPaletteContent({ handleSelect }) {
const [input, setInput] = useState('')
@@ -68,7 +70,20 @@ export default function SymbolPaletteContent({ handleSelect }) {
categories={categories}
disabled={input.length > 0}
/>
-
+
+
+ {/* NOTE: replace the beta badge with this info link when rolling out to all users */}
+ {/* */}
+
+
+ {t('find_out_more_about_latex_symbols')}
+
+ }
+ >
+
+
+ )
+}
diff --git a/services/web/frontend/js/shared/components/beta-badge.js b/services/web/frontend/js/shared/components/beta-badge.js
index d558490fed..b2c1c4cfc1 100644
--- a/services/web/frontend/js/shared/components/beta-badge.js
+++ b/services/web/frontend/js/shared/components/beta-badge.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
export default function BetaBadge({ tooltip }) {
return (
{tooltip.text}}
delayHide={100}
>
@@ -25,5 +25,6 @@ BetaBadge.propTypes = {
tooltip: PropTypes.exact({
id: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
+ placement: PropTypes.string,
}),
}
diff --git a/services/web/frontend/stories/symbol-palette.stories.js b/services/web/frontend/stories/symbol-palette.stories.js
index b0a768e246..f50dcdff7a 100644
--- a/services/web/frontend/stories/symbol-palette.stories.js
+++ b/services/web/frontend/stories/symbol-palette.stories.js
@@ -4,7 +4,7 @@ import SymbolPalette from '../js/features/symbol-palette/components/symbol-palet
export const Interactive = args => {
return (
-
+
)
diff --git a/services/web/frontend/stylesheets/app/editor/symbol-palette.less b/services/web/frontend/stylesheets/app/editor/symbol-palette.less
index c2bda31d81..4b1687a746 100644
--- a/services/web/frontend/stylesheets/app/editor/symbol-palette.less
+++ b/services/web/frontend/stylesheets/app/editor/symbol-palette.less
@@ -16,6 +16,7 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
+ align-items: center;
font-family: @font-family-sans-serif;
font-size: 16px;
background: @symbol-palette-header-background;
@@ -83,3 +84,16 @@
height: auto;
width: auto;
}
+
+.symbol-palette-header-group {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ margin-left: @margin-xs;
+}
+
+.symbol-palette-info-link,
+.symbol-palette-info-link:focus,
+.symbol-palette-info-link:hover {
+ color: inherit;
+}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 3b42b071d3..8c2ad0877b 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1444,6 +1444,7 @@
"category_relations": "Relations",
"category_misc": "Misc",
"no_symbols_found": "No symbols found",
+ "find_out_more_about_latex_symbols": "Find out more about LaTeX symbols",
"search": "Search",
"also": "Also",
"add_email": "Add Email",