diff --git a/background.html b/background.html index c6a70c1b95..f3e5e5b19a 100644 --- a/background.html +++ b/background.html @@ -30,6 +30,7 @@ + diff --git a/fonts/NotoColorEmoji.ttf b/fonts/NotoColorEmoji.ttf new file mode 100644 index 0000000000..b65201514d Binary files /dev/null and b/fonts/NotoColorEmoji.ttf differ diff --git a/package.json b/package.json index 13a010a656..f44fa3a5ff 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "dotenv": "^17.3.1", "electron-localshortcut": "^3.2.1", "electron-updater": "^6.3.9", - "emoji-mart": "https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz", + "emoji-mart": "https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz", "filesize": "10.1.6", "firstline": "^2.0.2", "focus-trap-react": "^11.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7d5fedf43..8495ff415e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,7 +25,7 @@ importers: version: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-data-v1.2.1.tgz '@emoji-mart/react': specifier: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-react-v1.1.1.tgz - version: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-react-v1.1.1.tgz(emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz)(react@19.2.1) + version: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-react-v1.1.1.tgz(emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz)(react@19.2.1) '@emotion/is-prop-valid': specifier: 1.2.2 version: 1.2.2 @@ -78,8 +78,8 @@ importers: specifier: ^6.3.9 version: 6.3.9 emoji-mart: - specifier: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz - version: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz + specifier: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz + version: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz filesize: specifier: 10.1.6 version: 10.1.6 @@ -2962,9 +2962,9 @@ packages: engines: {node: '>= 12.20.55'} hasBin: true - emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz: - resolution: {tarball: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz} - version: 5.6.0 + emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz: + resolution: {integrity: sha512-3f7ab6IreqbqeLKNL4q3n3mvMrY8MfSbfJHCfGVhP6yLjWT1Ser9JJAT5gixyScAXNDHCGBWusNJPNYeB/VzwQ==, tarball: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz} + version: 5.6.2 emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -6907,9 +6907,9 @@ snapshots: '@emoji-mart/data@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-data-v1.2.1.tgz': {} - '@emoji-mart/react@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-react-v1.1.1.tgz(emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz)(react@19.2.1)': + '@emoji-mart/react@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-react-v1.1.1.tgz(emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz)(react@19.2.1)': dependencies: - emoji-mart: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz + emoji-mart: https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz react: 19.2.1 '@emotion/is-prop-valid@1.2.2': @@ -8918,7 +8918,7 @@ snapshots: transitivePeerDependencies: - supports-color - emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz: {} + emoji-mart@https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz: {} emoji-regex@8.0.0: {} diff --git a/stylesheets/fonts.css b/stylesheets/fonts.css index 5627f194b6..302d20fde5 100644 --- a/stylesheets/fonts.css +++ b/stylesheets/fonts.css @@ -107,3 +107,11 @@ font-family: 'Lucide'; src: url('../fonts/lucide.ttf') format('truetype'); } + +/** Emoji font + * Download from https://fonts.google.com/noto/specimen/Noto+Color+Emoji +*/ +@font-face { + font-family: 'NotoColorEmoji'; + src: url('../fonts/NotoColorEmoji.ttf') format('truetype'); +} diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 8523a025d3..36aa969143 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -29,6 +29,7 @@ export const StyledEmojiPanel = styled.div<{ border: var(--default-borders); padding-bottom: var(--margins-sm); --font-family: var(--font-default); + --emoji-font: 'NotoColorEmoji'; // Note: var(--emoji-font) doesn't go through shadow doms --font-size: var(--font-size-sm); --shadow: none; --border-radius: 8px; diff --git a/ts/components/conversation/message/reactions/Reaction.tsx b/ts/components/conversation/message/reactions/Reaction.tsx index 6f284bb45e..b3ee097d50 100644 --- a/ts/components/conversation/message/reactions/Reaction.tsx +++ b/ts/components/conversation/message/reactions/Reaction.tsx @@ -33,6 +33,7 @@ const StyledReaction = styled.button<{ padding: 0 7px; height: ${EMOJI_REACTION_HEIGHT}px; min-width: ${props => (props.$showCount ? 2 * EMOJI_REACTION_HEIGHT : EMOJI_REACTION_HEIGHT)}px; + font-family: var(--font-default); span { width: 100%; diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx index c6ed514713..a4794f41a7 100644 --- a/ts/components/dialog/ReactListModal.tsx +++ b/ts/components/dialog/ReactListModal.tsx @@ -55,6 +55,7 @@ const StyledContactContainer = styled.span` const StyledReactionBar = styled(Flex)` width: 100%; margin: 12px 0 20px 4px; + font-family: var(--font-default); p { color: var(--text-secondary-color); diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index 53895a0bb9..3fda16b1c8 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -212,7 +212,7 @@ export function setSingleThemeValue(key: ThemeKeys, value: string) { // These are only set once in the global style (at root). export const THEME_GLOBALS: ThemeGlobals = { - '--font-default': 'Roboto', + '--font-default': 'Roboto, NotoColorEmoji', '--font-accent': 'Loor', '--font-mono': 'Roboto Mono', '--font-icon': 'Lucide', diff --git a/ts/util/emoji.ts b/ts/util/emoji.ts index e2c9f06d6f..c52508dfec 100644 --- a/ts/util/emoji.ts +++ b/ts/util/emoji.ts @@ -63,15 +63,16 @@ export async function initialiseEmojiData(data: any): Promise { if (!strings) { return null; } - return (Array.isArray(strings) ? strings : [strings]) + const asArr = (Array.isArray(strings) ? strings : [strings]) .map(string => (split ? string.split(/[-|_|\s]+/) : [string]).map((s: string) => s.toLowerCase()) ) .flat(); + return asArr; }) .flat() .filter(a => a && a.trim()) - .join(',')})}`; + .join(',')}`; (value as FixedBaseEmoji).skins.forEach(skin => { ariaLabels[skin.native] = value.name;