From de6c7a4fd42f1b70ec282ed3f7ba6040d2238aaf Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 1 May 2024 12:34:36 -0400
Subject: [PATCH] SSB app stylin'.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-message.js | 35 ++++++++++++++++-------------------
 apps/ssb/tf-styles.js  |  9 +++------
 apps/ssb/tf-utils.js   | 13 +++++++++++++
 4 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 79263a73..16ae2ce4 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&wuCG8/3Z93hPcX4PZNNoQnQx9L2QjCKfn/hoVHb2VJo=.sha256"
+	"previous": "&eapETfizGynW7oCLJmlsDwEYHqXWh2usHnDdVPxpXv0=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 998aaf41..731f0430 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -248,7 +248,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 			let self = this;
 			return html`
 				<fieldset
-					style="backdrop-filter: brightness(1.2); padding: 0.5em; border: 1px solid black"
+					style="padding: 0.5em; border: 1px solid black"
 				>
 					<legend>Mentions</legend>
 					${mentions.map((x) => self.render_mention(x))}
@@ -339,6 +339,9 @@ ${JSON.stringify(mention, null, 2)}</pre
 		if (this.message?.decrypted?.type == 'post') {
 			content = this.message.decrypted;
 		}
+		let class_background = this.message?.decrypted
+			? 'w3-pale-red'
+			: 'w3-theme-d4';
 		let self = this;
 		let raw_button;
 		switch (this.format) {
@@ -397,8 +400,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 			let body;
 			return html`
 				<div
-					class="w3-card-4"
-					style="backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
+					class="w3-card-4 w3-theme-d4 w3-border-theme"
+					style="margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
 				>
 					<tf-user id=${self.message.author} .users=${self.users}></tf-user>
 					<span style="padding-right: 8px"
@@ -424,8 +427,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 		}
 		if (this.message?.type === 'contact_group') {
 			return html` <div
-				class="w3-card-4"
-				style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
+				class="w3-card-4 w3-theme-d4 w3-border-theme"
+				style="margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
 			>
 				${this.message.messages.map(
 					(x) =>
@@ -440,8 +443,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 			</div>`;
 		} else if (this.message.placeholder) {
 			return html` <div
-				class="w3-card-4"
-				style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
+				class="w3-card-4 w3-theme-d4 w3-border-theme"
+				style="margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
 			>
 				<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a>
 				(placeholder)
@@ -570,9 +573,6 @@ ${JSON.stringify(content, null, 2)}</pre
 				let is_encrypted = this.message?.decrypted
 					? html`<span style="align-self: center">🔓</span>`
 					: undefined;
-				let style_background = this.message?.decrypted
-					? 'background-color: rgba(255, 0, 0, 0.2)'
-					: 'backdrop-filter: brightness(1.2)';
 				return html`
 					<style>
 						code {
@@ -589,8 +589,8 @@ ${JSON.stringify(content, null, 2)}</pre
 						}
 					</style>
 					<div
-						class="w3-card-4"
-						style="border: 1px solid black; ${style_background}; margin-top: 8px; padding: 16px"
+						class="w3-card-4 ${class_background} w3-border-theme"
+						style="margin-top: 8px; padding: 16px"
 					>
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@@ -616,9 +616,6 @@ ${JSON.stringify(content, null, 2)}</pre
 				let is_encrypted = this.message?.decrypted
 					? html`<span style="align-self: center">🔓</span>`
 					: undefined;
-				let style_background = this.message?.decrypted
-					? 'background: rgba(255, 0, 0, 0.2)'
-					: 'backdrop-filter: brightness(1.2)';
 				return html`
 					<style>
 						code {
@@ -635,8 +632,8 @@ ${JSON.stringify(content, null, 2)}</pre
 						}
 					</style>
 					<div
-						class="w3-card-4"
-						style="border: 1px solid black; ${style_background}; margin-top: 8px; padding: 16px"
+						class="w3-card-4 ${class_background} w3-border-theme"
+						style="margin-top: 8px; padding: 16px"
 					>
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@@ -726,8 +723,8 @@ ${JSON.stringify(content, null, 2)}</pre
 						}
 					</style>
 					<div
-						class="w3-card-4"
-						style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px"
+						class="w3-card-4 w3-theme-d4 w3-border-theme"
+						style="margin-top: 8px; padding: 16px"
 					>
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
diff --git a/apps/ssb/tf-styles.js b/apps/ssb/tf-styles.js
index 7522007b..e29ba61c 100644
--- a/apps/ssb/tf-styles.js
+++ b/apps/ssb/tf-styles.js
@@ -34,12 +34,9 @@ const tf = css`
 		content: ' ±';
 	}
 
-	code {
-		background-color: #444;
-		padding-left: 3px;
-		padding-right: 3px;
-		border: 1px dotted #fff;
-		border-radius: 4px;
+	pre code {
+		display: block;
+		padding: 8px;
 	}
 
 	blockquote {
diff --git a/apps/ssb/tf-utils.js b/apps/ssb/tf-utils.js
index 088d0b9b..e929d1ff 100644
--- a/apps/ssb/tf-utils.js
+++ b/apps/ssb/tf-utils.js
@@ -1,5 +1,7 @@
 import * as hashtagify from './commonmark-hashtag.js';
 
+const k_code_classes = 'w3-theme-l4 w3-theme-border w3-round';
+
 function image(node, entering) {
 	if (
 		node.firstChild?.type === 'text' &&
@@ -60,10 +62,20 @@ function image(node, entering) {
 	}
 }
 
+function code(node) {
+	let attrs = this.attrs(node);
+	attrs.push(['class', k_code_classes]);
+	this.tag('code', attrs);
+	this.out(node.literal);
+	this.tag('/code');
+}
+
 function attrs(node) {
 	let result = commonmark.HtmlRenderer.prototype.attrs.bind(this)(node);
 	if (node.type == 'block_quote') {
 		result.push(['class', 'w3-theme-d1']);
+	} else if (node.type == 'code_block') {
+		result.push(['class', k_code_classes]);
 	}
 	return result;
 }
@@ -72,6 +84,7 @@ export function markdown(md) {
 	let reader = new commonmark.Parser({safe: true});
 	let writer = new commonmark.HtmlRenderer();
 	writer.image = image;
+	writer.code = code;
 	writer.attrs = attrs;
 	let parsed = reader.parse(md || '');
 	parsed = hashtagify.transform(parsed);