diff options
author | 2019-04-04 21:25:45 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 41df2af75da0d4c1d76dffc98fdc55b31cc39776 (patch) | |
tree | 80b2706c4e2feaf87d56df89db6937297109f7ab /vnext/src | |
parent | efdb2c2665125b6ff09da5bf35b4396ef6f028f9 (diff) |
Message styling
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Contacts.js | 3 | ||||
-rw-r--r-- | vnext/src/components/Message.css | 13 | ||||
-rw-r--r-- | vnext/src/components/MessageInput.js | 2 | ||||
-rw-r--r-- | 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 ( - <form className="msg-comment-target"> + <form className="msg-comment-target" style={{padding: '12px'}}> <div style={commentStyle}> <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter} ref={this.textarea} style={textInputStyle} value={this.state.body} diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js index c1d42db4..e866369f 100644 --- a/vnext/src/components/Spinner.js +++ b/vnext/src/components/Spinner.js @@ -4,19 +4,21 @@ import ContentLoader from 'react-content-loader'; function Spinner(props) { return ( <div className="msg-cont"> - <ContentLoader - speed={2} - primaryColor="#f8f8f8" - secondaryColor="#ecebeb" - {...props}> - <rect x="56" y="6" rx="0" ry="0" width="117" height="6.4" /> - <rect x="56" y="20" rx="0" ry="0" width="85" height="6.4" /> - <rect x="0" y="60" rx="0" ry="0" width="270" height="6.4" /> - <rect x="0" y="78" rx="0" ry="0" width="270" height="6.4" /> - <rect x="0" y="96" rx="0" ry="0" width="201" height="6.4" /> - <rect x="0" y="0" rx="0" ry="0" width="48" height="48" /> - <rect x="0" y="120" rx="0" ry="0" width="270" height="1" /> - </ContentLoader> + <div className="msg-txt"> + <ContentLoader + speed={2} + primaryColor="#f8f8f8" + secondaryColor="#ecebeb" + {...props}> + <rect x="56" y="6" rx="0" ry="0" width="117" height="6.4" /> + <rect x="56" y="20" rx="0" ry="0" width="85" height="6.4" /> + <rect x="0" y="60" rx="0" ry="0" width="270" height="6.4" /> + <rect x="0" y="78" rx="0" ry="0" width="270" height="6.4" /> + <rect x="0" y="96" rx="0" ry="0" width="201" height="6.4" /> + <rect x="0" y="0" rx="0" ry="0" width="48" height="48" /> + <rect x="0" y="120" rx="0" ry="0" width="270" height="1" /> + </ContentLoader> + </div> </div> ); } |