Refactor style for background

This commit is contained in:
Nicola Benaglia 2025-06-12 10:14:04 +02:00
parent 89cc4981f8
commit 1abda4a278
5 changed files with 17 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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