fix commenters avatar size on mobile (#1324)

myr-2241 : fix commenters avatar size on mobile
myriadsocial · Jul 5, 2022 · f9bc1b7 · f9bc1b7
1 parent 76fefe7
commit f9bc1b7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/components/CommentDetail/CommentDetail.tsx b/src/components/CommentDetail/CommentDetail.tsx
@@ -231,7 +231,7 @@ export const CommentDetail = forwardRef<HTMLDivElement, CommentDetailProps>((pro
           <Avatar
             name={comment.user?.name}
             src={comment.user?.profilePictureURL}
-            size={AvatarSize.MEDIUM}
+            size={isMobile ? AvatarSize.TINY : AvatarSize.MEDIUM}
             onClick={handleViewProfile}
           />
           {(deep === 0 || deep > 2 || replies.length > 0) && <div className={style.verticalTree} />}

diff --git a/src/components/CommentEditor/CommentEditor.tsx b/src/components/CommentEditor/CommentEditor.tsx
@@ -25,7 +25,15 @@ import {ELEMENT_MENTION, MentionNodeData, useMentionPlugin} from '@udecode/plate
 
 import React, {useMemo, useEffect, useState} from 'react';
 
-import {ButtonGroup, CardActions, Grid, IconButton, SvgIcon, Tooltip} from '@material-ui/core';
+import {
+  ButtonGroup,
+  CardActions,
+  Grid,
+  IconButton,
+  SvgIcon,
+  Tooltip,
+  useMediaQuery,
+} from '@material-ui/core';
 
 import {Avatar, AvatarSize} from '../atoms/Avatar';
 import {useStyles} from './CommentEditor.style';
@@ -66,6 +74,7 @@ const MAX_CHARACTER_LIMIT = 5000;
 export const CommentEditor: React.FC<PostEditorProps> = props => {
   const styles = useStyles();
   const options = createPlateOptions();
+  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
 
   const {
     ref,
@@ -201,7 +210,11 @@ export const CommentEditor: React.FC<PostEditorProps> = props => {
 
   return (
     <Grid container className={styles.root} direction="row">
-      <Avatar src={user?.profilePictureURL} name={user?.name} size={AvatarSize.MEDIUM} />
+      <Avatar
+        src={user?.profilePictureURL}
+        name={user?.name}
+        size={isMobile ? AvatarSize.TINY : AvatarSize.MEDIUM}
+      />
 
       <div className={styles.editor} ref={ref}>
         <Plate

diff --git a/src/components/common/Confirm/Confirm.style.ts b/src/components/common/Confirm/Confirm.style.ts
@@ -3,6 +3,9 @@ import {makeStyles, Theme} from '@material-ui/core';
 export const useStyles = makeStyles<Theme>(theme => ({
   action: {
     marginTop: 51,
+    [theme.breakpoints.down('xs')]: {
+      marginTop: 32,
+    },
     '& > button': {
       [theme.breakpoints.down('xs')]: {
         width: '100%',