make edits for a messages-only view of the chat module

webroot/styles/chat.css

@@ -3,6 +3,7 @@
   overflow: auto;
   padding: 1em 0;
 }
+
 #message-input-container {
   width: 100%;
   padding: 1em;
@@ -13,22 +14,8 @@
   align-items: flex-end;
   margin-bottom: 0;
 }
-#message-body-form {
-  font-size: 1em;
-  height: 60px;
-}
-#message-body-form:disabled{
-  opacity: .5;
-}
-#message-body-form img {
-  display: inline;
-  padding-left: 5px;
-  padding-right: 5px;
-}
 
-#message-body-form .emoji {
-  width: 40px;
-}
+
 
 #message-form-actions {
   flex-direction: row;
@@ -37,16 +24,22 @@
   width: 100%;
 }
 
-.message-text img {
-  display: inline;
-  padding-left: 5px;
-  padding-right: 5px;
+#message-form-actions-buttons {
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
 }
 
-.message-text .emoji {
-  width: 60px;
+/* Emoji picker button */
+#emoji-button {
+  font-size: 1.75em;
+  cursor: pointer;
+  margin-right: .5em;
 }
 
+.emoji-picker__wrapper {}
+
+
 
 
 .message {
@@ -68,13 +61,37 @@
   max-width: 85%;
   word-wrap: break-word;
 }
-.message-content a {
+
+
+
+
+
+
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+.message-text a {
   color: #7F9CF5; /* indigo-400 */
 }
-.message-content a:hover {
+.message-text a:hover {
   text-decoration: underline;
 }
 
+.message-text img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+
+.message-text .emoji {
+  width: 60px;
+}
+
 
 .message-text iframe {
   width: 100%;
@@ -86,57 +103,27 @@
   height: 314px;
 }
 
-.message-text code {
-  background-color:darkslategrey;
-  padding: 3px;
-}
-/* Emoji picker */
-#emoji-button {
-  position: relative;
-  top: -65px;
-  right: 10px;
-  cursor: pointer;
-}
-
 .message-text .embedded-image {
   width: 100%;
   height: 170px;
   border-radius: 15px;
 }
 
-.message-text code {
-  background-color:darkslategrey;
-  padding: 3px;
-}
-
-/* Emoji picker */
-#emoji-button {
-  position: relative;
-  top: -65px;
-  right: 10px;
-  cursor: pointer;
-}
-.message-text .embedded-image {
-  width: 100%;
-  height: 170px;
-  border-radius: 15px;
-}
-
-.message-text code {
-  background-color:darkslategrey;
-  padding: 3px;
-}
 .message-text .highlighted {
   color: orange;
   font-weight: 400;
   font-size: 14px;
-
 }
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+
+
+
+
+
 
-.message-text code {
-  background-color:darkslategrey;
-  padding: 3px;
-}
 
 /*
 The chat input has a fake placeholder that is styled below.
@@ -144,6 +131,30 @@ It pulls the placeholder text from the div's placeholder attribute.
 But really it's just the innerHTML content.
 */
 
+
+
+
+
+
+
+#message-body-form {
+  font-size: 1em;
+  height: 60px;
+}
+#message-body-form:disabled{
+  opacity: .5;
+}
+#message-body-form img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#message-body-form .emoji {
+  width: 40px;
+}
+
+
 /* If the div is empty then show the placeholder */
 #message-body-form:empty:before{
   content: attr(placeholder);