SMS design

css/style.css

@@ -43,3 +43,35 @@
 	text-overflow: ellipsis;
 	color: #333;
 }
+
+#app-content {
+	padding: 15px;
+}
+
+.msg-sent, .msg-recv {
+	border-radius: 12px;
+	margin: 4px;
+	max-width: 50%;
+	padding: 8px;
+	box-shadow: 1px 1px 1px #CCC;
+	-moz-box-shadow: 1px 1px 1px #CCC;
+	-webkit-box-shadow: 1px 1px 1px #CCC;
+	-ms-box-shadow: 1px 1px 1px #CCC;
+	-o-box-shadow: 1px 1px 1px #CCC;
+}
+
+.msg-sent {
+	border: 1px solid #bbb;
+	background: #a5fb7a;
+	float: right;
+}
+
+.msg-recv {
+	border: 1px solid #bbb;
+	background: #e8e8e8;
+	float: left;
+}
+
+.msg-spacer {
+	clear: both;
+}

js/script.js

@@ -28,7 +28,7 @@ function fetchConversation(phoneNumber) {
 					msgClass = '';
 				}
 
-				conversationBuf += '<div class="' + msgClass + '">' + vals["msg"] + '</div>';
+				conversationBuf += '<div><div class="' + msgClass + '">' + vals["msg"] + '</div><div class="msg-spacer"></div></div>';
 			});
 
 			$('#app-content').html(conversationBuf);