enhance: Adjust avatar size depends on text size

(kinda)
null2264 · Oct 22, 2023 · 133157e · 133157e
1 parent 53fe0b3
commit 133157e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/soapbox/components/mention.tsx b/src/soapbox/components/mention.tsx
@@ -8,21 +8,23 @@ import { makeGetAccount } from 'soapbox/selectors';
 import HoverRefWrapper from './hover-ref-wrapper';
 import { Avatar } from './ui';
 
+import type { Sizes } from 'soapbox/components/ui/text/text';
 import type { Mention as MentionEntity } from 'soapbox/schemas';
 
 const getAccount = makeGetAccount();
 
 export interface IMention {
   mention: MentionEntity
+  textSize?: Sizes
 }
 
-export const Mention: React.FC<IMention> = ({ mention }) => {
+export const Mention: React.FC<IMention> = ({ mention, textSize = 'md' }) => {
   const dispatch = useAppDispatch();
   const getchAccount = () => {
     if (mention.id !== '') dispatch(fetchAccount(mention.id));
   };
   const account: any = useAppSelector(state => ((mention.id !== '') ? getAccount(state, mention.id) : null) || { id: mention.id, fqn: mention.acct, acct: mention.acct, url: mention.url, username: mention.username, avatar: '' });
-  const avatarSize = 20;
+  const avatarSize = textSize === 'lg' ? 28 : 20;
 
   useLayoutEffect(() => {
     getchAccount();

diff --git a/src/soapbox/components/status-content.tsx b/src/soapbox/components/status-content.tsx
@@ -86,13 +86,13 @@ const StatusContent: React.FC<IStatusContent> = ({
         if (classes.includes('mention')) {
           const mention: MentionEntity | undefined = status.mentions.find(({ url }) => node.attribs.href === url);
           if (mention) {
-            return (<Mention mention={mention} />);
+            return (<Mention mention={mention} textSize={textSize} />);
           } else if (node.attribs.href) {
             // User is not present in database, construct acct from url
             const matches = [...node.attribs.href.matchAll(/^http(?:s)?:\/\/((?:[a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,})\/(?:@|users?\/)(\S+)/gm)][0];
 
             if (matches) {
-              return (<Mention mention={{ acct: `${matches[3]}@${matches[1]}`, url: node.attribs.href, id: '', username: '' }} />);
+              return (<Mention mention={{ acct: `${matches[3]}@${matches[1]}`, url: node.attribs.href, id: '', username: '' }} textSize={textSize} />);
             }
           }
         }