From 0528ba3af65bf287276d0210a130376b501555eb Mon Sep 17 00:00:00 2001 From: matty Date: Sun, 11 Jan 2026 21:24:50 +0000 Subject: [PATCH] better emoji sizing, fix linting issues --- packages/pl-fe/src/features/emoji/emojify.tsx | 26 ++++++++++-- packages/pl-fe/src/styles/application.scss | 40 ++++++++++--------- packages/pl-fe/src/styles/emoji-picker.scss | 11 +---- packages/pl-fe/src/styles/reactions-bar.scss | 7 ++++ packages/pl-fe/src/styles/ui.scss | 4 +- .../pl-fe/src/styles/username-styles.scss | 9 +++++ 6 files changed, 64 insertions(+), 33 deletions(-) create mode 100644 packages/pl-fe/src/styles/reactions-bar.scss create mode 100644 packages/pl-fe/src/styles/username-styles.scss diff --git a/packages/pl-fe/src/features/emoji/emojify.tsx b/packages/pl-fe/src/features/emoji/emojify.tsx index e857582ab..9dcf067bb 100644 --- a/packages/pl-fe/src/features/emoji/emojify.tsx +++ b/packages/pl-fe/src/features/emoji/emojify.tsx @@ -24,7 +24,13 @@ const MaybeEmoji: React.FC = ({ text, emojis }) => { const filename = emoji.static_url; if (filename?.length > 0) { - return ; + return ( + + ); // return {text}; } } @@ -72,7 +78,14 @@ const Emojify: React.FC = React.memo(({ text, emojis = {} }) => { const { unified, shortcode } = unicodeMapping[c]; nodes.push( - {c}, + {c}, ); } else if (!systemEmojiFont && unqualified in unicodeMapping) { clearStack(); @@ -80,7 +93,14 @@ const Emojify: React.FC = React.memo(({ text, emojis = {} }) => { const { unified, shortcode } = unicodeMapping[unqualified]; nodes.push( - {unqualified}, + {unqualified}, ); } else if (!disableUserProvidedMedia && c === ':') { if (!open) { diff --git a/packages/pl-fe/src/styles/application.scss b/packages/pl-fe/src/styles/application.scss index 1c0dd846e..91aa729e9 100644 --- a/packages/pl-fe/src/styles/application.scss +++ b/packages/pl-fe/src/styles/application.scss @@ -1,22 +1,24 @@ -@use 'basics'; -@use 'loading'; -@use 'ui'; -@use 'emoji-picker'; -@use 'accessibility'; -@use 'markup'; +@use "basics"; +@use "loading"; +@use "ui"; +@use "username-styles"; +@use "reactions-bar"; +@use "emoji-picker"; +@use "accessibility"; +@use "markup"; // COMPONENTS -@use 'components/modal'; -@use 'components/compose-form'; -@use 'components/status'; -@use 'components/detailed-status'; -@use 'components/columns'; -@use 'components/video-player'; -@use 'components/icon'; -@use 'forms'; -@use 'utilities'; -@use 'components/datepicker'; -@use 'mfm'; -@use 'ptr'; +@use "components/modal"; +@use "components/compose-form"; +@use "components/status"; +@use "components/detailed-status"; +@use "components/columns"; +@use "components/video-player"; +@use "components/icon"; +@use "forms"; +@use "utilities"; +@use "components/datepicker"; +@use "mfm"; +@use "ptr"; -@use 'new/index'; \ No newline at end of file +@use "new/index"; diff --git a/packages/pl-fe/src/styles/emoji-picker.scss b/packages/pl-fe/src/styles/emoji-picker.scss index 31747eff7..cc6bd2697 100644 --- a/packages/pl-fe/src/styles/emoji-picker.scss +++ b/packages/pl-fe/src/styles/emoji-picker.scss @@ -1,14 +1,7 @@ em-emoji-picker { - --rgb-background: 255 255 255; - --rgb-accent: var(--color-primary-600); - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + border: 1px solid rgb(var(--color-gray-700)); } .dark em-emoji-picker { - --rgb-background: var(--color-primary-900); -} - -.black em-emoji-picker { - --rgb-background: var(--color-gray-900); + border: 1px solid rgb(var(--color-gray-600)); } diff --git a/packages/pl-fe/src/styles/reactions-bar.scss b/packages/pl-fe/src/styles/reactions-bar.scss new file mode 100644 index 000000000..1ad95e822 --- /dev/null +++ b/packages/pl-fe/src/styles/reactions-bar.scss @@ -0,0 +1,7 @@ +.⁂-status-reactions-bar__button div img { + @apply md:size-10; +} + +.⁂-status-reactions-bar__picker-button.emoji-picker-dropdown svg { + @apply md:size-6; +} diff --git a/packages/pl-fe/src/styles/ui.scss b/packages/pl-fe/src/styles/ui.scss index 622f0d5c9..b50262925 100644 --- a/packages/pl-fe/src/styles/ui.scss +++ b/packages/pl-fe/src/styles/ui.scss @@ -23,7 +23,7 @@ } .ellipsis::after { - content: '…'; + content: "…"; } .react-swipeable-view-container { @@ -32,7 +32,7 @@ } } -.react-swipeable-view-container>* { +.react-swipeable-view-container > * { @apply flex items-center justify-center h-full; } diff --git a/packages/pl-fe/src/styles/username-styles.scss b/packages/pl-fe/src/styles/username-styles.scss new file mode 100644 index 000000000..626fd87a8 --- /dev/null +++ b/packages/pl-fe/src/styles/username-styles.scss @@ -0,0 +1,9 @@ +// differentiates username emoji size from post emoji size + +p.truncate.text-sm.text-gray-900.dark\:text-gray-100.font-semibold.tracking-normal.font-sans.normal-case + div, +p.truncate.text-xs.text-gray-700.dark\:text-gray-600.font-medium.tracking-normal.font-sans.normal-case + bdi + div { + @apply size-4 md:size-6 object-contain m-0.5; +}