feat(emoji-row): DLT-2248 display larger emoji and inline shortcode in emoji row tooltip

[francisrupert]

Display larger emoji and inline shortcode in emoji row tooltip

Why am I doing this on a Friday night before Christmas break? Sat on couch with the wife and teenage daughters, did this instead while they watched some schmaltzy Hallmark Christmas movie.

🛠️ Type Of Change

• Feature

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-2248

📖 Description

• Display larger emoji
• Display shortcode inline
• BONUS: will make Custom Emojis more useful

This is effectively a simple prototype, so someone will need to take it over from me and update it correctly.

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-601/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-601/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-601/

[tedgoas-dialpad]

@francisrupert Amazing. Love to see this, thanks for remembering!

Small ask: can we make the emoji reactions a bit larger too? Currently they're at 14px which is too small, even for standard emojis. Feels like 16px is the sweet spot.

---

Also can we make the light gray background any lighter? This also makes the emoji harder to read.

Check out Slack, with a slightly lighter gray and slightly larger image. Makes a big difference: