chat: adjust ChatMessage color
@@ -569,7 +569,7 @@ export const MessagePlaceholder = ({
>
<Text
display='block'
- background='gray'
+ background='washedGray'
width='24px'
height='24px'
borderRadius='50%'
@@ -592,12 +592,13 @@ export const MessagePlaceholder = ({
display='inline-block'
verticalAlign='middle'
fontSize='0'
- gray
+ washedGray
cursor='default'
>
<Text maxWidth='32rem' display='block'>
<Text
- backgroundColor='gray'
+ backgroundColor='washedGray'
+ borderRadius='2'
display='block'
width='100%'
height='100%'
@@ -609,10 +610,11 @@ export const MessagePlaceholder = ({
mono
verticalAlign='middle'
fontSize='0'
- gray
+ washedGray
>
<Text
- background='gray'
+ background='washedGray'
+ borderRadius='2'
display='block'
height='1em'
style={{ width: `${((index % 3) + 1) * 3}em` }}
@@ -623,12 +625,14 @@ export const MessagePlaceholder = ({
verticalAlign='middle'
fontSize='0'
ml='2'
- gray
+ washedGray
+ borderRadius='2'
display={['none', 'inline-block']}
className='child'
>
<Text
- backgroundColor='gray'
+ backgroundColor='washedGray'
+ borderRadius='2'
display='block'
width='100%'
height='100%'
@@ -637,7 +641,8 @@ export const MessagePlaceholder = ({
</Box>
<Text
display='block'
- backgroundColor='gray'
+ backgroundColor='washedGray'
+ borderRadius='2'
height='1em'
style={{ width: `${(index % 5) * 20}%` }}
></Text>
