Refactor style for background

src/components/Chat/ChatList.tsx

@@ -217,7 +217,6 @@ export const ChatList = ({
       >
         <Box
           ref={parentRef}
-          className="List"
           style={{
             display: 'flex',
             flexGrow: 1,
@@ -227,13 +226,13 @@ export const ChatList = ({
           }}
         >
           <Box
-            style={{
+            sx={{
               height: rowVirtualizer.getTotalSize(),
               width: '100%',
             }}
           >
             <Box
-              style={{
+              sx={{
                 left: 0,
                 position: 'absolute',
                 top: 0,
@@ -327,7 +326,7 @@ export const ChatList = ({
                   return (
                     <Box
                       key={virtualRow.index}
-                      style={{
+                      sx={{
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column',
@@ -354,7 +353,7 @@ export const ChatList = ({
                     data-index={virtualRow.index} //needed for dynamic row height measurement
                     ref={rowVirtualizer.measureElement} //measure dynamic row height
                     key={message.signature}
-                    style={{
+                    sx={{
                       alignItems: 'center',
                       display: 'flex',
                       flexDirection: 'column',
@@ -405,7 +404,7 @@ export const ChatList = ({
         {showScrollButton && (
           <Button
             onClick={() => scrollToBottom()}
-            style={{
+            sx={{
               backgroundColor: theme.palette.other.unread,
               border: 'none',
               borderRadius: '20px',
@@ -428,15 +427,15 @@ export const ChatList = ({
         {showScrollDownButton && !showScrollButton && (
           <Button
             onClick={() => scrollToBottom()}
-            style={{
+            sx={{
               backgroundColor: theme.palette.background.paper,
-              outline: `1px solid ${theme.palette.primary.light}`,
               border: 'none',
               borderRadius: '20px',
               bottom: 20,
               color: theme.palette.text.primary,
               cursor: 'pointer',
               fontSize: '16px',
+              outline: `1px solid ${theme.palette.primary.light}`,
               padding: '10px 20px',
               position: 'absolute',
               right: 20,

src/components/Chat/ChatOptions.tsx

@@ -786,6 +786,7 @@ const ShowMessage = ({ message, goToMessage, messages }) => {
       <Box
         sx={{
           alignItems: 'center',
+          background: theme.palette.background.surface,
           display: 'flex',
           justifyContent: 'space-between',
           width: '100%',

src/components/Chat/MessageItem.tsx

@@ -228,8 +228,8 @@ export const MessageItemComponent = ({
         isLast={isLast}
         onSeen={onSeenFunc}
       >
-        <div
-          style={{
+        <Box
+          sx={{
             backgroundColor: theme.palette.background.paper,
             borderRadius: '7px',
             display: 'flex',
@@ -664,7 +664,7 @@ export const MessageItemComponent = ({
               </Box>
             </Box>
           </Box>
-        </div>
+        </Box>
       </MessageWragger>
     </>
   );

src/components/Group/Group.tsx

@@ -1635,7 +1635,7 @@ export const Group = ({
       <Box
         style={{
           alignItems: 'flex-start',
-          background: theme.palette.background.paper,
+          background: theme.palette.background.surface,
           borderRadius: '0px 15px 15px 0px',
           display: 'flex',
           flexDirection: 'column',
@@ -1763,7 +1763,7 @@ export const Group = ({
                 sx={{
                   background:
                     direct?.address === selectedDirect?.address &&
-                    theme.palette.background.paper,
+                    theme.palette.background.surface,
                   borderRadius: '2px',
                   cursor: 'pointer',
                   display: 'flex',
@@ -1782,7 +1782,7 @@ export const Group = ({
                   <ListItemAvatar>
                     <Avatar
                       sx={{
-                        background: theme.palette.background.paper,
+                        background: theme.palette.background.surface,
                         color: theme.palette.text.primary,
                       }}
                       alt={direct?.name || direct?.address}
@@ -2008,7 +2008,7 @@ export const Group = ({
             <>
               <Box
                 sx={{
-                  background: theme.palette.background.paper,
+                  background: theme.palette.background.surface,
                   bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
                   left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
                   opacity: !(desktopViewMode === 'chat') ? 0 : 1,

src/components/Group/GroupList.tsx

@@ -60,7 +60,7 @@ export const GroupList = ({
 
   return (
     <Box
-      style={{
+      sx={{
         alignItems: 'flex-start',
         background: theme.palette.background.surface,
         borderRadius: '0px 15px 15px 0px',
@@ -146,7 +146,7 @@ export const GroupList = ({
       </Box>
 
       <Box
-        style={{
+        sx={{
           alignItems: 'flex-start',
           display: 'flex',
           flexDirection: 'column',