From 4ecbb5234ca2cb1f04a963f6dbfba889ef1df6e6 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 29 Dec 2024 15:51:51 -0500
Subject: [PATCH] ssb: Tweaking profile card CSS.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-profile.js | 46 ++++++++++++++++++++++++------------------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 23cd74bf..ce586a01 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&zUbiDsKYgSEnn5g5oDSQ1M5YwGqwHL+3cMO6a6zdCD8=.sha256"
+	"previous": "&vLj0HMWc/ArlfAO112c0+JfXdszqkZxFIazUO6BaQEQ=.sha256"
 }
diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js
index 63114688..04cc00c5 100644
--- a/apps/ssb/tf-profile.js
+++ b/apps/ssb/tf-profile.js
@@ -297,28 +297,34 @@ class TfProfileElement extends LitElement {
 			typeof profile.image == 'string' ? profile.image : profile.image?.link;
 		image = this.editing?.image ?? image;
 		let description = this.editing?.description ?? profile.description;
-		return html`<div class="w3-container" style="box-sizing: border-box; border: 2px solid black; background-color: rgba(255, 255, 255, 0.2)">
-			<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
-			<input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input>
-			<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
-			<div style="display: flex; flex-direction: row; gap: 1em">
-				${edit_profile}
-				<div style="flex: 1 0 50%">
-					<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>
-					<div>${unsafeHTML(tfutils.markdown(description))}</div>
+		return html`<div class="w3-card-4 w3-container w3-theme-d3" style="box-sizing: border-box">
+			<header class="w3-container">
+				<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})</p>
+			</header>
+			<div class="w3-container">
+				<input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input>
+				<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
+				<div style="display: flex; flex-direction: row; gap: 1em">
+					${edit_profile}
+					<div style="flex: 1 0 50%">
+						<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>
+						<div>${unsafeHTML(tfutils.markdown(description))}</div>
+					</div>
+				</div>
+				<div>
+					Following ${profile.following} identities.
+					Followed by ${profile.followed} identities.
+					Blocking ${profile.blocking} identities.
+					Blocked by ${profile.blocked} identities.
 				</div>
 			</div>
-			<div>
-				Following ${profile.following} identities.
-				Followed by ${profile.followed} identities.
-				Blocking ${profile.blocking} identities.
-				Blocked by ${profile.blocked} identities.
-			</div>
-			<p>
-				${edit}
-				${follow}
-				${block}
-			</p>
+			<footer class="w3-container">
+				<p>
+					${edit}
+					${follow}
+					${block}
+				</p>
+			</footer>
 		</div>`;
 	}
 }