Message styling

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>
     );
 }