Fixed up some messaging layout issues. BOD-78

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,134 +1,103 @@
-.messages {
-  //flex-grow: 1;
-  flex: 1;
-  //   height: 100%;
-  //   min-height: calc(100% - 10px);
-  //   max-height: calc(100% - 93px);
-  //   // overflow-y: scroll;
-  //   // overflow-x: hidden;
+.message-icon {
+  position: absolute;
+  bottom: 0rem;
+  color: seagreen;
+  border: black;
+  // z-index: 5;
 }
 
-// @media screen and (max-width: 735px) {
-//   .messages {
-//     max-height: calc(100% - 105px);
-//   }
-// }
-// .messages::-webkit-scrollbar {
-//   width: 8px;
-//   background: transparent;
-// }
-// .messages::-webkit-scrollbar-thumb {
-//   background-color: rgba(0, 0, 0, 0.3);
-// }
-.messages ul {
-  height: 100%;
+.chat {
+  flex: 1;
+  //width: 300px;
+  //border: solid 1px #eee;
+  display: flex;
+  flex-direction: column;
+  //padding: 10px;
 }
-.messages ul li {
-  display: inline-block;
-  // clear: both;
-  //float: left;
-  // margin: 5px;
-  //width: calc(100% - 25px);
-  // font-size: 0.9em;
+
+.messages {
+  //margin-top: 30px;
+  display: flex;
+  flex-direction: column;
 }
-.messages ul li:nth-last-child(1) {
-  margin-bottom: 20px;
-}
-.messages ul li.sent img {
-  margin: 6px 8px 0 0;
-}
-.messages ul li.sent p {
-  background: #435f7a;
-  color: #f5f5f5;
-}
-.messages ul li.replies img {
-  float: right;
-  margin: 6px 0 0 8px;
-}
-.messages ul li.replies p {
-  background: #f5f5f5;
-  float: right;
-}
-.messages ul li img {
-  width: 22px;
-  border-radius: 50%;
-  float: left;
-}
-.messages ul li p {
-  display: inline-block;
-  margin: 0px;
-  padding: 0px 10px;
+
+.message {
   border-radius: 20px;
-  max-width: 205px;
-  //line-height: 130%;
+  padding: 0.25rem 0.8rem;
+  //margin-top: 5px;
+  // margin-bottom: 5px;
+  display: inline-block;
 }
-@media screen and (min-width: 735px) {
-  .messages ul li p {
-    max-width: 300px;
-  }
+
+.yours {
+  align-items: flex-start;
 }
-.message-input {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  z-index: 99;
+.msgmargin {
+  margin-top: 0.1rem;
 }
-.message-input .wrap {
+
+.yours .message {
+  margin-right: 25%;
+  background-color: #eee;
   position: relative;
 }
-.message-input .wrap input {
-  font-family: "proxima-nova", "Source Sans Pro", sans-serif;
-  float: left;
-  border: none;
-  width: calc(100% - 90px);
-  padding: 11px 32px 10px 8px;
-  font-size: 0.8em;
-  color: #32465a;
-}
-@media screen and (max-width: 735px) {
-  .message-input .wrap input {
-    padding: 15px 32px 16px 8px;
-  }
-}
-.message-input .wrap input:focus {
-  outline: none;
-}
-.message-input .wrap .attachment {
+
+.yours .message.last:before {
+  content: "";
   position: absolute;
-  right: 60px;
-  z-index: 4;
-  margin-top: 10px;
-  font-size: 1.1em;
-  color: #435f7a;
-  opacity: 0.5;
-  cursor: pointer;
+  z-index: 0;
+  bottom: 0;
+  left: -7px;
+  height: 20px;
+  width: 20px;
+  background: #eee;
+  border-bottom-right-radius: 15px;
 }
-@media screen and (max-width: 735px) {
-  .message-input .wrap .attachment {
-    margin-top: 17px;
-    right: 65px;
-  }
+.yours .message.last:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-right-radius: 10px;
 }
-.message-input .wrap .attachment:hover {
-  opacity: 1;
+
+.mine {
+  align-items: flex-end;
 }
-.message-input .wrap button {
-  float: right;
-  border: none;
-  width: 50px;
-  padding: 12px 0;
-  cursor: pointer;
-  background: #32465a;
-  color: #f5f5f5;
+
+.mine .message {
+  color: white;
+  margin-left: 25%;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
+  position: relative;
 }
-@media screen and (max-width: 735px) {
-  .message-input .wrap button {
-    padding: 16px 0;
-  }
+
+.mine .message.last:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  right: -8px;
+  height: 20px;
+  width: 20px;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
+  border-bottom-left-radius: 15px;
 }
-.message-input .wrap button:hover {
-  background: #435f7a;
-}
-.message-input .wrap button:focus {
-  outline: none;
+
+.mine .message.last:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  right: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-left-radius: 10px;
 }