Merge pull request 'dms are cool' (#1) from dev into main

Reviewed-on: https://g.tylerm.dev/tylerm/xssbook/pulls/1

4 files changed, 196 insertions, 4 deletions

diff --git a/public/css/api.css b/public/css/api.css
index 8358538..a9f794a 100644
--- a/public/css/api.css
+++ b/public/css/api.css
@@ -123,6 +123,14 @@ h2 {
     background-color: #bfa354;
 }
 
+.get {
+    background-color: #00cc00;
+}
+
+.delete {
+    background-color: #cc0000;
+}
+
 .key { 
     margin-left: 40px; 
-}
\ No newline at end of file
+}
diff --git a/public/css/chat.css b/public/css/chat.css
new file mode 100644
index 0000000..d654679
--- /dev/null
+++ b/public/css/chat.css
@@ -0,0 +1,180 @@
+.spacer {
+    margin-bottom: 3.5em !important;
+}
+
+#cent {
+    display: flex;
+    width: 100%;
+    height: calc(100vh - 3.5em);
+    flex-direction: row;
+}
+
+#sidebar {
+    height: 100%;
+    width: 20%;
+    min-width: 25em;
+    display: flex;
+    flex-direction: column;
+}
+
+#sidebar>span {
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    margin: .5em 0;
+}
+
+#center {
+    height: 100%;
+    width: calc(100vw - 20%);
+    max-width: calc(100vw - 25em);
+}
+
+.room {
+    width: calc (100% - 1rem);
+    height: 3rem;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    padding: .5rem 1rem;
+}
+
+.room:hover, .current {
+    background-color: var(--hover);
+}
+
+.room-icon {
+    border-radius: 3rem;
+    height: 3rem;
+    width: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 1000;
+    font-size: 1.5rem;
+
+right: 0;}
+
+.room-name {
+    display: flex;
+    height: 3rem;
+    margin-left: 1rem;
+    align-items: center;
+}
+
+.roomDisplay {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+}
+
+.roomDisplayCenter {
+    position: relative;
+    display: flex;
+    width: calc(100% - 25em);
+    height: 100%;
+    flex-direction: column;
+}
+
+.roomDisplayPeople {
+    width: 25em;
+    height: 100%;
+    overflow-y: scroll;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.roomDisplayPeople>span {
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    margin: .5em 0em;
+}
+
+.person {
+    width: 20em;
+}
+
+.person img, .person .profile {
+    height: 7em;
+    width: 7em;
+}
+
+.person .info {
+    margin: 5px;
+}
+
+.person .ltext {
+    font-size: 18px;
+}
+
+.person .gtext {
+    font-size: 12px;
+}
+
+.roomDisplay .messages {
+    flex: 1;
+    margin-left: 1rem;
+    display: flex;
+    flex-direction: column-reverse;
+    overflow-y: scroll;
+}
+
+.roomDisplay .messageContent {
+    flex-grow: 0;
+    width: auto;
+    margin-bottom: .5rem;
+    display: block;
+    height: fit-content;
+    overflow: none;
+}
+
+.roomDisplay .messageContent[contenteditable]:empty::before {
+  content: "Send an unencrypted message";
+  color: gray;
+}
+
+.addUser[contenteditable]:empty::before {
+  content: "Type email to add user";
+  color: gray;
+}
+
+.addRoom[contenteditable]:empty::before {
+  content: "Type name to create room";
+  color: gray;
+}
+
+.message {
+    display: flex;
+    flex-direction: row;
+    height: fit-content;
+    padding: .5rem;
+}
+
+.message-pfp {
+    flex-grow: 0;
+    height: 3rem;
+    width: 3rem;
+    margin-right: 1rem;
+}
+
+.message-pfp img {
+    width: 100%;
+    height: 100%;
+    border-radius: 3rem;
+}
+
+.message-content {
+    flex-grow: 0;
+}
+
+.loadMessages {
+    position: absolute;
+    right: 0;
+    cursor: pointer;
+}
diff --git a/public/css/home.css b/public/css/home.css
index f467aba..f21d201 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -184,4 +184,4 @@ body {
     width: calc(100% - 20px);
     background-color: var(--secondary);
     font-family: sfpro;
-}
\ No newline at end of file
+}
diff --git a/public/css/main.css b/public/css/main.css
index d5ac0bf..c8ff1d7 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -14,6 +14,10 @@ body {
     --popup: #ffffffcc;
 }
 
+textarea {
+    resize: none
+}
+
 body {
     background-color: var(--primary);
     width: 100%;
@@ -130,7 +134,7 @@ footer {
     background-color: var(--primary);
 }
 
-input {
+input, .input {
     flex: 1;
     font-family: sfpro;
     background-color: var(--primary);
@@ -431,4 +435,4 @@ form {
       transform: rotate(360deg);
     }
 }
-  
\ No newline at end of file
+