moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chats: start styling ChatWindow

This commit is contained in:
Alex Gleason 2020-08-25 21:03:10 -05:00
parent cab490e1d3
commit 5373c5b1c4
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/soapbox/features/chats/components/chat_window.js
View File

@ -69,9 +69,13 @@ class ChatWindow extends ImmutablePureComponent {
</div>
<div className='pane__content'>
<div className='chat-messages'>
{chatMessages.map(chatMessage =>
<div class='chat-message'>{chatMessage.get('content')}</div>
)}
{chatMessages.map(chatMessage => (
<div className='chat-message' key={chatMessage.get('id')}>
<span className='chat-message__bubble'>
{chatMessage.get('content')}
</span>
</div>
))}
</div>
<div className='pane__actions'>
<input type='text' placeholder='Send a message...' />

18
app/styles/chats.scss
View File

@ -69,10 +69,11 @@
}
&__content {
height: 100%;
background: var(--foreground-color);
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
&__actions {
@ -93,3 +94,18 @@
}
}
}
.chat-messages {
overflow-y: scroll;
}
.chat-message {
margin: 14px 10px;
&__bubble {
padding: 4px 10px;
max-width: 70%;
border-radius: 10px;
background-color: var(--background-color);
}
}