better emoji sizing, fix linting issues

packages/pl-fe/src/features/emoji/emojify.tsx

@@ -24,7 +24,13 @@ const MaybeEmoji: React.FC<IMaybeEmoji> = ({ text, emojis }) => {
     const filename = emoji.static_url;
 
     if (filename?.length > 0) {
-      return <Emoji className='emojione transition-transform hover:scale-125' emoji={text} src={filename} />;
+      return (
+        <Emoji
+          className='emojione size-16 transition-transform hover:scale-125'
+          emoji={text}
+          src={filename}
+        />
+      );
       // return <img draggable={false} className='emojione transition-transform hover:scale-125' alt={text} title={text} src={filename} />;
     }
   }
@@ -72,7 +78,14 @@ const Emojify: React.FC<IEmojify> = React.memo(({ text, emojis = {} }) => {
       const { unified, shortcode } = unicodeMapping[c];
 
       nodes.push(
-        <img key={index} draggable={false} className='emojione transition-transform hover:scale-125' alt={c} title={`:${shortcode}:`} src={joinPublicPath(`packs/emoji/${unified}.svg`)} />,
+        <img
+          key={index}
+          draggable={false}
+          className='emojione transition-transform hover:scale-125'
+          alt={c}
+          title={`:${shortcode}:`}
+          src={joinPublicPath(`packs/emoji/${unified}.svg`)}
+        />,
       );
     } else if (!systemEmojiFont && unqualified in unicodeMapping) {
       clearStack();
@@ -80,7 +93,14 @@ const Emojify: React.FC<IEmojify> = React.memo(({ text, emojis = {} }) => {
       const { unified, shortcode } = unicodeMapping[unqualified];
 
       nodes.push(
-        <img key={index} draggable={false} className='emojione transition-transform hover:scale-125' alt={unqualified} title={`:${shortcode}:`} src={joinPublicPath(`packs/emoji/${unified}.svg`)} />,
+        <img
+          key={index}
+          draggable={false}
+          className='emojione transition-transform hover:scale-125'
+          alt={unqualified}
+          title={`:${shortcode}:`}
+          src={joinPublicPath(`packs/emoji/${unified}.svg`)}
+        />,
       );
     } else if (!disableUserProvidedMedia && c === ':') {
       if (!open) {

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';
+@use "new/index";

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));
 }

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;
+}

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;
 }
 

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;
+}