feat: new message composer

1 files changed, 103 insertions, 4 deletions

diff --git a/assets/style.scss b/assets/style.scss
index fdc6e61..d4b4e91 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -14,6 +14,10 @@ body {
   word-wrap: break-word;
   text-wrap: wrap;
   overflow-wrap: break-word;
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+  flex: 1 1 auto;
 }
 
 html {
@@ -54,12 +58,15 @@ html {
 
 .panel {
   border: 2px solid black;
+  border-color: black;
+  border-style: solid;
   background: linear-gradient(180deg, #364B3B 0%, #19311F 100%);
 }
 
 #login-form {
   padding: 32px;
   margin: 4px;
+  max-width: 850px;
 }
 
 #login-form form {
@@ -131,8 +138,13 @@ p {
 }
 
 .chats-list {
-  border: 2px solid black;
-  height: 100%;
+  border-width: 0 2px 0 0;
+  border-color: black;
+  border-style: solid;
+  height: auto;
+  width: 400px;
+  flex: 0 0 auto;
+  align-self: stretch;
 }
 
 .chats-list>* {
@@ -162,11 +174,98 @@ p {
   /* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */
 }
 
+.avatar {
+  object-fit: contain;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+}
+
 .chats-list-item .avatar {
   width: 48px;
   height: 48px;
-  object-fit: contain;
-  border-radius: 50%;
+}
+
+.chats-list-chats {
+  height: auto;
+}
+
+.open-chat-views {
+  flex: 1 1 100%;
+}
+
+.open-chat-view {
+  height: auto;
+}
+
+.chat-view-header .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.chat-view-header {
+  border-width: 0 0 2px 0;
+  display: flex;
+  padding: 16px;
+  gap: 16px;
+}
+
+.chat-view-header h2 {
+  font-family: 'K2D';
+  font-weight: bold;
+}
+
+.new-message-composer {
+  border-width: 2px 0 0 0;
+  width: auto;
+  padding: 16px;
+}
+
+.new-message-composer textarea {
+  font-family: 'K2D';
+  border: 2px solid black;
+  font-size: 16px;
+  padding: 8px;
+  /* width: auto; */
+  margin: 0;
+  height: auto;
+  /* resize: none; */
+  /* box-sizing: border-box; */
+  /* overflow: scroll; */
+  /* display: block; */
+}
+
+.grow-wrap {
+  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+  display: grid;
+}
+
+.grow-wrap::after {
+  /* Note the weird space! Needed to preventy jumpy behavior */
+  content: attr(data-replicated-value) " ";
+  /* This is how textarea text behaves */
+  white-space: pre-wrap;
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
+  max-height: 5em;
+}
+
+.grow-wrap>textarea {
+  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
+  resize: none;
+  /* Firefox shows scrollbar on growth, you can hide like this. */
+  overflow: scroll;
+}
+
+.grow-wrap>textarea,
+.grow-wrap::after {
+  /* Identical styling required!! */
+  border: 2px solid black;
+  padding: 8px;
+  font: inherit;
+
+  /* Place on top of each other */
+  grid-area: 1 / 1 / 2 / 2;
 }
 
 /* font-families */