diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index d0db1c0..1b26c03 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,328 +1,245 @@
-import { QuestionMark } from "@mui/icons-material";
-import { Box, ClickAwayListener, IconButton, Popper } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import EmojiPicker from "emoji-picker-react";
-import React, { useState, useCallback } from "react";
-import { Arrow2Icon, Arrow3Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon, SaltireIcon } from "./svgIcons";
+import { QuestionMark } from '@mui/icons-material';
+import { Box, ClickAwayListener, IconButton, Popper } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import EmojiPicker from 'emoji-picker-react';
+import React, { useState, useCallback } from 'react';
+import {
+  Arrow2Icon,
+  Arrow3Icon,
+  ArrowIcon,
+  CameraIcon,
+  CameraInBubbleIcon,
+  CancelIcon,
+  CrossedEyeIcon,
+  CrossIcon,
+  EmojiIcon,
+  EyeIcon,
+  FolderIcon,
+  InfoIcon,
+  MicroInBubbleIcon,
+  PaperClipIcon,
+  PenIcon,
+  SaltireIcon,
+} from './svgIcons';
 
-const RoundButton = styled(
-    ({Icon, ...props}) => (
-        <IconButton {...props} disableRipple={true}>
-            <Icon fontSize="inherit"/>
-        </IconButton>
-    )
-)(({theme}) => ({
-    border: `1px solid ${theme.palette.primary.dark}`,
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-    "&:active": {
-        color: "#FFF",
-        background: theme.palette.primary.dark,
-    },
-    "&.MuiIconButton-sizeSmall": {
-        height: "15px",
-        width: "15px",
-    },
-    "&.MuiIconButton-sizeMedium": {
-        height: "30px",
-        width: "30px",
-    },
-    "&.MuiIconButton-sizeLarge": {
-        height: "53px",
-        width: "53px",
-    }
+const RoundButton = styled(({ Icon, ...props }) => (
+  <IconButton {...props} disableRipple={true}>
+    <Icon fontSize="inherit" />
+  </IconButton>
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.primary.dark}`,
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+  '&:active': {
+    color: '#FFF',
+    background: theme.palette.primary.dark,
+  },
+  '&.MuiIconButton-sizeSmall': {
+    height: '15px',
+    width: '15px',
+  },
+  '&.MuiIconButton-sizeMedium': {
+    height: '30px',
+    width: '30px',
+  },
+  '&.MuiIconButton-sizeLarge': {
+    height: '53px',
+    width: '53px',
+  },
 }));
 
 export const CancelPictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="remove picture"
-            Icon={CancelIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="remove picture" Icon={CancelIcon} size="large" />;
+};
 
 export const EditPictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="edit picture"
-            Icon={PenIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="edit picture" Icon={PenIcon} size="large" />;
+};
 
 export const UploadPictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="upload picture"
-            Icon={FolderIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="upload picture" Icon={FolderIcon} size="large" />;
+};
 
 export const TakePictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="take picture"
-            Icon={CameraIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="take picture" Icon={CameraIcon} size="large" />;
+};
 
 export const InfoButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="informations"
-            Icon={InfoIcon}
-            size="small"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="informations" Icon={InfoIcon} size="small" />;
+};
 
 export const TipButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="tip"
-            Icon={QuestionMark}
-            size="medium"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="tip" Icon={QuestionMark} size="medium" />;
+};
 
-export const MoreButton = styled(
-    (props) => {
-        return (
-            <IconButton
-                {...props}
-                disableRipple={true}
-                aria-label="more"
-            >
-                <CrossIcon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    border: `1px solid ${theme.palette.primary.dark}`,
-    color: theme.palette.primary.dark,
-    fontSize: "10px",
-    height: "20px",
-    width: "20px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-    "&:active": {
-        color: "#FFF",
-        background: theme.palette.primary.dark,
-    },
-}))
+export const MoreButton = styled((props) => {
+  return (
+    <IconButton {...props} disableRipple={true} aria-label="more">
+      <CrossIcon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  border: `1px solid ${theme.palette.primary.dark}`,
+  color: theme.palette.primary.dark,
+  fontSize: '10px',
+  height: '20px',
+  width: '20px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+  '&:active': {
+    color: '#FFF',
+    background: theme.palette.primary.dark,
+  },
+}));
 
-export const BackButton = styled(
-    (props) => {
-        return (
-            <IconButton
-                {...props}
-                disableRipple={true}
-                aria-label="back"
-            >
-                <ArrowIcon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    height: "30px",
-    width: "51px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-}))
+export const BackButton = styled((props) => {
+  return (
+    <IconButton {...props} disableRipple={true} aria-label="back">
+      <ArrowIcon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  height: '30px',
+  width: '51px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+}));
 
-export const CloseButton = styled(
-    (props) => {
-        return (
-            <IconButton
-                {...props}
-                disableRipple={true}
-                aria-label="close"
-            >
-                <SaltireIcon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    height: "30px",
-    width: "30px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-}))
+export const CloseButton = styled((props) => {
+  return (
+    <IconButton {...props} disableRipple={true} aria-label="close">
+      <SaltireIcon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  height: '30px',
+  width: '30px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+}));
 
-export const ToggleVisibilityButton = styled(
-    ({visible, ...props}) => {
-        const Icon = visible ? CrossedEyeIcon : EyeIcon
-        return (
-            <IconButton {...props} disableRipple={true}>
-                <Icon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    height: "15px",
-    width: "15px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-}))
+export const ToggleVisibilityButton = styled(({ visible, ...props }) => {
+  const Icon = visible ? CrossedEyeIcon : EyeIcon;
+  return (
+    <IconButton {...props} disableRipple={true}>
+      <Icon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  height: '15px',
+  width: '15px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+}));
 
-const SquareButton = styled(
-    ({Icon, ...props}) => (
-        <IconButton {...props} disableRipple={true}>
-            <Icon fontSize="inherit"/>
-        </IconButton>
-    )
-)(({theme}) => ({
-    color: "#7E7E7E",
-    fontSize: "25px",
-    height: "36px",
-    width: "36px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: "#E5E5E5",
-    },
+const SquareButton = styled(({ Icon, ...props }) => (
+  <IconButton {...props} disableRipple={true}>
+    <Icon fontSize="inherit" />
+  </IconButton>
+))(({ theme }) => ({
+  color: '#7E7E7E',
+  fontSize: '25px',
+  height: '36px',
+  width: '36px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: '#E5E5E5',
+  },
 }));
 
 export const RecordVideoMessageButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="record video message"
-            Icon={CameraInBubbleIcon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="record video message" Icon={CameraInBubbleIcon} />;
+};
 
 export const RecordVoiceMessageButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="record voice message"
-            Icon={MicroInBubbleIcon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="record voice message" Icon={MicroInBubbleIcon} />;
+};
 
 export const UploadFileButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="upload file"
-            Icon={PaperClipIcon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="upload file" Icon={PaperClipIcon} />;
+};
 
 export const SendMessageButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="send message"
-            Icon={Arrow2Icon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="send message" Icon={Arrow2Icon} />;
+};
 
-export const ReplyMessageButton = styled(
-    ({Icon, ...props}) => (
-        <IconButton
-            {...props}
-            disableRipple={true}
-            aria-label="send message"
-        >
-            <Arrow3Icon fontSize="inherit"/>
-        </IconButton>
-    )
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "20px",
-    height: "20px",
-    width: "20px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: "#E5E5E5",
-    },
+export const ReplyMessageButton = styled(({ Icon, ...props }) => (
+  <IconButton {...props} disableRipple={true} aria-label="send message">
+    <Arrow3Icon fontSize="inherit" />
+  </IconButton>
+))(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '20px',
+  height: '20px',
+  width: '20px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: '#E5E5E5',
+  },
 }));
 
-export const EmojiButton = styled(
-    ({emoji, ...props}) => (
-        <IconButton {...props} disableRipple={true}>
-            {emoji}
-        </IconButton>
-    )
-)(({theme}) => ({
-    color: "white",
-    fontSize: "20px",
-    height: "20px",
-    width: "20px",
+export const EmojiButton = styled(({ emoji, ...props }) => (
+  <IconButton {...props} disableRipple={true}>
+    {emoji}
+  </IconButton>
+))(({ theme }) => ({
+  color: 'white',
+  fontSize: '20px',
+  height: '20px',
+  width: '20px',
 }));
 
 export const SelectEmojiButton = (props) => {
-    const [anchorEl, setAnchorEl] = useState(null)
-  
-    const handleOpenEmojiPicker = useCallback(
-      e => setAnchorEl(anchorEl ? null : e.currentTarget),
-      [anchorEl],
-    )
-  
-    const handleClose = useCallback(
-      () => setAnchorEl(null),
-      [setAnchorEl],
-    )
-  
-    const onEmojiClick = useCallback(
-      (e, emojiObject) => {
-        props.onEmojiSelected(emojiObject.emoji)
-        handleClose()
-      },
-      [handleClose, props.onEmojiSelected],
-    )
-  
-    const open = Boolean(anchorEl)
-    const id = open ? 'simple-popover' : undefined
-  
-    return (
-        <ClickAwayListener onClickAway={handleClose}>
-            <Box>
-                <SquareButton
-                    aria-describedby={id}
-                    aria-label="select emoji"
-                    Icon={EmojiIcon}
-                    onClick={handleOpenEmojiPicker}
-                />
-                <Popper
-                    id={id}
-                    open={open}
-                    anchorEl={anchorEl}
-                    onClose={handleClose}
-                >
-                    <EmojiPicker.default
-                        onEmojiClick={onEmojiClick}
-                        disableAutoFocus={true}
-                        disableSkinTonePicker={true}
-                        native
-                    />
-                </Popper>
-            </Box>
-        </ClickAwayListener>
-    )
-}
+  const [anchorEl, setAnchorEl] = useState(null);
 
+  const handleOpenEmojiPicker = useCallback((e) => setAnchorEl(anchorEl ? null : e.currentTarget), [anchorEl]);
+
+  const handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
+
+  const onEmojiClick = useCallback(
+    (e, emojiObject) => {
+      props.onEmojiSelected(emojiObject.emoji);
+      handleClose();
+    },
+    [handleClose, props.onEmojiSelected]
+  );
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <ClickAwayListener onClickAway={handleClose}>
+      <Box>
+        <SquareButton
+          aria-describedby={id}
+          aria-label="select emoji"
+          Icon={EmojiIcon}
+          onClick={handleOpenEmojiPicker}
+        />
+        <Popper id={id} open={open} anchorEl={anchorEl} onClose={handleClose}>
+          <EmojiPicker.default
+            onEmojiClick={onEmojiClick}
+            disableAutoFocus={true}
+            disableSkinTonePicker={true}
+            native
+          />
+        </Popper>
+      </Box>
+    </ClickAwayListener>
+  );
+};