From 41df2af75da0d4c1d76dffc98fdc55b31cc39776 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 4 Apr 2019 21:25:45 +0300 Subject: Message styling --- vnext/src/components/Contacts.js | 3 ++- vnext/src/components/Message.css | 13 ++++++++++--- vnext/src/components/MessageInput.js | 2 +- vnext/src/components/Spinner.js | 28 +++++++++++++++------------- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js index f726f173..3852b26f 100644 --- a/vnext/src/components/Contacts.js +++ b/vnext/src/components/Contacts.js @@ -35,7 +35,8 @@ const wrapperStyle = { const chatListStyle = { display: 'flex', flexDirection: 'column', - width: '100%' + width: '100%', + padding: '12px' }; const chatTitleStyle = { diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css index cd0c34ab..4b2e6d74 100644 --- a/vnext/src/components/Message.css +++ b/vnext/src/components/Message.css @@ -1,7 +1,14 @@ +.msg-cont .ir { + padding: 12px; +} .msg-cont .ir img { max-width: 100%; height: auto; } +.msg-cont > .h, +.msg-cont .msg-header { + padding: 12px; +} .msg-cont > nav.l { border-top: 1px solid #eee; display: flex; @@ -42,7 +49,6 @@ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); line-height: 140%; margin-bottom: 12px; - padding: 12px; } .reply-new .msg-cont { border-right: 5px solid #0C0; @@ -57,7 +63,7 @@ } .msg-txt { margin: 0 0 12px; - padding-top: 10px; + padding: 12px; word-wrap: break-word; overflow-wrap: break-word; } @@ -81,6 +87,7 @@ blockquote { color: #999; font-size: small; margin: 5px 0 0 0; + padding: 12px; } .msg-comments { color: #AAA; @@ -130,7 +137,7 @@ blockquote { color: #AAA; font-size: small; margin-bottom: 10px; - padding-bottom: 6px; + padding: 6px; border-bottom: 1px solid #eee; overflow: hidden; text-indent: 10px; diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 25d9b6ba..d2b6ad7b 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -70,7 +70,7 @@ export default class MessageInput extends React.Component { } render() { return ( -
+