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",