share answer button

client/src/components/QAComponents/Answer.jsx

@@ -1,5 +1,7 @@
 import CheckIcon from '@mui/icons-material/Check';
+import ShareIcon from '@mui/icons-material/Share';
 import { Button, ButtonGroup, ListItem, ListItemText, Tooltip } from '@mui/material';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { Markdown } from 'components';
 import { CreationInfoTag } from 'controllers';
@@ -14,12 +16,12 @@ export default function Answer({
     downvotes,
     text,
     upvotes,
+    acceptAnswer,
     canComment,
     canAccept,
+    postComment,
     getVote,
     updateVote,
-    postComment,
-    acceptAnswer,
 }) {
     return (
         <span key={answer_id}>
@@ -47,12 +49,26 @@ export default function Answer({
                     <CreationInfoTag {...{ createdAt, creator, text: 'answered' }} />
                     <Markdown content={text} />
                     <CommentControl {...{ canComment, postComment }} />
+                    <CopyToClipboard text={`${window.location.href}#${answer_id}`}>
+                        <Button
+                            color='inherit'
+                            size='small'
+                            m={1}
+                            startIcon={<ShareIcon />}
+                            style={{ textTransform: 'none' }}
+                            variant='text'
+                        >
+                            Share
+                        </Button>
+                    </CopyToClipboard>
                     {canAccept && (
                         <span>
                             <Button
+                                color='inherit'
+                                size='small'
                                 onClick={acceptAnswer}
-                                style={{ marginLeft: '10px' }}
-                                variant='standard'
+                                style={{ textTransform: 'none' }}
+                                variant='text'
                             >
                                 Accept
                             </Button>

client/src/components/QAComponents/CommentControl.jsx

@@ -27,11 +27,12 @@ export default function CommentControl({
                             color='inherit'
                             disableRipple
                             onClick={toggleShow}
+                            m={1}
                             size='small'
                             startIcon={<AddCommentOutlinedIcon />}
                             style={{ textTransform: 'none' }}
                             variant='text'
-                        >
+                            >
                             <Typography>Comment</Typography>
                         </Button>
                     </span>

client/src/components/QAComponents/Question.jsx

@@ -41,7 +41,6 @@ export default function Question({
     text,
     upvotes,
     views,
-    question_id,
     ongoingVote,
     canClose,
     canProtect,
@@ -121,18 +120,6 @@ export default function Question({
                     </span>
                 </Tooltip>
 
-                <CopyToClipboard text={window.location.href}>
-                    <Button
-                        style={{ marginLeft: '10px' }}
-                        display='inline'
-                        m={1}
-                        startIcon={<ShareIcon />}
-                        variant='contained'
-                    >
-                        Share
-                    </Button>
-                </CopyToClipboard>
-
                 {ongoingVote.users.length > 0 && (
                     <Typography>
                         {ongoingVote.users.toString()} - voting to {ongoingVote.type} this question{' '}
@@ -156,6 +143,18 @@ export default function Question({
                     <CreationInfoTag {...{ createdAt, creator }} />
                     <Markdown content={text} />
                     <CommentControl {...{ postComment, canComment }} />
+                    <CopyToClipboard text={window.location.href}>
+                        <Button
+                            color='inherit'
+                            size='small'
+                            m={1}
+                            startIcon={<ShareIcon />}
+                            style={{ textTransform: 'none' }}
+                            variant='text'
+                        >
+                            Share
+                        </Button>
+                    </CopyToClipboard>
                 </ListItemText>
             </ListItem>
         </>

client/src/controllers/QAControllers/AnswerController.jsx

@@ -7,12 +7,10 @@ import {
 } from 'services/questionsServices';
 
 export default function AnswerController({ answer_id, question_id, ...props }) {
+    const acceptAnswer = () => updateAcceptAnswer(question_id, answer_id);
     const getVote = () => getAnswerVote(question_id, answer_id);
     const updateVote = (data) => updateAnswerVote(question_id, answer_id, data);
-    const postComment = async (data) => {
-        await postAnswerComment(question_id, answer_id, data);
-    };
-    const acceptAnswer = () => updateAcceptAnswer(question_id, answer_id);
+    const postComment = async (data) => { await postAnswerComment(question_id, answer_id, data); };
 
     return (
         <Answer
@@ -22,8 +20,8 @@ export default function AnswerController({ answer_id, question_id, ...props }) {
                 updateVote,
                 postComment,
                 acceptAnswer,
-                question_id,
                 answer_id,
+                question_id,
             }}
         />
     );