Fixes live from @ullarah 😅 (#135)

Co-authored-by: James Mills <prologic@shortcircuit.net.au>
Reviewed-on: https://git.mills.io/saltyim/saltyim/pulls/135

client.go

@@ -60,7 +60,7 @@ func parseExtraEnvs(extraenvs string) map[string]string {
 // PackMessage formts an outoing message in the Message Format
 // <timestamp>\t(<sender>) <message>
 func PackMessage(me *Addr, msg string) []byte {
-	log.Debugf("pack: ", me.Formatted(), msg)
+	log.Debug("pack: ", me.Formatted(), msg)
 	return []byte(
 		fmt.Sprint(
 			time.Now().UTC().Format(time.RFC3339), "\t",

internal/web/app.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8dc2d0f49b9c17ce443c79319aed9a435cc70ee2dadc40d731dfd8a31887bccc
-size 28580151
+oid sha256:5dffb719db7a617011e24eeb0b8b64845359c0609d5cff0c6169ce3d0e035602
+size 28582407

internal/web/css/style.css

@@ -1,29 +1,28 @@
-body {
+html, body {
     background-color: var(--mdc-theme-background);
     color: var(--mdc-theme-text-primary-on-background);
-    font-family: Roboto, monospace;
+    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu";
     margin: 0;
 }
 
-.main-content {
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-
 form {
+    margin: 0 0.5rem;
+    background-color: var(--mdc-theme-primary);
     display: flex;
-    gap: 5px;
+    gap: 0.5rem;
     justify-content: flex-start;
+    border-radius: 0.5rem;
 }
 
 #wrapper {
-    margin: 0px;
+    margin: 0;
     background: #eee;
     max-width: 100%;
+    padding-bottom: 1.1rem;
 }
 
 #chatbox {
+    margin-top: -2rem;
     box-sizing: border-box;
     background: #efefef;
     padding: 10px;
@@ -33,7 +32,8 @@ form {
     overflow: auto;
 }
 
-.chat-msg.user > .msg-avatar img {
+.chat-msg.user > .msg-avatar img,
+.chat-msg.self > .msg-avatar img {
     max-width: 45px;
     max-height: 45px;
     border-radius: 50%;
@@ -41,12 +41,12 @@ form {
     width: 15%;
 }
 
+.chat-msg.user > .msg-avatar img {
+    float: left;
+}
+
 .chat-msg.self > .msg-avatar img {
-    max-width: 45px;
-    max-height: 45px;
-    border-radius: 50%;
     float: right;
-    width: 15%;
 }
 
 .cm-msg-text {
@@ -57,8 +57,8 @@ form {
     float: left;
     margin-left: 10px;
     position: relative;
-    margin-bottom: 20px;
-    border-radius: 30px;
+    margin-bottom: 1.25rem;
+    border-radius: 0.5rem;
 }
 
 .chat-msg {
@@ -68,7 +68,7 @@ form {
 .chat-msg.self > .cm-msg-text {
     float: right;
     margin-right: 10px;
-    background: #5A5EB9;
+    background: var(--mdc-theme-primary);
     color: white;
 }
 
@@ -77,14 +77,17 @@ form {
 }
 
 #chat-send {
-    padding-top: 16px;
-}    
+    color: #fff;
+    vertical-align: middle;
+    height: 3.5rem;
+    margin-left: -0.5rem;
+}
 
 #chat-input {
     flex: 1;
-    border-radius: 25px;
-    border: 2px solid #609;
-    padding: 20px;
+    border-radius: 0.5rem;
+    border: 2px solid var(--mdc-theme-primary);
+    padding: 10px;
 }
 
 #config-user-input {
@@ -97,17 +100,17 @@ form {
 
 
 @font-face {
-    font-family: 'Material Icons';
+    font-family: 'wdc';
     font-style: normal;
     font-weight: 400;
     src: url(micons.woff2) format('woff2');
 }
 
 .material-icons {
-    font-family: 'Material Icons';
+    font-family: 'wdc';
     font-weight: normal;
     font-style: normal;
-    font-size: 24px;
+    font-size: 1.5rem;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
@@ -117,4 +120,4 @@ form {
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
-}
+}