From d7fc1c2c886dfc2069f1a7b9d74808f3a81974c9 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Thu, 2 May 2024 20:35:00 -0400
Subject: [PATCH] Minor style/layout changes.

---
 apps/ssb.json         |  2 +-
 apps/ssb/tf-app.js    |  7 +++++--
 apps/ssb/tf-styles.js | 42 +++++++++++++++++++++---------------------
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index d163e2f7..5df0743d 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&GHOyZaFBo5iHa8XumUpbdtDi2F0YhZaiF8cVsutdxTU=.sha256"
+	"previous": "&vEaOZjrNb0u9rhNqrQ8eU9TlOFlo4HsgW6hbI7VdIT0=.sha256"
 }
diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index 9415f8be..7c10b8d8 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -358,7 +358,10 @@ class TfElement extends LitElement {
 		`;
 		let contents = !this.loaded
 			? this.loading
-				? html`<div>Loading...</div>`
+				? html`<div class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge">
+					Loading...
+				</div>
+				${this.render_tab()}`
 				: html`<div>Select or create an identity.</div>`
 			: this.render_tab();
 		return html`
@@ -366,8 +369,8 @@ class TfElement extends LitElement {
 				style="width: 100vw; min-height: 100vh; height: 100%"
 				class="w3-theme-dark"
 			>
+				${tabs}
 				<div style="padding: 8px">
-					${tabs}
 					${this.tags.map(
 						(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
 					)}
diff --git a/apps/ssb/tf-styles.js b/apps/ssb/tf-styles.js
index e29ba61c..73e041f8 100644
--- a/apps/ssb/tf-styles.js
+++ b/apps/ssb/tf-styles.js
@@ -286,29 +286,29 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 `;
 
 // prettier-ignore
-const w3_2016_snorkel_blue = css`
-.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important}
-.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important}
-.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important}
-.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important}
-.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important}
-.w3-theme-d1 {color:#fff !important; background-color:#024575 !important}
-.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important}
-.w3-theme-d3 {color:#fff !important; background-color:#02365b !important}
-.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important}
-.w3-theme-d5 {color:#fff !important; background-color:#012641 !important}
+const w3_2016_riverside = css`
+.w3-theme-l5 {color:#000 !important; background-color:#f4f6f9 !important}
+.w3-theme-l4 {color:#000 !important; background-color:#d9e1ec !important}
+.w3-theme-l3 {color:#000 !important; background-color:#b4c3d8 !important}
+.w3-theme-l2 {color:#fff !important; background-color:#8ea6c5 !important}
+.w3-theme-l1 {color:#fff !important; background-color:#6888b1 !important}
+.w3-theme-d1 {color:#fff !important; background-color:#456185 !important}
+.w3-theme-d2 {color:#fff !important; background-color:#3d5676 !important}
+.w3-theme-d3 {color:#fff !important; background-color:#354b68 !important}
+.w3-theme-d4 {color:#fff !important; background-color:#2e4059 !important}
+.w3-theme-d5 {color:#fff !important; background-color:#26364a !important}
 
-.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important}
-.w3-theme-dark {color:#fff !important; background-color:#012641 !important}
-.w3-theme-action {color:#fff !important; background-color:#012641 !important}
+.w3-theme-light {color:#000 !important; background-color:#f4f6f9 !important}
+.w3-theme-dark {color:#fff !important; background-color:#26364a !important}
+.w3-theme-action {color:#fff !important; background-color:#26364a !important}
 
-.w3-theme {color:#fff !important; background-color:#034f84 !important}
-.w3-text-theme {color:#034f84 !important}
-.w3-border-theme {border-color:#034f84 !important}
+.w3-theme {color:#fff !important; background-color:#4c6a92 !important}
+.w3-text-theme {color:#4c6a92 !important}
+.w3-border-theme {border-color:#4c6a92 !important}
 
-.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important}
-.w3-hover-text-theme:hover {color:#034f84 !important}
-.w3-hover-border-theme:hover {border-color:#034f84 !important}
+.w3-hover-theme:hover {color:#fff !important; background-color:#4c6a92 !important}
+.w3-hover-text-theme:hover {color:#4c6a92 !important}
+.w3-hover-border-theme:hover {border-color:#4c6a92 !important}
 `;
 
-export let styles = [tf, w3, w3_2016_snorkel_blue];
+export let styles = [tf, w3, w3_2016_riverside];