fix: update comp

src/components/Chatbox/Date.tsx

@@ -1,22 +1,14 @@
-import { FC } from 'react';
-
-import { styled } from '@mui/material';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-const DateContainer = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1, 1),
-}));
+import { Box, Typography } from '@mui/material';
 
 type Props = {
   date: string;
 };
 
-const Date: FC<Props> = ({ date }) => {
+const Date = ({ date }: Props): JSX.Element => {
   return (
-    <DateContainer p={1} alignSelf="center">
+    <Box p={1} alignSelf="center">
       <Typography variant="subtitle2">{date}</Typography>
-    </DateContainer>
+    </Box>
   );
 };
 

src/components/Chatbox/EditBanner.tsx

@@ -1,10 +1,12 @@
 import { Close, Edit } from '@mui/icons-material';
-import { styled } from '@mui/material';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import SvgIcon from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
+import {
+  Box,
+  Divider,
+  IconButton,
+  SvgIcon,
+  Typography,
+  styled,
+} from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
 

src/components/Chatbox/Header.tsx

@@ -1,10 +1,7 @@
 import { FC } from 'react';
 
 import ChatIcon from '@mui/icons-material/Chat';
-import { styled } from '@mui/material';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
+import { AppBar, Toolbar, Typography, styled } from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
 

src/components/Chatbox/Input.tsx

@@ -8,8 +8,7 @@ import {
 } from 'react-mentions';
 
 import SendIcon from '@mui/icons-material/Send';
-import { Box, Typography, styled, useTheme } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { Box, IconButton, Typography, styled, useTheme } from '@mui/material';
 
 import { MessageBodyType } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';

src/components/Chatbox/Message.tsx

@@ -1,8 +1,6 @@
 import { FC } from 'react';
 
-import { styled } from '@mui/material';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
+import { Box, Typography, styled } from '@mui/material';
 import grey from '@mui/material/colors/grey';
 
 import { ChatMessage, CompleteMember, Member } from '@graasp/sdk';

src/components/Chatbox/Messages.tsx

@@ -1,7 +1,6 @@
 import { FC, Fragment, useEffect, useRef } from 'react';
 
-import { styled } from '@mui/material';
-import Box from '@mui/material/Box';
+import { Box, styled } from '@mui/material';
 
 import { ChatMessage, CompleteMember } from '@graasp/sdk';