feat: add colour scheme

main.js

@@ -71,18 +71,22 @@ class SentMessage {
         let progressBar = thisMessage.getElementsByClassName("progress")[0];
 
         if (amount < 0.5) {
-            this.updateStatus("in flight");
-            progressBar.style.backgroundColor = "red";
+            const color = "var(--light-red)";
+            this.updateStatus("in flight", color);
+            progressBar.style.backgroundColor = color;
             amount *= 2;
         }
         else if (amount < 1) {
-            this.updateStatus("completing round trip");
-            progressBar.style.backgroundColor = "blue";
+            const color = "var(--robin-egg-blue)";
+            this.updateStatus("completing round trip", color);
+            progressBar.style.backgroundColor = color;
             amount -= 0.5;
             amount *= 2;
         }
         else {
-            this.updateStatus("delivered");
+            const color = "var(--eggshell)";
+            this.updateStatus("delivered", color);
+            progressBar.style.backgroundColor = color;
             clearInterval(this.updateBarIntervalId);
             amount = 0;
             this.onDelivered();
@@ -92,10 +96,11 @@ class SentMessage {
         progressBar.style.width = percentage;
     }
 
-    updateStatus(newStatus) {
+    updateStatus(newStatus, color) {
         let thisMessage = getMessageElement(this.idx);
         let statusElement = thisMessage.getElementsByClassName("message-status")[0];
         statusElement.innerHTML = newStatus;
+        statusElement.style.color = color;
     }
 }
 
@@ -135,7 +140,7 @@ function getMessageHtml(text, isOurs) {
     let message = `<li><div class="message">
             <span class="message-content rounded-rectangle ${owner}">
                 ${progressBar}
-                ${text}
+                <span class="message-text">${text}</span>
             </span></div>${statusText}</li>`;
 
     return message;

styles.css

@@ -1,3 +1,11 @@
+:root {
+    --dark-purple: #271f30;
+    --light-red: #ff686b;
+    --eggshell: #dfe2cf;
+    --ucla-blue: #4d7298;
+    --robin-egg-blue: #66ced6;
+}
+
 html {
     font-family: sans-serif;
 }
@@ -5,6 +13,8 @@ html {
 body {
     margin-left: 0;
     margin-right: 0;
+
+    background-color: var(--dark-purple);
 }
 
 #page {
@@ -14,19 +24,23 @@ body {
 h1 {
     margin-left: 0.5em;
     display: inline;
+
+    color: var(--eggshell);
 }
 
 .delay {
     display: inline;
+
+    color: var(--robin-egg-blue);
 }
 
 .rounded-rectangle {
     border-width: 2px;
     border: black;
-    border-style: solid;
+    border-style: none;
     border-radius: 1em;
 
-    padding: 7px;
+    padding: .6em .8em;
 }
 
 .message-content {
@@ -35,16 +49,26 @@ h1 {
 }
 
 .message-content.theirs {
-    background-color: yellow;
+    background-color: var(--ucla-blue);
+
     left: 0;
 }
 
+.theirs .message-text {
+    color: var(--eggshell);
+}
+
 .message-content.ours {
-    background-color: pink;
+    background-color: var(--eggshell);
+
     right: 0;
     margin-bottom: 0.5em;
 }
 
+.ours .message-text {
+    color: var(--dark-purple);
+}
+
 ul {
     margin: 1em;
     margin-bottom: 4em;
@@ -72,6 +96,8 @@ li {
 }
 
 #typing-indicator {
+    color: var(--eggshell);
+
     margin: 0;
     margin-left: 1em;
     margin-bottom: 0.5em;
@@ -81,31 +107,50 @@ li {
 }
 
 #textbox input {
+    color: var(--dark-purple);
+    background-color: var(--eggshell);
+
     margin: 0.5em;
     left: 1em;
 
-    width: 85%;
+    width: 80%;
     font-size: 1em;
 
     z-index: 1;
 }
 
 button {
+    background-color: var(--dark-purple);
+    color: var(--eggshell);
+
     margin: 0.5em;
     padding: 0;
-    width: 10%;
+    width: 15%;
     position: absolute;
     right: 0;
     font-size: 1em;
 }
 
+button:hover {
+    color: var(--dark-purple);
+    background-color: var(--eggshell);
+}
+
+@media only screen and (min-width: 768px) {
+    button {
+        width: 10%;
+    }
+
+    #textbox input {
+        width: 85%;
+    }
+}
+
 .progress-bar {
     width: 100%;
     height: 100%;
-    opacity: 80%;
     max-width: 400px;
-    background-color: #e0e0e0;
-    border-radius: 10px;
+    border-radius: 1em;
     overflow: hidden;
     position: absolute;
 
@@ -115,14 +160,14 @@ button {
 }
 
 .progress {
-    opacity: 80%;
+    opacity: 50%;
     width: 0;
     height: 100%;
-    background-color: #ff5c35;
 }
 
 .message-status {
-    margin-top: 1em;
+    color: var(--robin-egg-blue);
+
     position: absolute;
     top: 2.3em;
     right: 1em;